A Simple Guide to Improving Web Typography

Posted in Tips, Tools, Typography, Web Design3 years ago • Written by 15 Comments

With the advent of much improved browsers, text rendering and high-resolution screens, technology is no longer an excuse for poor typography. In many ways typography can be elegant and an expression of the designer’s ideas when chosen wisely.

Today I will not only present you with guidelines to consider in mastering typography for the web, but give you the useful tools, techniques and resources to help you achieve effective designs.

Feel free to suggest any other tools or resources in the comments section.

 

In Context

To set the tone of the message you wish to communicate, you must first choose your typefaces wisely.

  • It allows the reader to adjust to the right setting and encapsulates the information conceptually.
  • The evaluation of picking the right font should start at this level and then break down into technical bits.
  • Keep the nature of content in mind during this process and see if and how the type reflects that content.
  • Read the text your given to figure out the best method of integrating and conveying its full potential on the site.

This article explains choosing type wisely very well.

 

Create Hierarchy

Every site needs a well-developed hierarchy: indicators of where to start reading and how to proceed.

  • Your typography can provide that hierarchy as long as you know your hierarchical order ahead of time.
  • By thinking about size and typefaces, you can highlight a piece of text as a headline in a way that different placement in the design just can’t provide.

Whenever Possible, Use Sans-Serif

Sans-serif is almost always the best option to use on-screen, whereas serif fonts may become blurry or pixelated. Although it’s common to use serif’s in web typography, by using sans-serif’s for longer bodies of text you put a lot less strain on your readers eyes. Verdana is a great option for a web font as it was designed to be displayed on the computer.

Leading

As you know, leading is the amount of space between two lines. Every web page differs, but here are some general rules to keep in mind:

  • Long lines of text may require extra leading.
  • Bold face or sans-serif type require more leading.
  • Type set at very small sizes, say 8 point or below, may require extra leading.
  • Leading affects the density of your page, so if your page seems a bit dark, try adding more leading.
  • Headlines may require negative leading, where type actually (or almost) overlaps.Negative leading, in other words a line-height value of less than 1, can be used on short pieces of text provided care is taken to ensure ascenders and descenders do not collide. For example:

It should be noted that some browsers add a little leading by default: Safari and Internet Explorer for example; whereas others, such as Camino and Firefox, do not.

Headings

By default, browsers will render the <h1> text to view on your page as bold. The text will also be formatted in a large font size. And the text will reside on its own line with automatic line breaks above and below it (similar to a double-spaced heading, typed in your word processor.)

  • Contrasting colors stand out more, so use them for main section headings.
  • It’s not all about size. Experiment with color changes, lightness/darkness, and font styles such as italics and bold.
  • The larger the heading, the more interesting the font face can be. This can be a great opportunity to use a cool custom font. For smaller headings, keep it simple.
  • Search engines like Google regard the text contents of this tag to be extremely important, so it is an essential tag to use on your Web pages.

Check out this article for 20 fonts designed for big, powerful headings.

Choosing a Font

The following are resources I’ve found to help you choose your fonts wisely.

Type Tester

Type Tester is an online application that allows you to test different typefaces. You have three columns of text and can modify the typography any way you please. You then get the CSS that accompanies your selections.

CSS Type Set

CSS Type Set is a handy tool that lets you preview your CSS text as you modify it, and it generates the code for you immediately.

STC fontBROWSER

This tools enables you to preview fonts installed on your system online.

Flipping Typical

This is a nice way to explore the popular typefaces you have on your computer and see which one fits the project you are working on. This is done by creating text that is displayed using various typefaces from your computer.

Typographic Techniques

The following are resources I’ve found to help you develop efficient typographic techniques.

10 Examples of Beautiful CSS Typography and How They Did It

A lot of great websites out there have beautiful typography using only CSS. But simply looking at them gives you only half the picture. This post showcases examples of good clean typography using nothing but CSS, and it explains what the designers did to achieve this beautiful type.

 

 

Advanced Typography Techniques Using CSS

This post is a great example of what you can do by combining and tweaking type using CSS. Different techniques are introduced: reflections, drop characters, handwriting, newspaper headlines and more.

typeface.js

With typeface.js, you can embed custom fonts on your Web pages so that you don’t have to render text as images. What makes it different is that it’s JavaScript only, not JavaScript and Flash like sIFR, or JavaScript and PHP like FLIR.

Misc

You need a typeface poster

Conclusion

Typography is an art form that has been around from early on. In choosing your typefaces, carefully study and test your fonts under different scenarios. One of the most important factors in web design is readability and legibility, so be creative but also make smart decisions in regards to those two factors. The best web typography lends a meaningful purpose behind the content it illustrates while triggering emotions in your readers in the process. Feel free to leave a comment if you found other resources for improving your web typography.

14 Written Articles

15 Comments Best Comments First
  • José Mota

    Thursday, June 16th, 2011 12:08

    1

    Most websites definitely lack hierarchy and leading quality.
    I would only say that choosing sans-serif over serif is not an issue anymore. Readability on-screen has improved and this debate is not a decider like it used to be.

    Great post, Stephanie.

    0
  • Richard

    Friday, June 17th, 2011 13:26

    6

    I think the fonts used in a design can really make it all come together, and gives a touch of individuality. The use of good type alongside suitable colours and images, can create a structure which helps the reader to move across the page.

    Keeping things simple is often a very effective way of drawing attention. But keeping things simple and looking good is not always easy.

    One idea is to look at what newspapers have been doing for years…big, bold fonts in a subtle shade (white) with an opposite type colour (black) which provide a total contrast to each other. This is also great for your site accessibility!

    0
  • Renato Alves

    Saturday, June 18th, 2011 02:52

    7

    This article came in the best hour while I’m trying to find a good font for the redesign of my blog. Thanks It’s gonna help alot. :)

    0
  • Nanang Gunawan

    Friday, June 17th, 2011 02:14

    5

    i like typography but i am not too undesrstand about that…

    but its good post….

    thanks…. :D

    0
  • Andrea Spikes

    Friday, June 17th, 2011 00:15

    4

    These resources can really help you choose the right font, I went through them and their all great, lots to choose from

    0
  • tyropel

    Thursday, June 16th, 2011 15:13

    2

    Thank you for the tips and resources for improving typography. Really great article.

    0
  • Michael K.

    Thursday, June 16th, 2011 16:56

    3

    Typography is soooo important in today’s design. I feel it is overlooked by many. Contrast, size, spacing, line height, white space and a proper hierarchy are huge when it comes to the readers or visitors being able to get through your content without straining their eyes or getting lost.

    Wonderful post Stephanie. I think this is for sure a good one to share with the novice or beginner.

    -M

    0
  • Paul Cockburn

    Sunday, June 19th, 2011 15:20

    8

    Fantastic article, I started thinking about typography properly after reading Steve Krugs book “Don’t make me think”. This is just the type (haha) of article I’ve been looking for, it’s going to help my next site immensely. Cheers!

    0
  • Aman Ullah

    Monday, June 20th, 2011 07:48

    9

    this post is the useful to us. so i like this & wish you.

    0
  • Jeremy Gower

    Wednesday, November 23rd, 2011 16:04

    14

    Been a designer for a while, but just now getting really into typography. Thanks for the tips.

    0
  • Sałacki

    Sunday, February 5th, 2012 11:25

    15

    Good article, thanks for sharing. I love good typography and I think it should be used on every good website.

    0
  • SANJAY SAHANI

    Monday, November 21st, 2011 06:31

    13

    KINDLY SUGGEST THE BEST FONTS FOR HEADINGS & PARAGRAPH (TEXT) FOR WRITING RESUME
    THANKS

    0
  • Warren

    Tuesday, June 28th, 2011 13:47

    12

    Always good to fine-tune typography, if anything to pay respect to the craft and help the web come into its own typographically. Even if one site at a time.

    0
  • James

    Thursday, June 23rd, 2011 13:45

    10

    Super article. Brilliant insight and great wording, many thanks for sharing!

    0
  • Ioan Virag

    Saturday, June 25th, 2011 21:01

    11

    Thank you for the nice article. I also have a recommendation: Font Squirrel offers a great font-face generator, where you could generate webfonts using your own fonts and of course offers a lot of free fonts to download.

    0
  • Sałacki

    Sunday, February 5th, 2012 11:25

    15

    Good article, thanks for sharing. I love good typography and I think it should be used on every good website.

    0
  • Jeremy Gower

    Wednesday, November 23rd, 2011 16:04

    14

    Been a designer for a while, but just now getting really into typography. Thanks for the tips.

    0
  • SANJAY SAHANI

    Monday, November 21st, 2011 06:31

    13

    KINDLY SUGGEST THE BEST FONTS FOR HEADINGS & PARAGRAPH (TEXT) FOR WRITING RESUME
    THANKS

    0
  • Warren

    Tuesday, June 28th, 2011 13:47

    12

    Always good to fine-tune typography, if anything to pay respect to the craft and help the web come into its own typographically. Even if one site at a time.

    0
  • Ioan Virag

    Saturday, June 25th, 2011 21:01

    11

    Thank you for the nice article. I also have a recommendation: Font Squirrel offers a great font-face generator, where you could generate webfonts using your own fonts and of course offers a lot of free fonts to download.

    0
  • James

    Thursday, June 23rd, 2011 13:45

    10

    Super article. Brilliant insight and great wording, many thanks for sharing!

    0
  • Aman Ullah

    Monday, June 20th, 2011 07:48

    9

    this post is the useful to us. so i like this & wish you.

    0
  • Paul Cockburn

    Sunday, June 19th, 2011 15:20

    8

    Fantastic article, I started thinking about typography properly after reading Steve Krugs book “Don’t make me think”. This is just the type (haha) of article I’ve been looking for, it’s going to help my next site immensely. Cheers!

    0
  • Renato Alves

    Saturday, June 18th, 2011 02:52

    7

    This article came in the best hour while I’m trying to find a good font for the redesign of my blog. Thanks It’s gonna help alot. :)

    0
  • Richard

    Friday, June 17th, 2011 13:26

    6

    I think the fonts used in a design can really make it all come together, and gives a touch of individuality. The use of good type alongside suitable colours and images, can create a structure which helps the reader to move across the page.

    Keeping things simple is often a very effective way of drawing attention. But keeping things simple and looking good is not always easy.

    One idea is to look at what newspapers have been doing for years…big, bold fonts in a subtle shade (white) with an opposite type colour (black) which provide a total contrast to each other. This is also great for your site accessibility!

    0
  • Nanang Gunawan

    Friday, June 17th, 2011 02:14

    5

    i like typography but i am not too undesrstand about that…

    but its good post….

    thanks…. :D

    0
  • Andrea Spikes

    Friday, June 17th, 2011 00:15

    4

    These resources can really help you choose the right font, I went through them and their all great, lots to choose from

    0
  • Michael K.

    Thursday, June 16th, 2011 16:56

    3

    Typography is soooo important in today’s design. I feel it is overlooked by many. Contrast, size, spacing, line height, white space and a proper hierarchy are huge when it comes to the readers or visitors being able to get through your content without straining their eyes or getting lost.

    Wonderful post Stephanie. I think this is for sure a good one to share with the novice or beginner.

    -M

    0
  • tyropel

    Thursday, June 16th, 2011 15:13

    2

    Thank you for the tips and resources for improving typography. Really great article.

    0
  • José Mota

    Thursday, June 16th, 2011 12:08

    1

    Most websites definitely lack hierarchy and leading quality.
    I would only say that choosing sans-serif over serif is not an issue anymore. Readability on-screen has improved and this debate is not a decider like it used to be.

    Great post, Stephanie.

    0

Comments are closed.

54.82.119.238 - unknown - unknown - US