Type on Screen
12 Italics That Whisper and Wail
Wednesday 27th August 2014
A lot of what we do as designers is about guiding people to information in order of priority. Colour, size and spacing can all be used to emphasize content. But if we look at using a type-first strategy why not start by looking at forms of emphasis available in the type itself, like the italics styles in type families?
Invented for medieval mobile devices
Italic type originated at the start of the 16th century. Aldus Manutius, a printer and publisher in Venice, commissioned his typefounder Francesco Griffo to make type for a new pocket-sized format of book.
The type was based on speedy cursive handwriting that was sloped and joined. Most importantly, the resulting type was more condensed than the typical roman type and retained its clarity better at smaller sizes. This may not sound major, but it revolutionized the printing industry. At a time when books were rather large and only for the wealthy, italic typefaces allowed a move to smaller books—decreasing their price, increasing their production, and making them portable.
Interestingly, italics weren’t originally used for emphasis. They were used separately to the roman until the mid-16th century (although the capitals were initially all roman). It’s unclear as to who exactly we have to thank for using italics for emphasis alongside roman type, but it’s usually attributed to either François Guyot or Robert Granjon in France. Since then, italics have become a staple part of type families. Over time they have gained a number of specific uses, and this is where thinking about how they might be used in the content we are designing for can help us choose a good typeface.
I like to categorise the look and feel of the italics into two groups—emphasis vs EMPHASIS. This can be really handy when narrowing down type choices. Sometimes you need just a little subtle differentiation in your text, and other times you really want to draw attention to parts. If I know I’m going to have lots of big quotes to show off, I look for an italic that’s packed full of flavor and really screams for attention—EMPHASIS. Alternatively if I know there’s going to be lots of small chunks of italicised text within the content, I look for a typeface with more understated italics that have the same rhythm and visual weighting as the roman—emphasis. Here are some of my favorites for the jobs.
Alegreya is only of my favorite typefaces to be released in the last few years. Its almost chiseled details juxtaposed with an otherwise classic serif text face looks amazing and works well at both large and small sizes. Its three italics accentuate all of its lovely, contemporary flavor and intricacies whilst adding even more personality. Even though their stokes are actually quite upright, they have features that make them feel more slanted—such as those thin angled strokes on the loops on the tops of the ‘n’, ‘b’ and ‘h’. Each of these additional details are carefully moderated and become part of the texture, but definitely help them stand out with more visual interest.
Australis Pro Swash
Australis Pro has been in the making for over 10 years. Its low x-height makes it interesting for headings, and but as it doesn’t have any thing too crazy going on and is pretty legible small, it also works well for body text. My favourite thing about it though, has to be its italics. They have a strong slant to them and a more undulating stoke weight compared to the roman’s even letter strokes. Three particularly impressive and fanciful Swash italic weights were recently added to the family. They have more of a handwritten feel to them, with the extra flourishes, and would be ideal in big pull quotes.
Massively ornate with an unmistakable charm, the italics of French Canon are nothing short of beautiful. This is a revival by Igino Marini of a typeface originally cut by Peter de Walpergen for John Fell at the University of Oxford in the 17th century. The type was made to be printed at 39 points, but it actually works well on screen from around 18px upwards. Jam-packed full of lovely quirks, and with nothing quite straight, these are by no means to be used tentatively!
Freight Text Pro
Freight Text has made a rather big impact in the world of web typography. Each time I’ve seen it used, it has felt right and worked well. I particularly like it on Medium, the blogging platform, as it proves how comprehensive it is as a typeface. Although designed together, the italics differ in texture to the roman styles. They’re not subject to being set together, but they play nicely when they are. They have measurably deep ink-traps, and I find their mix of straight edges and curves really intriguing.
Elmhurst was designed in 1994 by Christopher Slye as a typeface for continuous text. It has been most notably used in Rolling Stone magazine, but it works also works nicely on screen. Next time you reach for a go-to serif typeface, give this a try first. The italics have a slightly different rhythm to them, which draws attention when set together with the roman. Separately, the italics have a life of their own. They’re measured, yet absorbing. The uppercase ‘Q’ and lowercase ‘g’ are particularly lovely.
ITC Galliard was designed by Matthew Carter and was modelled on type cut by Robert Granjon. It is a truly distinguished typeface with a very ‘classic’ feel to it. Perhaps its most notable facet, however, is its distinctive italics—they are a thing of beauty. They have a slightly off-kilter rhythm and quite a steep slant angle. When set within the roman they really stand out, and when set on their own they show off all their intricacies. There are an impressive eight italics to choose from, and there’s also an eText version of ITC Galliard available that has been subtly tweaked to optimize its legibility on screen. It has a larger x-height, more generous spacing, and a little more weight to it, which overall makes it an ideal choice for use on the multitude of screen environments available to view the web.
Essay Text is a great serif typeface designed for setting books. It’s very legible at smaller sizes, and when set larger its intricacies make it shine. The roman’s slight slant makes the italic feel more at home when set alongside. It has a very organic, free-flowing feel that’s is perfectly balanced with its readability without causing any distraction. Its italics feel fluid and are slightly upright in their stance, only differing slightly in rhythm to the roman. They’re refined but playful enough to add some interest.
Brioso Pro is one of the Adobe Original series of typefaces. It was named after the Italian word for ‘lively’ and designed by Robert Slimbach. Based on calligraphic forms combined with oldstyle roman type, Brioso Pro is a perfect half-way house between the humanity of hand-drawn letterforms and the lucidity of digital type. Its italics have a lovely rhythm that aren’t too slanted, and, when inline, they feel perfectly measured with the roman.
If you’re after the likes of Georgia or Times but want something a little different, Pona is an ideal choice. It’s a solid text family. With relatively low contrast between its stroke weights and a generous x-height, it’s legible at small sizes, has a nice weight on the page when set in paragraphs, and the italics have a perfect amount of extra blackness to set them off. (Try setting some within a paragraph of roman and squint at your screen to see what I mean). The italics don’t have very much embellishment at all, and they have a near identical width. Pona has a Display family too, which makes a perfect accompaniment for headings.
FF Dagny Web Pro
FF Dagny started life as a sans serif typeface designed for Dagens Nyheter, a Swedish newspaper. A decade later it was transformed into the family it is today, with many weights added and adjustments made to the stroke contrast. While italics in sans-serifs don’t tend to add much visual differences or flair, FF Dagny’s are just right for subtle emphasis and it’s a great type family to use on the web.
Proba Pro was released earlier this year, and I can see it catching on as an alternative to the ever-popular Brandon Grotesque. It’s a geometric sans with humanist elements—think somewhere between Futura and Gill Sans. Even though it has a relatively low x-height, it has wide counters so it remains legible. And it renders well on screen (even when reversed) thanks to its near-monoline strokes. Its italics transfer the same weighting and rhythm into their slanted forms. They have a really nice feel to them with the long ascenders, which add just enough emphasis and no more.
I must admit that before I started researching this post, I’d never stumbled across Harfang Pro. But I am glad that I did! After trying it out in Typecast, it’s jumping rapidly up the ranks of my favorite typefaces. Harfang Pro is a very versatile family with 12 weights. It is also very legible at small sizes. The letterforms have a nice sprinkling of angularity amongst their curves, which sing in headings but fall back without causing distraction in text. The italics have a similar rhythm to the roman and only a slight slant. They don’t change the overall visual blackness of paragraphs when set within them, but add just enough differentiation to make them noticeable.
For more web font recommendations, check out our Type on Screen collection. We’d also like to extend a big thanks to our guest author Jake Giltsoff for writing today’s post. Guest authors are paid for their contribution, and all opinions are their own. Today’s specimen copy is from The Uses of Italic by Frederick W. Hamilton