Better Web Typography for a Better Web

Don’t simply follow what is drawn by a designer—an approximation of what the website should look like, made with a tool meant for graphic design work. Understand why it’s done so. Correct your designer when it doesn’t make sense. Work on web typography. Work on typographic details with your designer. Work together. It’s your job to produce a typographic style that works—as a team.

don’t really believe in the mobile first/desktop first mantra. We’ve come to a point when that shouldn’t even be a consideration any more. I think we should start creating websites by firstly looking at what the main purpose of a website is. Not just the particular website we’re working on. The real, fundamental purpose. I’m talking about content. Think about it, what is a website without content? It’s an empty shell. What is a website with poor content that looks beautiful? It’s like a good-looking person without character. What about the other way around—a website with great content that looks poor? It’s like an interesting person with a great character that nobody notices because of their “not up to standard” looks.

I don’t really believe in the mobile first/desktop first mantra. We’ve come to a point when that shouldn’t even be a consideration any more. I think we should start creating websites by firstly looking at what the main purpose of a website is. Not just the particular website we’re working on. The real, fundamental purpose. I’m talking about content. Think about it, what is a website without content? It’s an empty shell. What is a website with poor content that looks beautiful? It’s like a good-looking person without character. What about the other way around—a website with great content that looks poor? It’s like an interesting person with a great character that nobody notices because of their “not up to standard” looks. Content is what will define the website. Most of the time, the content won’t be up to you (unless you’re working on your own personal website). There’s not much you can do about that and that’s all right. But when it comes to choosing typefaces, your choice, in the end, should be based on the content. In the age when there’s so much content online, it’s hard to stand out. But if we present it in an appropriate way, it has a much better chance. Therefore, we’ll start creating our example website with the content-first approach.

Find out what the website is about instead. What type of content will be published? News? Blog posts? Poems? Essays? Get some content samples. This is important. How will your typeface choice complement the content and the information on the website if you don’t read it? At this point you probably thinking: “read it??” Yes, read it. “But I don’t have time, I have pages to design and lines of code to write. I have deadlines to hit.” Excuses. You’ll never get better in choosing typefaces if you ignore the content. What is the author trying to convey? Don’t design without content. Don’t use dummy text. At worst, use similar content—find something online, maybe even a competitor’s website, and use that.

FOIT To avoid the FOUT, some people resorted to hiding the text until the font had loaded—FOIT13 (flash of invisible text). I used to do this too (in fact, the first Better Web Type website did that), but there’s a serious problem with that. Let’s say that the font that you want to use doesn’t load for some reason. Your website is waiting for it to load and has hidden the text in its anticipation. The font doesn’t ever load and the text stays invisible. That sucks. OK, some people came up with a solution for that too. They set a timer on waiting for the font and showed the web-safe font after x seconds. That’s just a nasty solution. So much work goes into something that the majority of internet users pay no attention to. So much work to counter the browser’s default behaviour. My suggestion is, just let it be. Stick with the FOUT, but make sure you use a serif font as a fallback when you use a serif web font and a sans-serif fallback otherwise.

Don’t look at typefaces in Photoshop, Sketch or some other graphic design tool. Your content will not appear there (Photoshop is notorious for its strange font rendering). It will be displayed as part of a website in a web browser. Multiple web browsers, actually. Try your main typeface in different sizes, colours and different browsers. Each has a different way of rendering fonts (Firefox is known to render all fonts a bit heavier than others, so do Macs compared to Windows PCs). Try it on different OS systems as well. Don’t just design a fancy-looking visual design of a website on your MacBook Retina and make decisions based on that. Try out what it looks like on Windows and on other screens.

Helpful tools Here are a few tools that will help you with choosing fonts. Font Face Ninja20 You learned a lot about typefaces already and you’ll probably start noticing some of these things when you browse the web. At this time, I’d like to recommend a tool that will help you get better at recognising typefaces. It’s called Font Face Ninja and it’s a browser plugin. It works with Chrome, Safari and Firefox. Install it, have it in your toolbar and start it up whenever you notice a website with an interesting typeface and cool typography. Web Font Specimen21 Web Font Specimen is a handy resource web designers and web developers can use to see how typefaces will look on the web. I recommend using it in this step to preview how the typeface that you’re considering using will render on the web (and not in Photoshop!).

sizes in kilobytes, OpenType features. Using web font providers and using proper web fonts is recommended over manually importing

Using web font providers and using proper web fonts is recommended over manually importing fonts (which are possibly intended for print).

The language consideration Something we often forget is that not everything out there is written in English. I worked in Luxembourg a few years ago. It’s a small country where three languages are spoken: French, Luxembourgish and German. The company I worked for had German origins so most of the content was in German. Something I noticed, while working with texts in German, was the vastly different amount of white space on the right of paragraphs when the text was aligned to the left. Germans are known to simply join words together to form new ones—producing lots of long words in the process. So I decided to do some research and found that the average German word length is 11.66 characters. Compare that to the average English word length of 8 characters.23 That’s a difference of three and a half characters per word! Assuming we fit 10 words on a line, that could mean a difference of 35 characters. Web browsers don’t fully support word hyphenation yet so all those long words get pushed onto a new line. That’s what’s causing more white space on the right: the paragraph is very ragged on the right. To counter that, I recommend longer lines of text so more words can fit. Try to stay in the recommended range of 45—75 characters when working with languages like that, but lean more towards the 75.

you do believe that a second typeface is needed in your design, and if you’re OK with spending some time exploring the universe of typefaces instead of drawing and coding websites, then here’s a four-step process that will help you get better at it. It’s very much based on Tim Brown’s short book called Combining Typefaces, which you can get for free and you should definitely read.26 Find an anchor typeface

If you do believe that a second typeface is needed in your design, and if you’re OK with spending some time exploring the universe of typefaces instead of drawing and coding websites, then here’s a four-step process that will help you get better at it. It’s very much based on Tim Brown’s short book called Combining Typefaces, which you can get for free and you should definitely read.26

Fixing the bad kerning. Most web browsers default kerning to auto. This means that the kerning will be enabled for larger type and disabled for smaller. Bad kerning is not as obvious on small type. If you wish, you can control it like this: font-kerning: auto; // default font-kerning: normal; // enables kerning font-kerning: none; // disables kerning That’s about it when it comes to what we can do with the default browser support right now.

Just like any medium that preceded it, the web started out with poor typography. Typography that needed to improve in order for the medium itself to improve. Typography that was imitating, and repeating, all the mistakes that printed matter as a medium made instead of learning from them. The most popular layout for a “content-focused” website these days is the centred single-column layout. We’re doing the exact same thing that Tschichold challenged. We’re taking a canvas and letting it define our content. The canvas forces the content into symmetrical alignment because that’s the most obvious thing to do when starting with canvas. Therefore we’re left with equally distributed white space around our content, which can be conveniently filled up with advertisement or worse—ornaments. In order to make our website unique and alive, we need to start with the content and let it shape the design through its natural form.

mobile-first. At some point, people stopped doing mobile-first and switched to mobile-only. There was a time when even desktop websites had hamburger icons to stash all their navigation items inside. That’s a complete nonsense from a usability point of view.

Note: we changed the base font size for the mobile so it’s 16 pixels but we’re keeping the 18 pixels size for the desktop. We don’t need to do anything to keep our modular scale intact because we’re resetting the base font size by changing it for the html element. This way, no matter the base font-size, the heading one on desktop for example, will always be 3.375 × base font size (no matter what size that is). If we didn’t change the base font size, we would have to use the default (100%) font size on mobile but the new (112.5%) on desktop as a base for calculating the modular scale. This further complicates things so it’s much easier to just reset the body font size.

Note that if you set letter spacing to your text it will not feature any ligatures. The browsers will strip them away.

Enabling small caps If your font supports small caps as an OpenType feature you can enable them by using the following CSS: .class { // Change lowercase to small caps, leave capital letters unchanged font-variant-caps: small-caps; font-feature-settings: "smcp"; // Change all letters into small caps (including capital letters) font-variant-caps: all-small-caps; font-feature-settings: "c2sc", "smcp"; } If it doesn’t and you need to use a separate font for that, you need to load that font separately through font-face. If you can’t find either way to use real small caps, don’t use

Enabling small caps If your font supports small caps as an OpenType feature you can enable them by using the following CSS: .class { // Change lowercase to small caps, leave capital letters unchanged font-variant-caps: small-caps; font-feature-settings: "smcp"; // Change all letters into small caps (including capital letters) font-variant-caps: all-small-caps; font-feature-settings: "c2sc", "smcp"; } If it doesn’t and you need to use a separate font for that, you need to load that font separately through font-face. If you can’t find either way to use real small caps, don’t use them at all. Use regular capital letters instead. Just don’t use fake small caps.

Symbol Name HTML code − Minus − – En dash – — Em dash — … Ellipsis … ÷ Division ÷ × Dimension × Hair space   Thin space   Non-breaking space   ’ Apostrophe ’ Let’s make sure our punctuation is correct