9 Things You Can Do Today to Improve Your Web Typography
The best designers know that 95% of good design — web or print — comes down to the typography. There’s a plethora of literature and years of training involved in mastering type, but there are also a bunch of tweaks you can make today to improve your web type. Let’s find out what they are.
1. Use a Web Font Service
This may not make your typography any better per se, particularly if the extra options lead you to choose poor fonts, but designers have been using the same few fonts over and over again for well over a decade. Using a web font service, such as Google’s free Web Fonts API or the commercial Typekit, allows you to set your site apart from the millions using Georgia and Verdana combinations.
2. Size Your Text with Ems
Sizing your text with ems over pixels is more scalable and accessible in certain browsers — and you can easily re-scale all of your text by changing the baseline body text size.
The first thing you’ll want to do is set the body text size to 62.5%. This brings the default text down from 16px to 10px. You’re not going to want to use 10px in your body text, but this means that you can easily think in pixels while sizing in ems: just add a decimal. For example, at 62.5% body text size, 16 pixels is easily converted to 1.6 ems.
3. Readable Body Text
There’s a reason most browsers set the default type at 16px, even though web designers have taken to using 14px body text. It’s the most readable font size for the average person for lengthy content, such as an article. Don’t do your readers a disservice just to fit in with the trend. Put readability first.
4. Create Even Lines
Because there’s no way to control it with CSS alone, web type is prone to an ugly, uneven rag (the uneven side of the text). But it’s easier than one might think to create even, hyphenated lines — the kind you might expect to see in a book. Simply use a tool like Hyphenator, a JavaScript that automatically adds hyphenation to the end of your lines where necessary, and set your main content area to a justified text alignment using CSS.
5. Work to a Scale
Set a typographic scale that determines the sizes you have to work with. A scale keeps the hierarchy and composition of the type intact. The most common scale used in web design uses points at 14px, 16px, 18px, 21px, 24px, 36px, and 48px. Note that the gaps get larger as the sizes increase.
6. Use Special Characters Correctly
Don’t be lazy! Use smart quotes. Use the copyright symbol instead of ©. Use em-dashes and en-dashes appropriately. This is an area of typesetting where laziness infuriates typographic designers and editorial professionals alike.
7. Two Typefaces Per Design
While the best designers break this rule all the time, stick to two typefaces per design. You lose consistency if you start going wild and adding even more. When your career as a designer starts taking off, don’t get too cocky and assume you can start working with many typefaces. It takes those aforementioned designers decades of experience to know when to use multiple fonts and how to pull it off — and most of the time, they stick to this guideline anyway.
8. Optimal Leading
Line height, or as typographers call it, leading, is essential to readable type. Too close together, and it’s too hard to distinguish between lines as you reach the end of one. Too far apart, and you get what’s referred to as “striping” — gaps that are too big and have the same result of making it difficult to pick up on the next line. A good rule of thumb is that your line height should be 1.2 times the size of your type — 16px type should have a line height of around 19.2. Leading should be adjusted for measure — see below.
9. Measure
The length of your line plays into the readability of your text just as much as leading does. Further, you need to adjust leading based on your line length — or as typographers call it, measure. Experts say that your optimal measure sits between 50 and 60 characters per line. Some designers multiply their type size by 30 to get the appropriate width of the content box in pixels — which puts our 16px type in a 480px box.
When using this equation, the rule for leading (1.2 times the size of your type) holds true. If you decide to go against this advice and use a wider content box, you’ll need a higher line height. Conversely, shorter boxes require shorter line heights.
Your Tips
There’s much to be said about typography. It’s one of the most expansive fields in design with the most research backing it. If you’ve got a quick tip of your own, share it in the comments!
Need design work?
Find logotype design maker jobs or clients seeking a website typography design.
