Typography is integral to web design. The various uses of text on the web, from large headlines and bold blocks to small body, indicate the importance of typography; it is a combination of art and science.

Type is everywhere, doing everything; all websites rely on text and font to convey their message to readers. Many designers take type for granted and focus on the more glamorous aspects of design.

You may be interested in the following related articles as well.

• How to Spot Quality When Choosing a Font for your Design Work
• Essential Guidelines for Featured Content in Web Design
• Factors Influencing Your Overall Website Design
• Design for the World: Cross Cultural Web Design
• Why Inspiration Playing a Critical Role in Web Design

Feel free to join us and you are always welcome to share your thoughts that our readers may find helpful.

Don’t forget to subscribe to our RSS-feed and follow us on Twitter — for recent updates.

Why Typography is the Soul of Web Design

Modern typography began with the invention of moveable type and the printing press, though it has roots in ancient calligraphy and it has now branched out into digital media. Typography is a broad term that encompasses many fields and occupations, from type designers—who create letterforms—to graphic designers— who assign typefaces to text and arrange the text for publication.

Typography is just as important on the web as it is in print. The fact that it appears on a computer screen and not on a piece of paper is immaterial; type should still be legible and pleasing to the eye.

Designers should adapt their techniques to suit the medium, whether it be publishing, signage, packaging or television. For example, a headline style that works well in a magazine spread would not necessarily suit a poster. A magazine is always viewed at relatively close proximity, so letter spacing can be as tight as you like and the words will still be readable. A poster, more often than not, is viewed obliquely, so the text will be distorted to some extent. In this case, a little more letter spacing would help the viewer identify individual characters and, thus, the words.

Designing for a computer screen has its own problems. A web page has to work on different operating systems and screen sizes. Designers need to understand and address cross-platform issues if they hope to maintain control over the type as everything around it shifts.

Does Typography Matter in Web Design?

Typography is more than about choosing fonts; a web designer should be skilled in choosing appropriate fonts, spacing the lines of text, sizing and styling the text and more, which we’ll go over in this article. We’ll explore typography from the perspective of the web designer.

Choosing Fonts

The first typographic rule for the web is this: stick to the conventional fonts. Not everyone has the fancy collection of fonts that you do, so use fonts that all computers have.

• Standard sans-serif fonts are:Arial, Helvetica, Verdana, Geneva, Lucida Sans Unicode, Lucida Grande and Tahoma.
• Standard serif fonts are:Georgia, Times, Times New Roman, Palatino, Palatino Linotype and Book Antiqua.

Serif and sans-serif fonts have different purposes; the former are used in books and in special design situations, while the latter are used on websites because they are clean and easy to scan. Sans-serif fonts are also used in children’s books because the letterforms are simple—and this carries over to adulthood: serif fonts can be read for a prolonged period of time, but sans-serif fonts can be read faster.

Tips for Clear Type

• Line HeightMost web designers already know this, but line height is important to both readability and aesthetics. Using the em measurement in CSS is the best way to achieve an organic vertical balance. For paragraph copy, using between 1.2em and 1.4em is a safe bet; the reader will be able to distinguish the lines of text.
• Limit the Number of TypefacesIt’s easy to get lost in the sea of interesting typefaces, but don’t let it show in your final design. Pages that contain a lot of fonts are unpleasant eyesores. Consistency, which is vital to coherent design, gets lost. I’m not recommending that you use just one font, though; keep to two or three per page or per website.
• Paragraph WidthWhen I first designed fluid layouts, I made the mistake of not accounting for huge screen resolutions. A too-wide paragraph will likely go unread, because reading a line of text from it feels like it takes forever. Don’t make the same mistake.
• White Space and Page HierarchyUse white space to your advantage. The notion that everything below the fold is ignored is a myth. Use white space to distinguish certain areas of your design; it lets the eyes rest and guides them to important areas of the page. While white space can keep things clear, you still need to maintain a hierarchy: if one element is more important than another, that should be evident—and this can be shown with larger or weightier type. A clear hierarchy quickly shows users what’s important.

How Typography Affects the Design Process and Product

Creating and organizing styles at the beginning of a design process will pay off later. Many people hurriedly select text and fonts when preparing something to show the client. The more prototypes the client wants to see and the more changes they want made, the longer the process becomes—and then changing even small stuff takes a long time. When the design is finally finished and you need to work with it, you might have to recreate the document and create the styles from scratch.

I’ll introduce you to my process for creating and organizing styles, which I’ve adopted so that I can rapidly change typefaces, font sizes and leading without having to recreate anything. If you are into print media field and using InDesign just like me then following tips are very useful for you.

Paragraphs, Headings, Captions

Using these delineators is most effective when working with many styles or types of text. For example, when working on a book, I simply use paragraph text and three levels of headings. I also make sure that everything is locked to the baseline grid, but I don’t lock anything at the outset. Instead, when creating the styles, I make sure that everything adds up. If I define space before and after a paragraph, I make sure it adds up to the leading of the text. Why? So that I can quickly test different leading without repeatedly changing the baseline grid.

Style Defaults

The first paragraph styles I’ll mention are “default,” “heading default” and “paragraph default.” I tend to name my styles semantically—there’s no need to use short cryptic names; call them something that makes sense. In the case of the book, I won’t need many styles, so creating “default” paragraph styles might be overkill, but on bigger projects it can be a great help. I create default styles so that I have something on which to base other styles, which inherit all settings if they haven’t been overridden. If you’re used to working with HTML and CSS, then you know the importance of inherited styles, especially when documents suddenly grow and get more complex.

First is the “default” style, in which I define everything: leading, font, justification, tabs, numbering (old-style or lining), open-type features, stylistic sets, language, composer (paragraph or single line), hyphenation rules, etc.

Base the “paragraph default” on the default style so that it inherits the chosen settings.

Next, create the “heading default” style, also based on the default style. Here, I delineate what each heading will have in common. In the case of the book, headings should be in a different font; I want paragraph text in a serif font and headings in sans-serif.

I also create the paragraph default, again based on the default style. I don’t change any options in this style because it should inherit everything from the default style.

Paragraphs

For regular paragraphs, I create two styles: Paragraph and Paragraph no indent (the names indicate what they do). I base them both on the Paragraph default style, but I make changes only to the Paragraph style, where I add a first-line indent. Several other styles could be created here (drop cap, full-paragraph indented, quotation, etc.).

Headings

As with regular paragraphs, I create three styles based on the Heading default style. I call them something like Heading 1, Heading 2 and Heading 3. I change only a few things in the Heading defaults style—such as the size and spacing (and other features, such as small caps)—because most of it is inherited.

The paragraph’s first tab, called “General,” shows how the current style differs from what it’s based on.

Changing the Default Style

If Luckily, InDesign is sophisticated enough to update things for you. If you base styles on others and then make changes to the fundamental styles, it will take effect immediately on all related styles. So, to test a different font across the whole design, you only need to change the Default style and perhaps the Headings Default. The structure is like an invisible tree with Default at the top.

If you’ve created indents based on the leading and adjusted spacing above or below a paragraph, and you change the Default style’s leading, then you will need to adjust the others, too. Unfortunately, InDesign doesn’t support inherited units or units based on leading or font size (like em squares).

When you’ve finished preparing a variety of designs with different typefaces and have discussed them with your client (and shown them that you’re Superman), you now only have to adjust the documents’ margins and baseline grids and lock the Default style’s lines to the baseline grid.

Type Is Two Thirds of the Design

Most information on the web is in the form of text. It’s reasonable to suggest that web designers should be trained mainly to shape written information—in other words, typography.

Back in 1969, a famous Swiss typographer named Emil Ruder wrote something about his contemporary print materials that we could easily say about our contemporary websites:

Today we are inundated with such an immense flood of printed matter that the value of the individual work has depreciated, for our harassed contemporaries simply cannot take everything that is printed today. It is the typographer’s task to divide up and organize and interpret this mass of printed matter in such a way that the reader has a good chance of finding what is of interest to him.

Macrotypography (overall text structure), as opposed to microtypography (details about type and spacing), deals with many aspects of what we currently call “information design.” In certain respects, information designers today do the job that typographers did 30 years ago:

Typography has one plain duty before it and that is to convey information in writing. No argument or consideration can absolve typography from this duty. A printed work which cannot be read becomes a product without purpose.

Optimizing typography means increasing readability, accessibility, usability and overall graphic balance. Organizing blocks of text and combining them with pictures—isn’t that what graphic designers, usability specialists and information architects do? So, why is it such a neglected topic?

Rules of Thumb for Effective Typography

The basic rules and tips outlined below will help you structure and use type in your work. Be aware of these and you’ll improve nearly everything you create that contains a headline or major typographic element.

1. Read the Text

Some web designers think their duty is to just copy and paste from a text file. Don’t be satisfied with that; read the text and you’ll understand how it should be presented on a website. Avoid creating a disconnect between a website’s text and its look.

Kick it up another notch by reading the text again once you’ve placed it on the page. Note the space around the letters. Are there any unusually large spaces that look odd? Look for lines that are too long to read easily, awkward line breaks and similar problems, and make the necessary changes.

2. Trust Only the Actual Text

Could you design a website without text? No. Websites depend on strong text and specific words.

Unless your website is supposed to say “Lorem ipsum…,” dummy text is no substitute for the real thing—which means that finishing the design will have to wait until you get the proper text. Get it from your client as early in the process as possible so that you can synchronize the design and the text.

3. Show a Clear Hierarchy

Every website needs a well-developed hierarchy that indicates where to begin reading and how to proceed. Type can provide that hierarchy—as long as you know the hierarchical order ahead of time. By planning text size and typefaces well, you can turn text into headlines without having to rely on placement.

4. Attend to Both Macro- and Micro-Typography

Micro-typography is concerned with legibility (issues of letter spacing, etc.), which is vital when putting together a block of text; if it isn’t legible, there’s no point in proceeding. Macro-typography addresses larger issues of design. Ignoring either facet of typography will be detrimental to your work.

5. Be Careful with Type Colors

Everyone has visited websites on which the text seems just a shade off of the background color, which invariably causes eye strain for readers.

Make absolutely sure that the text of your design is a markedly different color than the background. Black and white work so well because they are in such drastic contrast, but other color combinations work well; for example, dark blue on light pink gets the job done.

6. Get Serious about CSS

If your CSS is solid, then you’ll be able to change pages of your website seamlessly. With CSS, you can have consistent type across all pages. Butt be careful: breaking consistency will highlight anomalous text. This can be used to your advantage, though, just as establishing and then breaking a grid can make for an effective design. In web typography, font consistency can be a simple matter of CSS.

7. Plan for Your Text

Many designers lay text out in 10-point or even smaller, and most users are comfortable with this. But your text and your design need to be able to adapt to browsers that are set to display enlarged type.

Browser size can vary dramatically and move text to unexpected locations. If bumping the size up by a point size creates problems, then aging users are going to move on to the next website in a hurry. Having to scroll endlessly to the side will have similar results.

8. Use Type as Art

Stop thinking of typography simply as headlines and body copy, and start thinking of it as a design element. Typefaces are meticulously designed, and thus each possesses an aesthetic; consider them assets in your design arsenal. If you want to create a type-centric design, incorporate attractive type as the focal point.

Keep in mind that you’re not confined by the structure of existing fonts. Expand on the font shapes to suit your needs: add swirls, texture, blotches, spats or anything else you can think of to spice up the type’s look.

9. Favor Sans Serif

Sans-serif fonts are almost always the best bet for the web, especially fonts like Verdana, which were designed for display on a computer screen. Serif fonts are more likely to display poorly by becoming blurry or even pixelated.

Avoiding serifs entirely is not possible, of course, but for large blocks of text, use a font without serifs to guarantee readability.

Examples of Typography in Web Design

Typography is critical to visual communication, as we know from brochures, ads, flyers and other marketing materials. The evolution of CSS, and the use of Sprites and browser-side font-rendering technologies, has made type an important aspect of web design.

On the web and in any other medium, type should be eye-catching and easy to read. Text should be able to stand alone or enhance images. Bold text can be used for emphasis.

You can bold a few words or phrases in a paragraph to facilitate scanning (as in the image above). Readers’ eyes will jump to the text that stands out, so choose your words carefully.

A lot of bloggers emphasize text at the beginning and in the middle of every paragraph or two. This doesn’t guarantee that every reader will delve deeply into the content, but it increases the odds that a majority of it will be read. Don’t go on a spree and make too much text bold, because content will become difficult to read and comprehend.

Bold Text in Web Design

Amazee Labs

Official Link

Carsonified

Official Link

nDesign Studio

Official Link

Jeroen Homan

Official Link

MadeMyDay

Official Link

DesignWise

Official Link

d10studio

Official Link

Creative Type-Centric Designs

Below is a collection of beautiful, creative type-centric designs. Check them out and expand your horizons a little.

Start Your Own Studio

Official Link

Type Treat

Official Link

Wireless

Official Link

MORE

Official Link

Steampunk Typography

Official Link

Mask of Sorrow

Official Link

Typo-graphic Dope

Official Link

Save Australia

Official Link

Free Style

Official Link

Conclusion

Clearly, typography is of great value to web design. Learning basic typography isn’t difficult, and being able to use type creatively will enhance the quality of your designs. In fact, understanding typography will help you understand structure in terms of page elements, color and use of space, too.

Image Credits

• A Typographic Anatomy Lesson
• Design: Before and After