Swash Cap

In his second issue of “Web Fonts & Typography News,” an excellent weekly newsletter, Jason Pamental shares some tips on creating a drop cap on the web. As demonstrated in Jason’s technique, making a drop cap with the first-letter property requires some finessing until the initial-letter property is supported in major browsers.

In the latest iteration of this blog, I wanted to create a drop cap, but ended up with a swash cap instead. As you can see, the first letter in the opening paragraph of each blog post is a bit fancier than the rest. Pliego, designed by Juanjo López, has some beautiful OpenType features including swashes and stylistic alternatives. To activate them, I simply need one of CSS:

p:first-of-type:first-letter {font-feature-settings:"swsh","salt";}

The initial letter is subtle, but does add a nice touch to the text.