A Basic Look at Typography in Web Design

Apr 7 2010 by Shannon Noack | 50 Comments

A Basic Look at Typography in Web Design

Typography is an integral part of design. Think of all the different uses of typography on the web, from large headlines and bold blocks of text to smaller-sized text in body copy, and you’ll soon realize that not only is it a crucial part of a web design, but that it’s a pure combination of art and science.

We’ve come a long way since the start of the internet, but the use of typography is as important today as it was back in the day.

Typography Basics

Typography Basics

Typography is the use of type in a design. Typography seeks to create a greater meaning by thoughtful and deliberate selection font, size, color, layout, alignment, and other factors that affect the design of type on a page.

There are two major classifications of fonts to choose from: serif and sans serif fonts.

Serif fonts have serifs or extra embellishments at the end of stokes; some call them feet or tails.

Typography Basics

Sans serif fonts are without serifs; no extra details are found on the end of each letter.

Typography Basics

Things to Consider for Typography on the Web

There are many differences in handling type in print versus on the web. Things to think about with text on the web are contrast, color, readability, and size.

Colors on a monitor screen are created by light, and it becomes more important to think about contrast because it’s straining to look at and read text with poor contrast. Black text on a white background is the easiest to read because it provides the most contrast. Color theory and color choice play an important role in web typography.

Sans serif fonts have been proven to be more easily read online in body copy because serifs make it tougher for the eye to follow, while the opposite is true for printed text.

Although at an increased size and with more leading—the amount of additional vertical space between lines of type—sans serif fonts can still work fine in body text on the web. Serifs work great in headlines and headings because they give a special accent to a headline and because serif fonts are easy to read when dealing with smaller quantities of text.

Size is an important factor to consider when choosing your font styles. Text that is too small is hard to read, but text that is too big takes up too much space. Find a size that works well with your design and is easy to read.

Taking Control of Fonts

There are many settings that control the way your font appears on a web page. Font size, as mentioned previously, is certainly important. The three most popular units of measurements are: em, percentage (%), and pixels (px).

Declaring font sizes in CSS is simple, here’s an example of paragraph elements being assigned a unit of 1em.

p {
 font-size: 1em;
}

Em is a widely used form of typographic measurement for web designs because it scales well and can give you finer increments of size (i.e. 1.35em).

Pixels are measured relative to the screen resolution and give you a bit less control as you can only use whole numbers (i.e. 2px).

Many people like using percentages for font sizes because they give the user control of font sizes. The size is determined by their browser’s font size settings.

Kerning and leading can also be controlled with your CSS. Kerning is the space between characters and can be controlled with the letter-spacing property. Leading can be controlled using the CSS property, line-height. Both are great ways to control the look of your text.

Other possible and less popular units of measurements are:

  • points (pt)
  • pica (pc)
  • inches (in)
  • centimeters (cm)
  • millimeters (mm)
  • x space (ex)

Using pt is great for print stylesheets because they are a print unit of measurement. Points shouldn’t be used in your web pages because there are big differences between browsers when using points; Mac OS computers tend to show text 25% smaller than PC computers.

Web Safe Fonts

Web Safe Fonts

What is a web safe or web standard font? These fonts make up a group of a select few fonts that are available on most computers. This is what currently limits font choices on the web under CSS2 specifications.

Choosing from the web safe fonts available will ensure better control over what your text looks like on all browsers and operating systems. The consensus for the most popular fonts are:

  • Arial (Mac OS equivalent is Helvetica)
  • Times New Roman (Mac OS equivalent is Times)
  • Verdana
  • Georgia
  • Courier

Other popular fonts:

  • Impact
  • Lucida Console (Mac OS equivalent is Monaco)
  • Lucida Sans (Mac OS equivalent is Lucida Grande)
  • Palatino
  • Tahoma (Mac OS equivalent is Geneva)
  • Comic Sans
  • Trebuchet MS

When using any of these fonts—especially the ones from the second list—it’s a great idea to include a few options to fall back on in your CSS, as explained in the following section.

Setting Your Fonts

There are a few methods to choose from to display fonts on your websites. If you’re using a web safe font, you can declare it via CSS, such as in the following example:

font-family: Helvetica, Arial, sans-serif; 

It’s important to include several fonts just in case someone doesn’t have your first option. This gives your user’s browser something to fall back on. This list of fonts is called a font stack.

Redefining "web safe fonts" with CSS3

Current CSS3 specs allow you to choose from any licensed OpenType or TrueType font at your disposal. You can do this by using @font-face, as shown in the following example:

@font-face {
  font-family: "Journal; src: url(journal.ttf) format("truetype"); 
}
h1 {
  font-family: "Journal", sans-serif;
}

Font replacement tools

There are several font replacement methods at your disposal if you are still unsure about using @font-face in your designs.

Cufon

Cufon is a favorite font replacement tool to use because it’s relatively painless to integrate into a website. Plenty of documentation is available on their website, as well as the text generator that spits out code you’ll need. Although it’s a good, solid solution, it’s not without it’s downsides—currently text rendered by Cufon is not selectable by users.

Cufon

sIFR

sIFR is a Flash-based text replacement method and is just as nice as Cufon. You’ll need Flash to create a font file for your site. It’s best used on headlines or very small blocks of text because the load time can drag on a bit if you use it extensively on a web page. The downside is that it doesn’t work without Flash enabled in your browser, but the upside of sIFR versus Cufon is that text is selectable.

sIFR

Web Typography Mistakes

Web Typography Mistakes

Lack of typography consistency is one the biggest mistakes new web designers make. Font properties are best controlled globally, and it’s good practice to set the font family, size, color, line height and weight for the body element of all your pages through CSS, such as in the following example:

body { font: 1em/1.3em Helvetica, Arial, sans-serif; color: #000; } 

You should set heading styles globally as well for h1, h2, and h3. Link styles should also be set globally.

Choosing fonts that are too similar is not a good choice, and should be avoided by carefully looking at the style of fonts and the design of the site to choose something that is appropriate. Most serif headings pair well with sans serif fonts for body text. Pairing two sans serif fonts is a bit trickier but is certainly a viable option.

Some Examples of Great Typography in Websites

In this section, you’ll find an array of websites that display effective typography usage.

Analog

The typography choices made here match the theme of the site very well. Type plays a big role in the look of this site, using color, size, font, spacing, and layout to enhance the overall look of the page.

Analog

Blue Pixel

Blue Pixel uses Cufon to create bold headlines. The body font and the headline font are both san serif and go together well.

Blue Pixel

Festival Boreal

Cufon is also used here to add a unique look to the site through typography. Color, different sizes, and a fun asymmetrical layout create a great typographical design.

Festival Boreal

Go Media Inc

A mixture of a few different font themes creates a great web design here. The navigation is clean-cut with thin, uppercase type that is nicely paired with an italic serif font for taglines and headings on pages.

Go Media Inc

Kari Jobe

Courier—a serif font—is paired with a few sans serif fonts in this design. The fonts work together with the design to create a look that brings together an old-world style with a new bright and modern feel.

Kari Jobe

SimpleBits

This site has lots of type and is organized well with set styles that create a user-friendly site. Bold uppercase type in the upper navigation work well with the sans serif body text and red serif headlines.

SimpleBits

We Are VI

This blog has several font styles at work and uses typography to their advantage by keeping the site organized and easy to navigate.

We Are VI

Information Highwayman

Typography is used in the background as a design element, creating a great backdrop that doesn’t distract from the body text. The rest of the text complements the style, with good-sized easy to read body text using a serif font.

Information Highwayman

Check out this showcase of 20 websites with beautiful typography for more design inspiration and examples.

Additional Resources on Web Typography

I hope you enjoyed this look at typography in web design. Typography is a broad topic but an important concept to understand as a designer of any kind.

How heavily does typography play into the aesthetics of a web design? How much time should you spend on typography when designing a site?

Related Content

About the Author

Shannon Noack is a designer in Arizona and the Creative Director of Snoack Studios. Designing is her passion in life and she loves to create websites, logos, print work, you name it. She also blogs regularly here and you can connect with her on Twitter as well.

50 Comments

Rachel

April 7th, 2010

Great article! Good timing for me, as typography on the web is particularly important at the moment in the sites I’m building.

Maidstone

April 7th, 2010

Great overview and some nice examples

piyanistll

April 7th, 2010

thanks very good post

Tom

April 7th, 2010

Why, oh why, did you recommend Comic Sans? That font is the scourge of typography the world over.

Bertrand

April 7th, 2010

Thanks for the sum up. I’ll pass this info to my students.

By the way, I think you could have given a little bit more info about CSS3 and the @font-face since, I think, it’ll become THE great new developpement in CSS. At last, we’ll be able to use other fonts than the web-safe ones. Font Squirrel is a great website to get some free fonts! Check it out :

http://www.fontsquirrel.com/fontface

Cheers from Quebec City, Canada

Firerox

April 7th, 2010

Thank you Shannon, very good article.

Zach Walsh

April 7th, 2010

For those just getting comfortable with CSS and typography, this is a great article to read through. I especially like the concentration on font consistency. So often that is ignored. Great article and great examples!

Phil Gons

April 7th, 2010

What are your thoughts on Typekit (or Typeface.js)? I started using Typekit recently and like it. It’s biggest problem is that many of the fonts look rough on Windows (with the exception of IE9).

Daryl

April 7th, 2010

I just wanted to tell you how much I enjoyed your article. I enjoy your website. I’m currently 21, a college student, and quickly looking to develop myself on the web. I currently work at my university as the web design and developer and personally I’m developing my own website. I’m impressed with this information so far and hope to see more resources in the future.

I just want to add another point of reference for typography is http://www.pilo.me – it is a quite remarkable typography forum where you can find free and exclusive typefaces. It is usually invite only, so if memberships are open, join while you can and be sure to contribute as the rules are a bit strict.

Eric Gage

April 7th, 2010

“Pixels are measured relative to the screen resolution and give you a bit less control as you can only use whole numbers (i.e. 2px).”

2px? Have you ever seen anyone set type to two pixels? I liked the article, but why on earth would you mention 2px as the example?

ako

April 7th, 2010

hey this blog is great. I’m glad I came by this blog.I want to thank the blogger very much not only for this post but also for his all previous efforts.Thanks once again

Auré

April 7th, 2010

Good overview, good article and great examples :)
I’m a huge fan of Information Highwayman, it’s a really creative design, fresh and powerful.

David J.

April 7th, 2010

Good introduction to the basics of web typography! I like that it focuses on putting things in perspective and giving practical tips that someone can use today. (E.g., “don’t use pts for font sizes, they display differently according to screen resolution”.)

A couple of notes:

- “Kerning is the space between characters and can be controlled with the letter-spacing property.”

This is true, but not exactly true. Tracking is the spacing between all characters. Kerning is more specific. It involves leaving less space where fonts allow between specific letters. For example, between uppercase W and uppercase A. Most web browsers don’t handle kerning very well. (Or ligatures like fi or fj.)

- “The consensus for the most popular fonts are [...]”

That’s true, but you should explain why this is the “consensus”. Actually, it’s not so much a consensus as that these fonts are part of Microsoft’s “Core Fonts for the Web” project.

http://en.wikipedia.org/wiki/Core_fonts_for_the_Web

Hopefully this will all change soon, and we can start embedding fonts in our webpages without legal worries.

- “Arial (Mac OS equivalent is Helvetica)”

Just a warning, a lot of typography gurus are going to shudder at this. Arial is a cheap knockoff of Helvetica that Microsoft chose to save money.

http://www.ms-studio.com/articles.html

Just my two cents’. Overall, I think the article is a good one. The examples are good, and the explanations straight to the point. Well done!

krike

April 7th, 2010

thank you for this article. Typography is the only part of design I have the most trouble with. But I’m trying to experiment as much as I can and I’m improving, slowly but that’s beter then nothing :D

Brad

April 7th, 2010

Great information!

Eze

April 7th, 2010

Correction: Kerning is basically adjustments of space between the pair of letters

Shannon Noack

April 7th, 2010

Thanks for all the good feedback everyone! I’m glad you found the article helpful and timely.

@Tom – haha I know Comic Sans is not loved by designers anywhere, myself included. But if it’s available, and on the list of web safe fonts, it should be mentioned in the article, regardless of how tasteless it may be!

@Phil Gons – I haven’t used typeface.js but it looks great, similar to the other font replacements mentioned here. Thanks for the heads up!

@Eric Gage – I have actually never used pixels for font measurement so I really didn’t think about it when I picked a number for that. But I realize it was a bit silly.

@David J. – Good points, thank you for elaborating on the article. And I agree on your description of Arial and Helvetica, they aren’t the same or equal in any way, your description was a bit more eloquent than mine!

Thanks for all that mentioned new typography resources, keep those coming!

D Bnonn Tennant

April 7th, 2010

This is a good introduction to web typography; nice job. And of course, thanks for the mention too. For those starting out in web design, I really can’t emphasize enough the importance of typography—if you want to be a good web designer, you have to be a good typographer. Typography is information design for text; and there are very few websites that aren’t almost exclusively devoted to displaying textual information. I’m fond of quoting Information Architects’ mantra: web design is 95% typography.

Jason Rudland

April 7th, 2010

Thanks for your article Shannon – very informative. Typography has always been at the core of the Internet, in fact we have newspaper typesetters to thank for HTML. Journalists used to use tags in their copy to tell the typesetters what font/size to use. Anyone who remembers WordStar (a very early DOS word processor) will remember the tags the user had to insert for formatting – before windows and wysiwyg word processors. Oh do I feel old knowing about this stuff!

taobao

April 7th, 2010

typography in the ux design is gaining more attention these days. nice post!

Dijup

April 7th, 2010

Shannon this was very informative, typography has always been the limitation for the web user. Using this option we can come out of this limitation.

agencehorizon

April 8th, 2010

Good overview, thanks!
Wait, did you mention Comic Sans? Not sure it is a good idea to use this one nowadays ;)

suej

April 8th, 2010

Great article – Thanks! Just what I was looking for :-)

Web Risorsa

April 8th, 2010

good post to learn the typography basics… :)

praveensms

April 8th, 2010

Nice piece of information on tyography on internet….

Hangfire

April 8th, 2010

Thanks for the article.
Unfortunately I suck at typography, but your comment about using too many fonts and declaring them globally was good.
Time for a website make over I think!

Jordan Walker

April 8th, 2010

Nice article on typography. Very informative.

Gaëtan

April 8th, 2010

Thanks for this good post!

Lee Fuller

April 8th, 2010

Nice article on Typography, definitely some good points made!

Keep these articles coming!

Qirrank

April 8th, 2010

Great information!
Thanks Admin!.

Dino Digital

April 9th, 2010

Every year this discussion seems to arise about the web industry claiming that the world will turn to Typography and I really wish it would. I love designing font and would have great pleasure in selling my fonts for a lot more than I am now as it is the latest trend.

I have seen on the cover of .net magazine this month they are plugging the typography angle of design again.

I do however thing that Sifr is a little old hat and that some newer methods that are arising would be more suitable for the challenge of web fonts.

I do however love the article and back the whole Typography idea all the way I just hope it goes a bit future this time and pushes it to be a larger trend.

Mark Lanham

April 9th, 2010

Ok, who dared this guy to put Comic Sans as a popular typeface choice?! It’s not hard to know that this is a big mistake. However, I’m sure because of this more users will view this page just to disagree, so it must be an ulterior motive.

arnold

April 9th, 2010

can anyone tell me what’s the difference between typeface and font family?

marcelo

April 10th, 2010

Excellent article for those who want to start right! Very good post!!!

Tanks

Eddie

April 10th, 2010

Great Article..

It’s great you mentioned consistency, A tip all new developers/designers must note :)

Kevin Cole

April 10th, 2010

Thanks for the nicely organized stack of information. I write and edit for a living – but for a design company owned by my wife. This really does help me understand how she and the other three designers are looking at what I’m writing for them to set up in print and on websites.

Askar Sabiq

April 10th, 2010

Great article ! i have terrible experience in @font-face, it break my 10GB bandwidth in 3 days. :(

Clive Walker

April 11th, 2010

I don’t agree with your point about sans serif fonts being more easily readable for body copy on the web:

“Sans serif fonts have been proven to be more easily read online in body copy because serifs make it tougher for the eye to follow, while the opposite is true for printed text”

“Although at an increased size and with more leading—the amount of additional vertical space between lines of type—sans serif fonts can still work fine in body text on the web”

This seems muddled. Do you mean to say serif in the second sentence?

Quite a few of your examples use serif fonts for body copy. In my opinion, it is *how* the font is used which determines whether sans serif or serif fonts are best for any given example.

scruffyrobot

April 12th, 2010

Thanks for the great article. I love typography and using different fonts together to compliment each other. As you mentioned, cufon has been a great tool I’ve relied upon in order to do this.

josh

April 20th, 2010

Phil Gons : fonts look “rough”?

Really, you are a designer and could not come up with a better term than “rough”?

josh

April 20th, 2010

“In my opinion, it is *how* the font is used which determines whether sans serif or serif fonts are best for any given example.”

Correct, however correctly used serif trumps sans for printed work 100% of the time. Screen is somewhat different because serifs break at smaller sizes due to low res (compared to print).

Davie-Boy

July 7th, 2010

Good news for all you font lovers out there. A revolution is slowly taking place regarding the use of fonts on the internet. Keep an eye on the fontshop. They’re one of the original font developers from way back when photo-typesetting was a new technology (late 1970′s- early 80′s). This is what they’re saying:
“Most fonts are designed to be used in desktop applications for design that will be printed or output as an image file or PDF. Web fonts are an entirely new category of fonts optimized for use on web pages using the @font-face rule. This fairly new addition to CSS allows fonts to be linked in web pages and downloaded by browsers so that anyone who visits the page can view the fonts declared by the page’s designer. This means your website can display indexable, editable, resizable, dynamic HTML text in a font other than the handful of “web safe” options we’ve had to rely on for years.”
Read more here:
http://www.fontshop.com/blog/?cat=80&utm_source=NewsletterFeb2410&utm_medium=email&utm_content=WebVersion&utm_term=em&utm_campaign=FF52Web

NoeliePoelie

September 11th, 2010

I am an old, retired typographer and it is great to read an article by someone who loves type. Go raibh maith agat.

Dublin, ireland

kiran

September 16th, 2010

Thank you Shannon

Robert Seaton

September 17th, 2010

Hi,

I notice that you claim sans-serif is more readable on computer displays, but you link to an unsourced sentence in a Wikipedia article. Why not just say “because your cousin’s uncle said so?”

I don’t mean to sound harsh, and sure, maybe sans-serif is more readable, but it would be nice to see some actual evidence backing up that claim before I base any design choices around it.

Craig

September 18th, 2010

Great overview of the basics of web typography! Fantastic perspective with valuable practical tips. Thanks!

Nick Gassmann

January 7th, 2011

Shannon,

sIFR is kind of dead. Hasn’t been updated since 2008 and even the developer knows that it is not the best solution. With @font-face, cufon and the rest, I think it’s time to stop talking about sIFR. As much as I liked it and used it, I have since moved to Cufon and Typekit. Best and easiest IMO.

Nick Gassmann

January 7th, 2011

Didn’t see the post date. Blame it on the twitter bot that linked here. You’re probably already dropping sIFR from your suggested rotation.

Anni

January 10th, 2011

Thank you, Shannon, for this helpful website!

j_hatfield

October 15th, 2011

This is a great tutorial, I’ve been looking for a blog to show my clients who know very little about type (the kind that thinks “bleeding cowboys” looks good on anything) and I love the example websites you provided. I did find this article that gives a brief tutorial that might be good for some people who have a good idea about fonts but maybe just need a refresher course:

http://www.back40design.com/news/m.blog/22/communicate-trust-through-typography

Leave a Comment

Subscribe to the comments on this article.