Time to level up
Following on from Mastering Web Typography Pt. 1, I’m now going to show you a few extra typographical recommendations that will add finesse to text and really make your content sing.
Optimal Line Height Using the Golden Ratio
This is a method you can use to work out perfect line heights for your web text. Now thankfully, a very clever guy called Chris Pearson has done some extensive research and built a nice little tool that does all the hard work for us. The tool has a number of inputs; font size, content width or optionally characters per line (referred to as CPL from here).
Given a few values it will calculate a perfect line-height based on the golden ratio. Here’s a few examples…
Interestingly even though they have the same font size, you’ll see that fig 4. has a different line-height to fig 1. This is because the tool also takes into account line length.
The increase in line-height is based on the fact that in order for a reader to quickly navigate from the end of one line to the start of another, a longer line of text needs a greater line-height. Inversely, short lines of text can make do with a smaller line-height.
This principle is useful for responsive layouts - with the aid of media queries, you can set different line height based on device width.
Vertical Rhythm
Vertical rhythm is all about baseline alignment; setting a base line-height and sticking to it. It’s a common practice in printed media because it produces a pleasant reading experience that flows smoothly between material in a consistent and predictable manner.
The vertical rhythm principle can be applied to web type but it is a fairly tricky thing to get right and can take an inordinate amount of time to achieve perfectly. It’s also difficult to maintain on long running projects that have numerous developers. Things get even trickier when embedded content are thrown into the mix e.g. images, videos etc.
Given the right kind of project though, pulling it off definitely fills you with a warm fuzzy feeling (otherwise known as smugness).
OpenType features
You might be familiar with open type features if you’ve used the Photoshop character pallet before, it’s the extra sauce that typographers add to their fonts, giving them extra usability in a diverse range of scenarios. The following list covers the majority of the OpenType features…
- Kerning
- Standard ligatures
- Discretionary ligatures
- Contextual alternates
- Stylistic alternates
- Swashes
- Ordinals
- Lining numerals
- Drop caps
- Fractions
Modern web browsers are allowing us to take full advantage of these features in ways that only print designers were previously able. I won’t go into huge detail about all the features because there’s just too much ground to cover in this article. But as a little teaser I’ll show you one…
Standard Ligatures
Probably the easiest OpenType feature to implement and one that requires next to no micro configuration is standard ligatures. If you unsure of what ligatures are, I’ll try my best to summarize:
Where two or more characters of a certain type sit together uncomfortably, type designers have created the ligature; a ligature is a combination of letters conjoined in a fluid way to create a single glyph.
To the untrained eye, they’re fairly unnoticeable, but their purpose is simple - to make the reading experience as fluid as possible. The replacement of jarring or slightly uncomfortable letter combinations can have a very subtle effect on a reader. Removing these distractions make for a less disruptive reading experience, thus reducing brain fatigue.
As you can see, Myriad pro looks pretty good without the ligatures, it’s been designed in a way the minimises awkward junctures between letters. If we look at the Caslon ligatures though, we definitely do see a benefit to the word aesthetic. What we can see is that ligatures aren’t a one size fits all approach to typography, but they are worth consideration. Given the right setting, they can be really beneficial to a good reading experience.
Closing Thoughts
Most of what I’ve explained here is focused on creating a more enjoyable reading experience on the web. Being able to create submersive content that can be consumed effortlessly is one of the greatest tools we have at our disposal.
To quote an infamous article from ia.net 2006:
Choosing a typeface is not typography
Great typography can bring hierarchy and structure to a document. The clever use of italics and alternate font weights can be used to make text more easily digestible, highlighting points of intrigue and casting new light on a subject. With the addition of OpenType features, we can aid readability and add another layer of interest to our content.
Today, too many sites I visit seem to have overlooked typography as a primary tool in effective communication, OK they might have chosen a nice font, the design might be good. But beyond that, no real finesse has been added, all I see is soulless words on a page with little-to-no character.
What I’d like to see more of is intelligent design paired with simple typographic techniques, meticulous in execution. Content you want to spend more time reading. Sites you re-visit time and again.
All I can recommend is that the next time you design or build a website, spare a thought for the person that’s going to read it.
Resources
- http://www.pearsonified.com/typography/
- http://www.pearsonified.com/2011/12/golden-ratio-typography
- http://24ways.org/2006/compose-to-a-vertical-rhythm/
- http://coding.smashingmagazine.com/2012/12/17/css-baseline-the-good-the-bad-and-the-ugly/
- http://ia.net/blog/the-web-is-all-about-typography-period/
- http://www.fonts.com/content/learning/fontology