April 25th, 2005
Five simple steps to better typography — Part 3
I’m pleased this series is turning out to be so popular and it’s somewhat confirmed what I suspected. A bit of a thirst for simple typographic design theory.
As I’ve been writing this series i’ve deluged by email and comments from people agreeing, disagreeing, asking for more information etc. What’s great is designers are thinking and talking about typography again. Designers are questioning typography and not just letting the font and the software do the work. It’s nice to hear. But enough back-slapping Mark, on with the next in the series…
The third installment of this series is dedicated to just one typographic element — Ligatures.
Ligatures are combinations of letters — some of them are functional, some are decorative. They are more commonly seen in serif faces, although ligatures in sans-serif faces such as Gill Sans and Scala Sans are important to the typeface and should be used.
They are generally comprised of certain characters which are created to stop collision of elements of letterforms. Take the letter f of a serif typeface. In lower case, especially italic, the top and tail of the f move into the character space next to it. These overlaps are what typographers call kerns.
It’s when these overlaps collide with letters next to them that we have problems. Take lower case f and lower case i, probably the most widely used ligature. When set in Roman (A, above), the ascender of the f collides with the dot of the i, the effect is much worse when set in italic (B, above). Type designers therefore combined the character into the fi ligature. As you can see, the dot from the i is simply removed.
Ligatures and language have been closely tied throughout typographic history. Typographers in the sixteenth century devised ligatures to cope with common occurrances of letters in latin — fi, ffi, fl, ffl, ff (shown above). You will find at least a couple of these in most fonts. But, as langage has changed to encorporate different words, especially english, the need for more obscure ligatures has grown.
Take the word fjord for example. The ascender of the f will collide with the dot of the lower case j. This is resolved the same way as the fi ligature in that the dot is removed from the j. The trouble with less common ligatures like this is that they generally aren’t in the standard character set of a font, so we kind of have to make do or if setting type in a program like Adobe Illustrator, make them by hand. And this brings me neatly onto practical usage of ligatures.
Usage in print
I tend to use ligatures specifically for headlines. Occasionally, if the job demands it, I will use ligatures for body copy as well but this does tend to make typesetting a little time consuming.
If for example I’m creating a logotype for a coffee shop called “Flow’s fine beans” (a convenient amount of ligatures present there!). The name could simply be set in a font which does not require ligatures, but this could make the logotype quite plain. The font chosen could be serif, but special care must be given to the kerning and overall appearance when setting logotypes that use ligatures.
This logotype, shown above, is simply typed using Mrs Eaves. See how the ligatures appear too close to each other creating dense areas of type. The gaps between certain letterforms are also unsettling to the eye. This needs to be manually kerned.
If the type is set carefully the ligatures add typographic interest to the words. They add character and begin to tell a story about Flow’s shop — it’s a classy place, nice coffee too!
So, careful attention to detail at this stage can help define a logotype and go a long way to help define brand message — all through the simple use of ligatures.
But what about on the web?
Usage on the web
Ligature usage on the web is a bit tricky. Functionally there are special characters for the following ligatures — these are needed for linguistic reasons.
Æ |
Æ | Capital AE |
æ |
æ | Lower-case ae |
Π|
Π| Capital OE |
œ |
œ | Lower-case oe |
Ð |
Ð | Icelandic upper-case eth |
ð |
ð | Icelandic lower-case eth |
ß |
ß | German double-s |
Þ |
Þ | Icelandic upper-case thorn |
þ |
þ | Icelandic lower-case thorn |
They should be present in body copy and headline copy for those languages that require them. What HTML doesn’t cater for is the use of the five main ligatures — fi, ffi, fl, ffl, ff within the special character codes. The fonts generally do have these ligatures present but it’s debatable whether they needed to be used on screen or not.
I tend to only use ligatures for on screen use if I’m creating logotypes, or graphical headers or elements that require them. In this instance all use of ligatures is fine. There are many people who disagree, stating that ligatures are a relic of by-gone age. I disagree. The use of ligatures in your typesetting, for print or on screen, shows a typographic maturity and an understanding of the craft.
The series
This is the third installment of this “Simple Steps…” series. Next up we have Typographic Hierarchy
I SO agree with your choice of Mrs Eaves to demonstrate ligatures — it has some real beauties in there, I love it.
This is one of the problems with using Flash image replacement — at least with images you can use ligatures.
This is turning into a wonderful little series, very well written with concise information and excellent examples.
Its really a treat to find this online. I only hope it continues beyond the five simple steps. Thank you.
Jon — I try to use other typefaces, I really do. Mrs Eaves just keeps rearing it’s beautiful head. One great thing about Mrs Eaves is the Ligature Maker available with the Ligature Pack. Great little app that converts all text in the clipboard to Mrs Eaves with ligatures. I don’t think it works in OS X though, a great shame.
I agree with you about Flash image replacement. Not only can it not handle ligatures but as pointed out in this tutorial the automatic kerning, of even very well cut typefaces such as Mrs Eaves, sometimes leave a lot to be desired. Give me images any day.
pass — Thanks! It may well continue beyond five steps to become a “slightly more complex steps to better typography”. There is a lot to cover!
Great series…it’s rekindled my love of the fundamentals. Know where I can get more?
FYI: There is a Mac version of Mrs Eaves ;)
Cheers
Mark,
I am curious to hear your experience with OpenType fonts: at least in InDesign, ligatures can be implemented automatically when that feature is switched on in the Type palette. Has that worked well for you in practice or are there so few complete OpenType fonts available that it’s still mostly hype?
Hi Mark (possibly BAFTA winner ???)
Great to see you last Friday, Aled finally reared his head at 11 with ‘the one’ and got a FREE desert grr?
Nice article on ligatures btw. Do you know if it’s all possible to make a ligature from the letters g and s?
James — I haven’t used OpenType fonts much. I’d be really interested to see the OpenType version of Mrs Eaves in Indesign. How do you specify which ligatures are used? Can you turn them on and off?
Graham — No, unfortunately no BAFTA this time although being nominated was nice, maybe next year eh?
Any idea on making a ligature from the letters g and s? or is this impossible?
In HTML there are also entities for the oe ligature:
?
?
œ
Œ
Oops, that showed up differently in the preview window.
That should be ampersand oelig; and ampersand OElig;
Graham — No, not that I know of. As there is no natural collision of the letterforms a ligature of ‘g’ and ‘s’ would be purely decorative. I suggest having a look at some fonts which include decorative ligatures or swashes to get some inspiration :-)
Jough — Thanks for that, you’re right. Updated!
Mark—
There are some explanations and screenshots (Is Adobe still on OS 9?) of the way it works near the bottom of this page:
I haven’t had the occasion to use them much for freelance projects (and I’m on Quark at work), but those features do work for the few OpenType fonts I own. And if their Pro fonts really include ligatures as well as non-English alphabets, the InDesign-OpenType combo starts to look pretty impressive.
this is what turned me onto ligatures in the first place. Mrs. Eaves is a real workhorse and I often find myself returning to it again and again. I’m especially a fan of the x-height. it’s hard to find another (recent) serif that can equal it’s elegance.
James — Thanks for that. I really should look into Indesign and specifically OpenType and it’s usage within the Indesign. Another thing to do…
chris — It is a beautiful typeface. But let’s not forget it’s not entirely original being a redrawn Baskerville. Hats off to John for designing it in the first place and for Zuzana Licko for updating the typeface. Innteresting typophile fact — Mrs ‘Sarah’ Eaves is the name of John Baskerville’s first wife.
Here’s a handy little Mac OSX app which will make you jump for joy!
http://www.macility.com/products/popcharx/
PopChar X — 2.2.1
PopChar is a utility application that lets you insert special characters, accented and foreign letters, etc., into your documents. No need to search for and remember keyboard combinations. Just pop up the PopChar window, click the desired character, and the character appears in your current document.
C’mon start jumping it’s fantabulous :)
Mark,
If you are using a browser which supports unicode the ff, fi, fl, ffi and ffl ligatures are available as ff fi fl ffi and ffl.
As shown here (if unicode works for you):
?, ?, ?, ?, ?
The st ligature you used at the top of this piece is also available as st ?.
Graham — looks good Graham, and as Apple (in their wisdom?!) have now buried keycaps I’ve been after a utility like this for a while. Cheers.
Matt — I knew there would be support somehow in html for these ligatures. But, either the browser or the font isn’t rendering these ligatures (am I right in saying that some fonts don’t even have these in their character sets?)
Mark -
Yes, one of the drawbacks of using unicode character codes is that not every font contains every character (actually, I doubt any one font contains every character). I know these ligatures work in Firefox for Windows, and they should work in any browser on Mac OSX (with the possible exception of Internet Explorer).
They seem to work fine in Firefox on the Mac. Thing is only some of the characters are rendering as true ligatures (fi and fl are drawn correctly, the others aren’t — you can see this by increasing the type size a lot). Like you say, this is probably because they aren’t specific characters in the the font.
The “flow’s fine beans” logotype illustrates your points beautifully.
The “ligatured” version is so elegant and graceful, and the contrast with the other version is striking.
Thanks for the seminar.
Wait a second, why shouldn’t Flash Image Replacement work with ligatures? Flash handles all text as Unicode, so I don’t see the difficulty here. Writing a function to swap letter pairs with the appropriate ligatures is easy enough.
Ligatures are one of my favorite things. It’s like a little secret that clients and normal people don’t know or care about, but I feel a smug joy when I use them — even for mundane uses like internal documents.
Mark: There’s nothing wrong with using a few fonts again and again! It’s all how you use it.
Special characters: Don’t forget the “Show Character Palette” in OS X, and the “Show Glyphs” palette in InDesign — both great ways to find & add just the right character.
James: The OpenType/InDesign combo is awesome. The biggest win for me is cross-platform consistency, a big problem before. That, and the awesome quality of typesetting in InDesign.
Mark (re: SIFR) I agree that image-set text is visually superior in most cases. However, the question for me is dynamically generating those “typeset text” images; even other dynamic text-image generating techs (e.g. ImageMagick) will have the same lack of human attention.
SIFR fills a void for when we need dynamic or constantly updatable typeset text in a browser (as well as being superior semantically). Hand-setting is great when we can get the time/budget, though!
Allan — You’ve got a point. Any amount of automating is putting kerning etc right into the hands of technology. If the kerning values are good, then no worries. But, as I’ve illustrated with this tutorial, even well cut fonts can have terrible kerning values. I for one wouldn’t trust automatic graphics production unless I knew the type was going to be rendered correctly.
I know nothing about typography and am very pleased to have run accross this series. Keep ‘em coming and I would like to see more complex type topics in the future.
About using some of the ligatures mentioned above on web pages:
It’s true that in XHTML you can put any Unicode character into your markup, so that “ff” represents an “ff” ligature. But it will display properly in the browser only if
(a) the browser understands XHTML
(b) the font you’ve told the browser to use exists on your user’s computer
© that font on your user’s computer happens to have that character. On Windows machines, the font with the most Unicode characters seems to be “MS Arial Unicode,” so if in your CSS style sheet you specify ‘font-family: “MS Arial Unicode”, Helvetica, Arial, sans-serif;’ you might get lucky. (That’s about the only font on most Windows machines that has the “registered service mark” character, for instance.) Lucida Sans Unicode, which many machines have, also has a wide range of characters. Luckily a lot of Mac fonts in OS X are similarly well-endowed.
On my current (Windows XP) machine, of the ff, fi, fl, ffi and ffl ligatures above, only ‘fi’ and ‘fl’ rendered properly; the others display as little boxes.
Let me congratulate you on this series — very well written and a good refresher — although I never knew or heard about hanging punctuation before (and I had formal training???).
Been taking a closer look at your site too (rather than quick skims when at work) It’s is really nicely designed — and the code is something to behold (you gotta love good code!)
Keep up the good work, will be back soon for parts 4 and 5 (and 6 and 7.…?)
[P. Lloyd:]Let me congratulate you on this series — very well written and a good refresher — although I never knew or heard about hanging punctuation before (and I had formal training???).
Yeah, I had formal training, too (as well as my own studies) — is this just a British thing? Barbarian Yanks…
Emery — Thanks for the info, it certainly clears a few things up in my mind.
Paul / Allan — I guess it comes down to what type of formal training you got. I did by under-grad degree in Typographic design, not graphic design. My lecturers in uni were both getting on for retirement and both had a background in book design.
Heyyy… you’ve been busy on your blog! Very cool stuff here, that appears to have sprung up overnight!
Yeah, my degree is just in Design (in general). Typography is a personal interest, but it certainly wasn’t my major focus of study.
XHTML has nothing to do with it, although some old browsers may have problems with hexadecimal character references. So instead of ff you could use the decimal notation: ff.
The other points in Emery Snyder’s comment are valid, though.
Love the articles. This is a depth in typography that I have not seen and find very refreshing. It would be cool if you defined all of these terms and had them availble as a seperate resource/book.
dru — Thanks. I’ve been thinking of getting this stuff together and offering it as a pdf or something initially. Sounds like a good idea… ;-)
Check out Font Support for Unicode Block ‘Alphabetic Presentation Forms’.
The OpenType support by most Adobe programs these days is wonderful! (i.e. Illustrator, Photoshop, InDesign)
To use them is as simple as turning on a switch in the character/type palette. For example, in the new Illustrator CS2, the Character palette is partnered with a little known palette named “OpenType.” There, you can change all the settings available for a given OpenType font including, but not limited to, ligatures, expanded ligatures, swashes, and small caps.
You can get yourself up to speed by checking out Adobe’s OpenType reference material.
By the way, thank you Mark for such a blessed ray of hope on the dreary landscape that is the web.
Remember that the ampersand (&) is a ligature of the letters in et, the latin word for and. If you use the logogram in HTML you should always use the character reference: &
This explains why some rather old-fashioned people, myself included, use “&c.” instead of “etc.” to denote et cetera.
In all other cases the ampersand shouldn’t be used in body text. It should be used in company names, however.
I?m wondering when we?ll read one of your type postings that is actually error-free.
You can use f-ligatures in HTML. You also don?t even need character entities; I?m sure you are familiar with Unicode.
Once again, ?, ?, and the like are not ligatures but digraphs, and eth, thorn, and estset are neither of those things. (Tell me: Which two characters are combined to make each of those? Do you think s+s=??)
There?s already an f-ligature test file available if you wish.