The study and practice of good typography has existed since the very beginning of the written word. Techniques have been developed, studied and honed for centuries by calligraphers, printers, type designers and graphic designers. There are libraries’ worth of books and articles on how type influences communication, perception, cognition and mood—and yet when the web came along, many designers experienced defeat. The first graphical web browsers emerged, and suddenly we couldn’t specify fonts at all—it was entirely up to user preference. And, when it improved during the 90’s, it was but a scant step forward.
Enter present day. Thankfully the font crisis of the 90s was a temporary condition. Many designers may not realize this, but recent technological progress means great typography isn’t only possible on the web, it’s actually reasonable to achieve. It requires an understanding of what we can and can’t control, but that same fluidity also offers the magic, so to speak: In other words, our designs can scale and change from one device and screen size to the next with the greatest of ease.
How is this possible? Let’s take a look at a few aspects of good typographic design and you’ll see that you know more about typography for the web than you realize.
“Oh, you can’t use real fonts on the web, so just use Arial …”
For many years this was largely true. But since the advent of the @font-face declaration in CSS, and the widespread adoption by both browsers and type vendors, nothing could now be farther from the truth. The landscape changed in 2009 with the launch of the first commercial web type service—Typekit—and was soon followed by Fontdeck, Fonts.com, Webtype and more recently even a service from Hoefler&Co.
The services are very easy to use and quite economical: often requiring only one or two lines of code to implement and affordable at around $100 per year—for an account that can serve fonts to many domains, limited only by the total number of page-views on those sites. Higher traffic sites can easily be supported: They simply have a higher monthly cost.
Many more vendors have also begun selling web-use licenses for fonts that can be self-hosted along with the rest of your website. Emigre, FontShop, MyFonts and many others offer reasonable rates to license fonts for use this way. All in all, there are now many thousands of fonts available for use on the web from virtually every major vendor. There’s even a free service from Google’s free service with a number of open source options—though you have to be careful with free options as they may not have complete character sets, or be as thoroughly “tuned” for best results in all browsers.
The Typecast web service lets you create type prototypes with fonts from many different services right in the browser—which is great for trying out different combinations and testing them on various devices, and even sharing them with your clients. With all of this so readily available, there is no excuse for defaulting to Arial anymore.
Not Just the Fonts, But Also the Figures
Having studied graphic design in the heyday of font format horrors, I began my life as a designer surrounded by TrueType, PostScript, suitcases, bitmaps and terrible failures when shelling out $60 on Iris prints for my final projects. Nothing beats a bit of Courier in the middle of your tabloid-sized color output the night before the final project was due. Never mind the nightmares you had about someone asking if they can open your project in Photoshop on Windows.
So the proliferation of the OpenType format in the early 2000’s was a welcome development for all: finally a single font file format for Mac, Windows, and Unix systems. That format also supports many features for fine typography such as alternate characters, ligatures, kerning and full Unicode support of over 65,000 glyphs in a single font file.
Since then, we’ve grown accustomed to having those features available in the character palettes of our favorite layout programs. At the same time, though, we’ve thrown up our hands in the face of no support, bad letter-spacing and limited technology. But now we have WOFF! The Web Open Font Format is now supported in over 86% of all devices accessing the web (stats from caniuse.com) and brings with it support for most of those very same features found in OpenType. WOFF requires that OpenType features be enabled in those particular fonts, but if they are, all it takes is a single line of CSS to enable them.
Better kerning, ligatures of all stripes, oldstyle instead of lining figures, true fractions and alternate character sets are all possible without adding a single extra bit of HTML. While still less commonly supported, some services (most notably the one from Hoefler&Co) are doing a fantastic job of including them without undue penalty to the user in the form of larger font downloads slowing the loading of the web pages.
Good Typographic Design: On Rhythm, Margin & Measure
The language of style on the web is called CSS, or Cascading Style Sheets. That language actually has a tremendous amount of support in it for typographic control. It’s just that when all you could do was set Arial better (for the 10,000th time), many designers simply didn’t have the will to try.
But we’ve all internalized concepts like leading, tracking, word-spacing, margins, line-length: in short, many of the details that go into laying out paragraphs of copy in readable and aesthetically pleasing ways. Well, it just so happens that CSS has supported many of those concepts for years: line-height (as a multiple of the type size itself), letter-spacing and word-spacing (in positive or negative amounts), and margins above, below and beside. Better measure can even be achieved by using the max-length attribute on paragraph or heading elements, allowing for flexible layout “cake” while consuming your maximum readable line length, too.
Speaking of Flexible Layouts
You’d never think to use the same proportion of headings to body copy on a poster versus an annual report. So why wouldn’t that be true when designing for a phone versus a 27″ desktop screen? Thankfully, the very same CSS that lets us adjust layout based upon window size lets us adjust type size as well. Remember: when the screen size shrinks, that means fewer distractions along with that smaller physical space. This requires a more subtle hand to balance readability, usability and visual hierarchy. It takes a little more effort, but not as much as you m
ight think.
The smaller the screen, the more subtle the scale between headers and body copy. Not only will this feel more in proportion, but you’ll end up with better line lengths for your headers with fewer instances of one-word-per-line – and overall more content on the screen at any give time. It’s sometimes a bit scary to realize that you’ll never know how long a line length will be when the screen keep scaling, but by focusing on systems of proportion and not specific points and measures we can create more enduring designs that will hold up well across the widest ranges of devices.
Tried and True Typography Tricks
But what about more of our “usual bag of tricks” when it comes to classic typographic design? Well, how about initial caps? That’s actually quite easy to do, and compatible with almost every browser without adding any extra HTML. Big, bold stylized pull-quotes? Sure. Use the CSS pseudo-selector :before and :after to add the quotation marks and style them as big and bold as you like. Paragraph styles you ask? You have a few great options for styling beyond the first letter. Add padding before it to get a nice first-line indent rather than adding padding above or below to set off the paragraph.
Want a big introduction to your content by styling the whole first paragraph a bit bigger and bolder? The pseudo-selector :first-of-type or :first-child gets you there. Rather hit just the first line? Then :first-line is your friend. All are well-supported by virtually all web browsers, and since they’re done with CSS, you can adjust how they work across a variety of screen sizes just like the rest of your design.
The Last Word Needn’t Be All On Its Lonesome.
Orphans. Every editor and designer’s nightmare when they get that annual report back from the printer: that one paragraph on that one page with that one word all by itself on the last line. It’s something we all strive to avoid in any print project. We track, we space, we tweak, we turn a different phrase: all in the name of tidy breaks from one paragraph to the next that avoids the awkward spacing of that single word on the last line forming the tortured negative space with the first line inset of the next paragraph.
But when it comes to the web, we’ve been completely stuck. With the rise of Content Management Systems, the content changes nearly daily, so there’s just no way we can keep up. And the miracle of Responsive Web Design brings infinitely scaling designs and line lengths. Enter the never-ending supply of orphans. Or is it?
If your website is built in Drupal, WordPress or Expression Engine, there’s a module that will banish orphans in the blink of an eye. They automatically replace the space between the last two words of any paragraph with a non-breaking space, so you’ll always have at least two words on the last line. Very simple, and very effective. Even if your site doesn’t use one of those platforms, there’s still a very effective solution in the form of Nathan Ford’s Widowtamer project. Aside from highlighting the differing definitions of widows and orphans, Widowtamer is a simple JavaScript plugin that allows you to define a minimum length of text you’d like on the last line of any text element on the page. And because it’s JavaScript, it’s pretty easy to add to almost any site, not matter what underlying technology is used.
More Than You Thought and Less Than It Seems
From typeface choices to OpenType features, many of the favorites we use every day are available for use on the web with advanced features like fractions, ligatures and kerning supported better than ever before. With yet a little more study and care, even more of our everyday techniques can be brought to bear in our struggle against typographic mediocrity on the web.
While we need to let go of a bit of control when it comes to being absolutely exact, if you embrace the fluidity of the web and combine it with the techniques here, you can create some beautiful, robust and reliable results. There’s no excuse for just throwing up our hands; we know how to use type—let’s take it to the web!