Web Fonts &
Typography News

Issue #19 • 25 June, 2019

This past week has been pretty exciting on the event and writing inquiry front. More details to come, but I’m beyond thrilled to announce that I’ll be joining the lineup at Beyond Tellerand in Berlin in November. Other places you might find me this fall include Chicago, Tokyo, Toronto (twice!), Edinburgh, and Denver. Be sure to let me know if your organization or team would like to arrange a visit if I’m coming through your city!

And finally... some more variable font news! My friends at Monotype have shared a bunch of pre-release fonts with me, and they look amazing. They’ve been a part of this from the  beginning, and seeing the evolution of the work is really remarkable. (My dream came true: FF Meta with weight AND width axes!) I’ll be sharing more on this soon, but alongside Meta are classics like Avenir, Frutiger, Univers, and more. If you’re interested in learning more, hit reply and let me know. I’ll get you in contact with the right folks over there.

Today’s Tip

OpenType part 2: A leg up on ligatures

Continuing on from last week’s introduction to OpenType features, this issue we’re going to take a look at ligatures. A ligature can be described as when two or more individual letterforms or symbols are combined to form a single glyph. This practice predates metal type and printing by thousands of years, having been found in Sumerian writing (according to Wikipedia)—but our understanding of them is far more related to the more recent form. 

In many cases ligatures are created for stylistic reasons: to even out spacing that might otherwise be too great or to handle what would otherwise be overlapping parts of letterforms. In English, that often means combinations like ‘fi’, ‘fl’, ‘fj’ but there are many others. While these are fairly common, there are other more ornate ones to be found, particularly like ‘ct’ and ’st’, that have a more historic look and are generally less used in the everyday. And there are also more discretionary ones—in the case of EB Garamond (the font used in the demos), it’s one for ’Th’. Otherwise there’s a rather awkward amount of space between the letters.

The practice of creating ligatures started in handwriting—oftentimes for speed as much as any other reason. But in digital fonts meant to look handwritten (like Dasha from the marvelous Jess McCarty’s Magpie Paperworks), they’re an essential part of the fonts, making the seamless connections between letters possible.

In metal type it was more about spacing and preserving a connection to the written word. Many typefaces were designed to provide a visceral connection to things made by hand. So even in the earliest years of moveable type, there exist a number of commonly used ligatures as seen here in one of Robert Granjon’s designs from the mid-1500’s.

During the latter part of the 20th century, as photo-typesetting and early digital type became popular, ligatures became much less common. This was due to their less-frequent inclusion in sans-serif typefaces that were becoming popular and to technical limitations in how font software worked. It wasn’t until the development of OpenType fonts and their widespread adoption in the early-to-mid 2000’s that ligatures came back into more widespread use. This was because the new format allowed for easier substitution of ligatures for separate glyphs at a software level. Now even on the web it’s far more common to see standard ligatures be on by default.

But seriously though, why do we care?

This is a reasonable question to ask. And the answer is not necessarily simple. One reason is spacing: the standard ligatures often even out spacing between letters, making the text feel more evenly spaced—therefore making it easier or more comfortable to read. Other reasons I’ve seen put forth relate to ‘making text look more historic’ or something to that effect. But I think that’s too simplistic. 

As a designer and typographer, I want to choose type and make typesetting decisions that support the brand and the overall design direction chosen for the project. ‘Making it look more historic’ might be a criteria, but so could ‘make it feel familiar’ or ‘make it reminiscent of this time or place’. These are design goals, and typographic decisions will either support them or not.

My own feeling is that ligatures lend a bit of polish to a design, and help set it apart from so much of what I see every day. Not all of them should be used all the time perhaps (think historical ligatures)—but enabling them for headings and blockquotes could be a reasonable strategy if it supports the overall design. 

Be intentional

My point is that all our decisions about typography and design should be in support of the content and the goals. The more care we take in doing so, the more it will show through in the final outcome. The more care the readers see put into that outcome, the more faith they will place in the content they are reading.

Let’s have a look at how to use them on the web. Note that all the example code showcases how to properly use progressive enhancement to display features with the proper attributes where they are supported. It doesn’t add much to the process, but the result will be a more future-friendly site.

Standard Ligatures

These are often defaulted to ‘on’ if they exist, but as I mentioned last week with numerals, you can never be sure which ones will be on or off so it pays to specify in your CSS.

Discretionary Ligatures

While the name might make these seem a bit more optional, the example in EB Garamond is in my mind just as useful and necessary as the standard ‘fi’ and ‘ffl’ sort. The one discretionary ligature to be found is ‘Th’—which does a very nice job of evening the space between the two characters. And since that combination was used at least six times in writing today’s issue (sorry, no bonus points for finding them all), it’s one that would find fairly regular use.

Historical Ligatures

These are generally a bit more ornate, and perhaps less suited to use throughout your text. But for display use (like headings or blockquotes) they can really add a bit of polish and style. EB Garamond gives us two: ‘ct’ and ‘st’, and I have to admit I’m a fan.

Resources

• Examples on CodePen
• OpenType Features guide I wrote for MDN
• 'font-variant-ligatures' on MDN
• Decline and fall of the ligature (from 2007—maybe they need a follow-on: Ligatures! We’re baaaaackk!)
• An Even More Comprehensive guide to OpenType features in CSS

Web Type News

• Matej Latin writes about 5 Keys to Accessible Web Typography
• Periodic Table of Type
• Every Layout (not specifically type related, but a fantastic resource for learning modern CSS layout techniques to pair with your typography skills from Heydon Pickering & Andy Bell)

Does your organization need a boost?

If your brand voice needs some volume, or your team could use a hand improving font performance—maybe you could use a Type Audit. I work with you and your team to identify how well your site’s voice aligns with your brand, and can show you how to improve how quickly it gets on screen on any size device. Read more about Type Audits and let’s talk!

Upcoming Events

• Heading to Barcelona on July 17th for CSS Camp to chat about dynamic typography and variable fonts
• Winding up in the Windy City for An Event Apart Chicago on August 26-28
• Teaching a full-day workshop and giving a talk on variable fonts at Web Unleashed in Toronto on September 12-14