9 Things You Can Do Today to Improve Your Web Typography

The best design­ers know that 95% of good design — web or print — comes down to the typog­ra­phy. There’s a plethora of lit­er­a­ture and years of train­ing involved in mas­ter­ing 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 typog­ra­phy any bet­ter per se, par­tic­u­larly if the extra options lead you to choose poor fonts, but design­ers have been using the same few fonts over and over again for well over a decade. Using a web font ser­vice, such as Google’s free Web Fonts API or the com­mer­cial Type­kit, allows you to set your site apart from the mil­lions using Geor­gia and Ver­dana combinations.

2. Size Your Text with Ems

Siz­ing your text with ems over pix­els is more scalable and acces­si­ble in cer­tain browsers — and you can eas­ily re-scale all of your text by chang­ing the base­line 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 eas­ily think in pix­els while siz­ing in ems: just add a dec­i­mal. For exam­ple, at 62.5% body text size, 16 pix­els is eas­ily con­verted to 1.6 ems.

3. Read­able Body Text

There’s a rea­son most browsers set the default type at 16px, even though web design­ers have taken to using 14px body text. It’s the most read­able font size for the aver­age per­son for lengthy con­tent, such as an arti­cle. Don’t do your read­ers a dis­ser­vice just to fit in with the trend. Put read­abil­ity first.

4. Cre­ate Even Lines

Because there’s no way to con­trol it with CSS alone, web type is prone to an ugly, uneven rag (the uneven side of the text). But it’s eas­ier than one might think to cre­ate even, hyphen­ated lines — the kind you might expect to see in a book. Sim­ply use a tool like Hyphen­ator, a JavaScript that auto­mat­i­cally adds hyphen­ation to the end of your lines where nec­es­sary, and set your main con­tent area to a jus­ti­fied text align­ment using CSS.

5. Work to a Scale

Set a typo­graphic scale that deter­mines the sizes you have to work with. A scale keeps the hier­ar­chy and com­po­si­tion of the type intact. The most com­mon 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 Spe­cial Char­ac­ters Correctly

Don’t be lazy! Use smart quotes. Use the copy­right sym­bol instead of ©. Use em-dashes and en-dashes appro­pri­ately. This is an area of type­set­ting where lazi­ness infu­ri­ates typo­graphic design­ers and edi­to­r­ial pro­fes­sion­als alike.

7. Two Type­faces Per Design

While the best design­ers break this rule all the time, stick to two type­faces per design. You lose con­sis­tency if you start going wild and adding even more. When your career as a designer starts tak­ing off, don’t get too cocky and assume you can start work­ing with many type­faces. It takes those afore­men­tioned design­ers decades of expe­ri­ence to know when to use mul­ti­ple fonts and how to pull it off — and most of the time, they stick to this guide­line anyway.

8. Opti­mal Leading

Line height, or as typog­ra­phers call it, lead­ing, is essen­tial to read­able type. Too close together, and it’s too hard to dis­tin­guish between lines as you reach the end of one. Too far apart, and you get what’s referred to as “strip­ing” — gaps that are too big and have the same result of mak­ing it dif­fi­cult 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. Lead­ing should be adjusted for mea­sure — see below.

9. Mea­sure

The length of your line plays into the read­abil­ity of your text just as much as lead­ing does. Fur­ther, you need to adjust lead­ing based on your line length — or as typog­ra­phers call it, mea­sure. Experts say that your opti­mal mea­sure sits between 50 and 60 char­ac­ters per line. Some design­ers mul­ti­ply their type size by 30 to get the appro­pri­ate width of the con­tent box in pix­els — which puts our 16px type in a 480px box.

When using this equa­tion, the rule for lead­ing (1.2 times the size of your type) holds true. If you decide to go against this advice and use a wider con­tent box, you’ll need a higher line height. Con­versely, shorter boxes require shorter line heights.

Your Tips

There’s much to be said about typog­ra­phy. It’s one of the most expan­sive fields in design with the most research back­ing 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.

Joel Falconer is a freelance writer for DesignCrowd.com's Graphic Design Bidding service. You can use DesignCrowd's Crowdsourced Design service to access over 30,000 designers from around the world.

  1. Reply Jon June 3, 2011 at 3:49 PM

    Great article, thanks for sharing. What are your thoughts on sizing fonts with rem? See here: http://snook.ca/archives/html_and_css/font-size-with-rem

  2. Reply Steve-o June 3, 2011 at 3:56 PM

    Quality stuff dude.

  3. Reply Stan June 4, 2011 at 6:12 PM

    Quite the brilliant tips you got there. :)
    I never use ems, because I don’t know what they actually are, but with this I might actually be able to do the same tricks.


  4. Reply aditia June 5, 2011 at 11:41 AM

    thanks for the tips, really I never knew the em can be like that, I’m still using px in my font size

  5. Reply Matt June 7, 2011 at 5:25 PM

    Thanks for the review…I’ve got to go take some fonts out of a magazine layout I’ve been working on now! Great tips.

  6. Reply Fareed@thewebprograms June 7, 2011 at 8:14 PM

    Thats the right points you said, Fonts are important to a typography, we should use the Google fonts..

Leave a Reply