Typography and CSS3

Working for a graphic design firm is interesting.  Print designers can be highly-strung individuals when faced with examples of poor typography.  Straight quotes that should be curved quotes, poor kerning, fonts not using ligatures—are all examples of things that can drive a print designer crazy. This is why it is difficult to find a print designer that enjoys working in the web world. Some day web typography will catch up to print typography. CSS3 is supposed to bring a number of new features, so I thought I would explore one of them: Ligatures. For those who don’t know what typographical ligatures are, they are when two letters, such as an lowercase f and lowercase i are joined together. The font designer has to include the ligatures (and other features) into the design of the font. For example, here is an image of the letters separate: and as a ligature. It is now possible with CSS3 and OpenType fonts to use these on the web. At the end of this article, I will give some links to other sources on how you can use these. But I also want to describe my experience in playing with these on different browsers, specifically Chrome and Firefox.

Finding the right font

The first challenge is finding the right font. I went to Google Fonts to search for a font to play with. Right off the bat, I ran into issues. Google Fonts doesn’t offer any tools to show you what advanced typography features the font has. For example, does the font support smart fractions and ligatures? I thought would just set the preview text to “fi” and see what it shows. Here are screen shots from Google Chrome and Firefox. I am using the font “Trocchi.” Below is how it looks in Firefox, and here is how it looks in Chrome. Chrome doesn’t show you what you need to know. I tried both Latin and Latin Extended and got the same results. I wondered whether this meant that Chrome did not display ligatures? So I coded a test page that I could use to see each browser. Below is the CSS code I used:

Note that whenever I see browser-specific CSS properties I get worried. But below are screen captures for both browsers for an h1 tag with the ligature feature supposedly turned off. First, here is Chrome.  Sure enough, the ligatures are off.   But in Firefox, they did not turn off. So Chrome looks like it is working while Firefox definitely did not turn off the ligature via the CSS property. So let’s now look at the same with the ligatures on (using the .advanced class). First is Firefox, which displays correctly, and here is Chrome, which also displays correctly. Well that is some good news.  At least,if ligatures are turned on, both browsers display them correctly. At this point I wondered about IE 11 and Safari. IE showed the same results as Chrome. Safari 5.1.7 did not display any ligatures. So it is apparent to me, that for a lot of CSS3 features, the lack of standards support in the browsers is still a major issue. It is surprising to me that IE support was there, but Safari was not. For this particular CSS3 feature, you might not care. The pages will not look exactly the same (line lengths will differ), but that might be all right. Still, I wanted to explore some more. I wondered what would happen if I added letter-spacing to the CSS. So, I added the CSS property letter-spacing:10px. Both Chrome: And Firefox displayed the letters correctly (by not using ligatures, because the characters where no longer next to each other). And if you use the browser debugger to dynamically change the letter spacing, both will display the ligature correctly when the letter spacing goes back to zero. Then I put a <span> tag around the letter ‘i’ and added padding to see what would happen. Here is Firefox, showing the ligature broken apart:   And here is Chrome, which did not break the ligature, but converted it back to two separate characters: I started this post by describing how print designers go crazy with bad typography. Well, web designers go crazy dealing with poorly-supported CSS features that browsers don’t implement in a standards-compliant manner. If you want to use these techniques be prepared for a lot of cross-browser testing. I think I am going to go get a whisky now.  

Links

CSS Fonts Module Level 3 (w3.org) Make Your Web Pages More Legible With Ligatures and Kerning Pairs How to code OpenType features in CSS