A Guide To Typography On The Web

Advertisement

The web is alive and growing more active with each new day. The increasing number of sites that crop up on the daily shows no signs of slowing, and as the online ranks grow, designers are constantly looking for ways to make their sites stand out from the rest. As this brainstorming scramble begins, some designers are turning their attention to the typography of their sites to make this all important impression. And though the wells from which to choose your site fonts is growing, designer’s are still finding their hands somewhat tied as to which fonts can be safely used knowing they can be viewed properly by the online masses.

Once upon a time on the web, the only way to include these non-standard types, was to build them into or simply plug them in as images. Some even went so far as converting all of a site’s body text into an image, much like we do with headers. Without realizing that they were compromising the site’s SEO and search capabilities, given that the keyword rich content that generally steers people in your site’s direction was no longer searchable. Search engines saw these sites as merely images, no text to check against relevant queries. So there was a time that effective, stylish typography was a rarity on the web, but the times they are a changing!

Now as doors are starting to open for designers in the typography arena affording us more opportunities to turn to making our web designs standout through well used and styled type. Now with more people able to turn the bulk of their site’s style in more of a typographical direction, the beauty of the web is growing. However, when turning to type in this way there are some considerations to be made to make sure your type is aiding your design and not taking away from it. It is not as simple as just plugging in a font and that’s that. So below is gathering of helpful hints and resources, terms and tools, and more, to help you make the most of the typography in your web designs.

Web Safe Fonts

Web-safe fonts are fonts likely to be present on a wide range of computer systems, and used by web content authors to increase the likelihood that content will be displayed in their chosen font. If a visitor to a website does not have the specified font, their browser will attempt to select a similar alternative…

With the future of web typography and its promise of an expanding landscape through services like Typekit and developments like @Font-Face, both of which will be talked about more later in the post, web designers are hoping for a day when they will not have to concern themselves much with the issue of only having a handful of web safe fonts to work with. However, though this new day is working its way onto the horizon, that time is not quite here yet. So for the time being, designers need to be aware of what web safe fonts are currently available for use. While again, this does still have its limitations, it still allows for a bit more flexability of font choice to complete your design.

For more on web safe fonts check out dustinbrewer.com. Fonts on the web and a list of web safe fonts. This site gives you a graph of all web safe fonts as well as which OS you will find each on.

image1 A Guide To Typography On The Web

Font Stacks

Font stacks are a great use of CSS and allow desigers to expand the font options that they have at their disposal when they are building their sites. Font stacks allow you to expand upon and go a bit farther in your design than just being limited to the web-safe fonts listed above. There are a number of other fonts that most users have on their computers that can be called on by your design, and with font stacks you are able to essentially establish a font hierarchy for your design to scan through. You are basically building a virtual wishlist of font choices for your design to look for, and if the user viewing the site has those fonts stored on their machine, your code will plug the font in. And the font stacks are even stackable, so multiple stacks can be employed in one design, allowing for even more flexability.

The generic font stack is typically: Ideal, Alternative, Common, Generic which will look like the example below.

h2 {font-family: helvetica neue, helvetica, arial, sans-serif;}

Further font stack reading

The Unit Blog gives a great explanation of font stacks and the correct way to use them, as well as some sample stacks you may want to give a try in their post, Better CSS Font Stacks.

image2 A Guide To Typography On The Web

Inspiration Bit also has a really good article on font stacks that points to many must read posts on the topic. They also give you examples of a few sites with outstanding web typography, and fill you in on the font stacks that are used on them. Striking Web Sites with Font Stacks that Inspire.

image3 A Guide To Typography On The Web

Areas to Consider

Here are a few tips for you to consider on ways to make your type shine, and some of the main text areas of your site where you will want to choose your fonts carefully.

Body Text

Choosing the appropriate body text could very well be the most important part of the typography process. This is the main content of your site and if your visitors can’t read it well, they most likely won’t be back.

Headlines

Styling a great headline is one of the best ways to add a bit of flare to your site. It is not always enough to find the right font, you also need to take time to adjust the spacing, etc, to make it perfect.

While CSS image replacement and sIFR can be used for headlines, I am not going to cover them here since they are not always ideal. However, if you would like more info on both, here are some links.

Quick Tip

Combine serif & sans-serif fonts to break up the monotony of the page. For example, use one for headlines and the other for body text. Here is a great post about the mixing up of fonts. 7 Rules for Mixing Multiple Fonts in Good Web Design

BlockQuotes

Blockquotes provide a great opportunity to add some style to your page and break up long spans of text. Styling them apart from the rest of the body text, and in fact including style for them in the CSS at all, can be an effective means of highlighting certain areas of your web presentation.

Readability

Above all, the main thing to keep in mind as you reach for new ground and dare to be different with your typography, is readability. There is no point in putting words on your website if, by and large, most people will not be able to read them. Consider your fonts carefully for this reason. Maybe there is a reason no one else is using that font you are salivating to have for your design.

If there is any element that you add, or just any characters within your font family that interfere in any way with the readability of your typography choice, you may seriously want to reconsider. With so many sites populating the web, surfers are not going to take the time to try to decipher exactly what it is they are reading, they will simply move on to another site covering the same information with a much more readable presentation.

Quick Tip

Don’t underline text that isn’t a link. It’s better to use strong or em to highlight text, to help avoid any confusion for your readers.

Contrast

One area to look at when you examine readability which can impact the overall presentation, is contrast. You don’t want your readers to have to strain their eyes trying to read pale pink text and a pale blue background for one hideous example. An easy way to check for the proper contrast for your site is to look at it in grayscale. This is a sure fire way to reveal any areas where the type may not have enough contrast to be easily read.

If you can read it fine via grayscale, then chances are, your readers will not experience any issues with contrast readability either. GrayBit is an online accessibility testing tool designed to visually convert a full-color web page into a grayscale rendition for the purpose of visually testing the page’s perceived contrast.

image7 A Guide To Typography On The Web

Size

In this case, size does matter. Try not use smaller than 12-14pt type for body text. Maybe stay closer to 14 than 12 so that once again, you do not make your readers strain their eyes just to read your content. I also suggest you set your type using em instead of px so that the user can resize the font themselves to a pleasant reading size.

A List Apart has a fantastic and very in-depth article on how to reconcile the designer’s requirement for accuracy with the user’s need to resize text on demand, arriving at a best practice that satisfies designers and users and works across browsers and platforms. How to Size Text in CSS

image4 A Guide To Typography On The Web

Font Eligibility

Just because you can, does not always mean that you should. Steer clear of using all uppercase fonts for body copy. This goes back to some of the basics of design theory concerning the way we visually scan for variance between the letters in a word in order for our eyes to take it in. Using all caps has a tendency to disrupt this variant flow.

Another eligibility concern that effects readability, is also an area of contention in the design community. There are ongoing debates about which is better for the body text of a website, serif or sans-serif. IMO it is all a matter of personal preference, and so long as the readability remains uneffected, it is okay to use either.

The Size of Text Blocks

Especially with more text heavy areas of the site, you want to establish an easy flow for the type to keep from turning anyone away. Keep text blocks short and easily scannable for the sake of both your readers and your content.

Spacing

Another element of your selected font to consider, especially with regards to readability and appearance, is the spacing. For example. New Times Roman doesn’t make a great headline font until the spacing is adjusted. All around, not just between words, but between individual letters. Sometimes certain letters line up oddly next to one another in your chosen font, and it can impair the readers ability to quickly scan your words, breaking their flow. Be it for your body text or headlines, whatever the type may be for, pay attention to the spacing.

  • letter-spacing – The spacing between each individual letter
  • word-spacing – The space between each word
  • line-height – The space between each line of type.

Use Hierarchy Effectively (h1 – h6)

There are a number of different headers that you can use in your stylesheet, six in fact. You can assign each different sizes and styles in order to steer your reader through the site. This heirarchy of the page is an important guide for the readers eyes, essentially letting them know what’s important. Use this hierarchy stylishly to the advantage of your content and design.

CSS Globe has a very helpful article listing the dos and don’ts of using headers. How to use headings in HTML.

image5 A Guide To Typography On The Web

Code Symbols Correctly

Below are the most common offences but make sure you check out this complete list of special HTML characters to make sure you are not committing any other type crimes.

  • Quotes – use at the beginning of the quote and for the end.
  • Apostrophe –
  • Dashes – use for an en dash and for an em dash
  • Elipses –

For a Beautiful Web tells you how to improve elements such as parentheses, copyright symbols, bullets, etc using baseline shift in, Improve your web typography with baseline shift.

image6 A Guide To Typography On The Web

Future of Web Typography

We mentioned before that things are changing and options are opening up for designers as we continue to move forward. Two very important facets to that changing landscape are @Font-Face and Typekit. Hopefully these door openers will continue to expand the font base for designers in the future.

@Font-Face

At first glance @font-face seems like it would be the answers to all of our web typography prayers, by allowing you to embed the font in your design. However, the main drawback is that to use a particular font with @font-face, that font has to be licensed for @font-face linking & embedding, because the font is then available for users to download. So while this is moving us forward, the movement is still slow going. Below is a sample of the code used to embed @font-face fonts.


@font-face {
font-family: FontName; /* Define font-family name (can be anything you like) */
src: url(font.ttf); /* Point to the font file on your server */
}

body {
font-family: FontName, serif; /* Sets the uploaded font as the primary font for the site (make sure you use the name defined above) */
}

George Butler gives an in depth look at the state of @font-face along with its strengths and limitations in the post, 10 Years Later – The Current State of @Font-Face.

image11 A Guide To Typography On The Web

Theme Forest not only gives a description of @font-face but also gives a list of 15 fonts whos licenses allow for its use in, CSS @Font-Face and 15 Free Fonts You Can Use Today.

image12 A Guide To Typography On The Web

Typekit

Typekit is another way that the font well is expanding its reach for designers, though not a free one. Much like with @Font-Face, especially since it is uses the @font-face CSS, certain fonts are registered with Typekit which makes them available in your design through a CSS link to the Typekit servers if you are a subscriber.

For A Beautiful Web offers a little insight into Typekit with the post, First Impressions of Typekit.

Also be sure and check out this interview with Typekit creator Jeff Veen via Sitepoint’s Podcast #23 – Web Fonts With Jeff Veen.

Useful Tools for Web Typography

  • Typetester allows you to compare three different type settings side by side.
  • Typechart lets you flip through, preview and compare web typography while retrieving the CSS.
  • What The Font allows you to submit an image and find the closest matches in the WTF database.
  • CSS Typeset is sort of a WYSIWYG editor for type. Put in your type, select the settings you want and get the CSS automatically.
  • PXtoEm offers an easy way to convert px to em.

Advertisement

There are 18 comments for this article
  1. Iciar at 7:41 pm

    It was weird, I’ve just was looking for something about typography, and I didn’t find anything interesting. And suddenly this article came up in my facebook. Just what I needed, simple, clear, short and very useful.

    Many thanks

    Ichi

  2. Dzinepress at 11:19 am

    i feel your article really helping for graphic and web designers who loves to use typography, now you sharing an amazing guide for them too.

  3. sriganesh at 1:29 pm

    very detailed, i never know we have to consider this much . thanks for the post described in detailed :D
    Bookmarked

  4. Pingback: CSS Brigit | A Guide To Typography On The Web
  5. Richard at 5:08 pm

    Good article, some useful stuff. Odd use of the word eligibility. Presume you mean legibility instead and in my book legibility and readability are the same thing anyway.

  6. Rob Bowen at 8:37 pm

    Thanks for the kind words everyone. Really glad that you all are finding the post useful.

    @Richard – Thanks, but no I meant, eligibility which is why the paragraphs beneath that heading talk about just because a font is available to use, doesn’t mean it will work or be the right one. So I said what I meant, and for that matter I also meant what I said. ;D lol

  7. Pingback: Linkschleuder 10-02-08 bis 10-03-12 – freeQnet
  8. Pingback: Dayn W Creative » WordPress 3, better Facebook search, a guide web typography, microformats ala Google
  9. Pingback: Implementing A Good Redesign: Advices And Examples | Best Web Magazine
  10. Pingback: Link Collection March 2010
  11. Pingback: Come progettare un buon restyling? consigli ed esempi | Your Inspiration Web
  12. Craig at 5:51 pm

    Typography can make such a massive difference to a designs look and feel, and your post covered a lot of ground and definitely things to keep in mind, Thanks!

  13. Pingback: Una guida alla tipografia sul web | Italian webdesign
  14. Pingback: The Anatomy of a Type: In Simple Words | Best Web Gallery - Flash Gallery - CSS Gallery - Web Design Inspiration - CSS Web Gallery - Designing Gallery
  15. Pingback: The Anatomy of a Type: In Simple Words | Arcade