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.

6 Comments
  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.

    Cheers!

  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