5 Principles And Ideas Of Setting Type On The Web

Advertisement

There are some basic approaches, guidelines and goals to consider when working with type on the Web. Overall, the medium of Web typography involves readability, accessibility, usability, and brandability. On the Web, these aspects function together to accomplish design’s goals of communication and user interaction.

There are many ways to approach Web typography in order to create effective and expressive results. Let’s take a closer look at some principles, rules and ideas for approaching Web typography decisions — you can use them as a starting point for learning how to achieve effective type setting on the Web.

1. Approach Web Typography Decisions Systematically

In web design every typographic decision needs to simultaneously accomplish a variety of results. Each headline you create should be set in text that is legible and search engine friendly, while the typeface should fit within the guidelines of the company’s brand. Furthermore, typography should fit to the graphic style of the site and meet user expectations of being able to copy and paste text. As you can see, that’s a wide array of needs for a headline to accomplish.

In some cases, this poses a problem. For instance, styling and branding guidelines may require from the designer to use specific typefaces which can’t be used online direcly. So a decision needs to be made:

  • deviate from the brand guidelines to maintain optimal search engine friendliness or
  • use an image replacement solution which embeddes the required font in an image (statically1 or dynamically2) or
  • consider using sIFR3, a rich Flash-based dynamic font embedding technique which allows not only for embedding fonts into content presentation but also interacting with them (almost) as you would do with plain text.

Sifr4
An introducing article about sIFR: sIFR 2.0: Rich Accessible Typography for the Masses5

In many cases, the myriad of goals Web typography needs to serve will be conflicting with each other. With each client and for each projects you need to prioritize and define which goals are more important than the others. Some clients will be more concerned with maintaining brand identity, and others will put search engine friendliness higher.

All typographic decisions function within the scope of the problem at hand. Different sites will have various needs. There isn’t always one answer for each problem. It requires careful consideration of the strengths and weaknesses that each solution poses to the various areas that web typography effects.

As part of your research and studies look at how other sites handle the same issues that come up in your work. Typography For Headlines86 is a collection of links and screenshots of over 100 headlines around the Web, each approaching this issue in a unique and creative way.

Type Headlines7
A screenshot from Christian Watson’s gallery Typography For Headlines86.

While typeface selection for headlines is a common issue that comes up in web design, using type on the Web involves more than font selection. A systematic approach can be brought to many other facets as well. We’ll move on to look at this in regards to information hierarchy next.

2. Utilize Information Hierarchy

There is more than one way to define precedence through the use of typography. First of all, the type size, color, weight, case, and whether the type is set normal or in italics will give the font greater or smaller importance. We also can’t ignore where the type is placed within our website layout.

Mark Boulton has a great 5 part series on Typography called Five simple steps to better typography9. In the 5th part of this series, he discusses weight. He gives a historical perspective on how weight works with typeface in creating a hierarchical order. The article explains what text types users expect for different parts of a page. Below is a diagram of how one would hierarchically select type style based on historical perspective. Click on the image below to read Mark’s description of it.

Roadmap10

Users will react to type differently depending on where it is placed on the page. Type placed in the main body copy will have greater importance than type placed in a sidebar, with all other factors being equal. Large type in the sidebar will still call attention to itself and could move itself up in the pecking order. One needs to carefully balance type in the main body and sidebar area based on how you want the user to digest the information you present.

Consider the following screenshot from the article A Guide to Web Typography11 below. The image shows how type characteristics effect hierarchy. Also, notice how strongly the sidebar stands out. Although it’s clearly separate from the main content, and therefore appears to be less important, it’s hard not to be drawn to all the fonts which are presented on the black background. This design decision is effective as it makes you want to acutally click on the fonts.

ILT Hieararchy12

Even though those fonts are much bigger than the type set in the main body we are not confused about their function. They function as advertisements. We try to block them out as we read the article. Since the sidebar is eye-catching but passive, we experience no problems reading the article although we are subconsciously aware of the presence of the sidebar.

Placement has a large effect on how we react to the type on the Web. Emerged conventions, such as a less importance given to sidebar, helps us to focus on the main content and guide us through the visual hierarch of the site. Conventions also helps us to treat content within various page areas differently.

3. Design for Optimal Flow

Hierarchy is important in page flow as well. It helps users to recognize the most important elements of the page as they scroll down through it. There are other typographic issues to look at regarding the flow. Spacing is a big part of the flow. White space, tracking, leading, indentation, as well as the padding and margins on elements — all these elements form the flow of the page.

Nick La has written an article on Typographic Contrast and Flow13. It uses the Web Designer Wall site as an example of good flow. The explanation given of flow is concise, “Space plays the most important part in maintaining flow of your design. Good use of space will tell the reader where to start, when to pause, where it ends, and what to do next.”

image14

Ultimately, it’s up to the designer to create good flow. Concentrate on each element of spacing and hierarchy. Then review how they work together as a whole. Take a closer look at the image above to get an idea of how elements work together to create a good flow.

4. Maintain Legibility Within the Presence of Branding

In order for a website to stand out the visual design of the site needs to be of high quality. In some cases, this takes the form of an elaborate design. With the growing popularity of illustrative and heavily textured sites, the need to make sure that typography is optimally chosen remains particularly important. Let’s review a few sites that use grunge design and texture elements. We’ve looked at these sites before in the article The Secrets Of Grunge Design15, but not in this way.

In the website Pain is Good16, the company’s brand is dominating the page (see example below). Most of the text on the page has been replaced with images. This allows the designer to take advantage of brand identity fully.

image17

When embedded in images, fonts can be used in a variety of creative ways. The designer has strongly emphasized the brand compromising use of plain text which may hinder search engine success. Also, the top navigation is unusual. There is a low contrast in the navigation elements. It works, but could be improved.

Bart-Jan Verhoef18‘s portfolio focuses on text rather than on visual elements. There are a few carefully selected brand and design elements converted to images, but a large percentage of the text is kept as web text. The mood of the design is created with background images, while the text remains functional. This is a way to create a grunge design while meeting user needs well. Look back at this design after reviewing the Treat Text as a User Interface section coming up, as it does an excellent job of that.

Verhoef19

Of course, designers and artists will continue to experiment with the boundaries of legibility. The best place for extreme experiments is in personal art projects, like the site EXP Typo20 below. Notice how the text in the bottom left hand corner is illegible as it crosses over the old typewriter illustration.

Exp Typo21

5. Treat Text as a User Interface

Text within interfaces is extremely important. In the book Getting Real22 from 37 Signals (available for free), the author states how “every letter matters.” Word choice within user interfaces can make or break the functionality of the site. How those words are presented is equally important. Unstyled letterforms give no indication as to what users should interact with.

Cameron Moll mentions the concept of treating text as a user interface in his article Nine skills that separate good and great designers23. There is an accompanying presentation called Essential Web Skills that was done at Webmaster Jam in Dallas Texas. In this presentation, he describes how text is a fundamental part of the user interface. He also mentions that text makes an interface more “accessible and digestible.”

image24

The image above is an example he uses of text being used as a user interface. On the left you’ll find an unformatted text. On the right you’ll find the text which was given a function in the user interface. Notice how the color and weight of the text differ. There is an ample spacing between paragraphs and within lines. Links are made to stand out and are easy to identify. To view the original of this before and after image you’ll need to download the presentation from Cameron’s site.

Further Web Typography Resources

  1. The Destination Matters More Than the Journey25

    This is a classic article on web typography over on Digital Web. It reminds us of the need to help users navigate through websites by using well chosen typography, that is both fitting for the medium, and grounded in a historical understanding of how to use type. It provides plenty of practical typographic advice, while lamenting “hack designers” and University design departments that lack “classic” typographic curriculum.

    image26

  2. Setting Type on the Web to a Baseline Grid27

    This article reviews issues with aligning elements to a baseline grid with CSS and provides a solution. The solution is an attempt to take a common print based grid technique and apply it to the web. “We can apply the same principles of proportion and balance to the type within those columns by borrowing another technique from our print brethren: the baseline grid.” This solution helps to control the flow of the page.

    Setting Type28

  3. Compose to a Vertical Rhythm29

    This article reviews a solution to achieving a vertical rhythm on website designs. “On the Web, vertical rhythm – the spacing and arrangement of text as the reader descends the page – is contributed to by three factors: font size, line height and margin or padding. All of these factors must calculated with care in order that the rhythm is maintained.”

    24 Ways Verticle30

  4. Web Design is 95% Typography31

    This is a passionate article on web typography. It makes some bold statements about how important web typography is and created a heated debate. The follow up article to this post is 95% Typography? Reactions32, in which the author reviews the issues brought up in the debate.

    image33

  5. 9 Essential Principles for Good Web Design34

    Web design can be deceptively difficult. How to combine usability with visual coherence, effective design and excellent technical performance? Collis Ta’eed explores 9 essential principles for good web design. Among the principles precedence, spacing, navigation, usability, alignment, clarity and consistency are discussed.

    image35

  6. Typetester36

    This website allows you to compare commonly available website fonts.

    Typtester37

Conclusion

Both brand elements and creative design elements should enhance the user experience, and not prevent it. Good web typography improves user experience. It improves communication, flow, and interactivity. Consider how your brand, typography, and design elements combine to form an interface for your users to move through.

Footnotes

  1. 1 http://www.mezzoblue.com/tests/revised-image-replacement/
  2. 2 http://www.whaleofadive.com/misc/siir/about.php
  3. 3 http://www.mikeindustries.com/blog/sifr/
  4. 4 http://www.mikeindustries.com/blog/sifr/
  5. 5 http://www.mikeindustries.com/blog/sifr/
  6. 6 http://www.smileycat.com/miaow/archives/typography-for-headlines-2.php
  7. 7 http://www.smileycat.com/miaow/archives/typography-for-headlines-2.php
  8. 8 http://www.smileycat.com/miaow/archives/typography-for-headlines-2.php
  9. 9 http://www.markboulton.co.uk/journal/comments/five_simple_steps_to_better_typography/
  10. 10 http://www.markboulton.co.uk/journal/comments/five_simple_steps_to_better_typography_part_5/
  11. 11 http://ilovetypography.com/2008/02/28/a-guide-to-web-typography/
  12. 12 http://ilovetypography.com/2008/02/28/a-guide-to-web-typography/
  13. 13 http://www.webdesignerwall.com/tutorials/typographic-contrast-flow/
  14. 14 http://www.webdesignerwall.com/tutorials/typographic-contrast-flow/
  15. 15 http://www.smashingmagazine.com/2008/03/11/the-secrets-of-grunge-design/
  16. 16 http://www.painisgood.com
  17. 17 http://www.painisgood.com
  18. 18 http://www.subdued.net/
  19. 19 http://www.subdued.net/
  20. 20 http://www.exptypo.com/
  21. 21 http://www.exptypo.com/
  22. 22 http://gettingreal.37signals.com/ch09_Copywriting_is_Interface_Design.php
  23. 23 http://www.cameronmoll.com/archives/001266.html
  24. 24 http://www.cameronmoll.com/archives/001266.html
  25. 25 http://www.digital-web.com/articles/the_destination_matters_more_than_the_journey/
  26. 26 http://www.digital-web.com/articles/the_destination_matters_more_than_the_journey/
  27. 27 http://www.alistapart.com/articles/settingtypeontheweb
  28. 28 http://www.alistapart.com/articles/settingtypeontheweb
  29. 29 http://24ways.org/2006/compose-to-a-vertical-rhythm
  30. 30 http://24ways.org/2006/compose-to-a-vertical-rhythm
  31. 31 http://informationarchitects.jp/the-web-is-all-about-typography-period/
  32. 32 http://informationarchitects.jp/webdesign-is-95-typography-partii/
  33. 33 http://informationarchitects.jp/the-web-is-all-about-typography-period/
  34. 34 http://psdtuts.com/designing-tutorials/9-essential-principles-for-good-web-design/
  35. 35 http://psdtuts.com/designing-tutorials/9-essential-principles-for-good-web-design/
  36. 36 http://typetester.maratz.com/
  37. 37 http://typetester.maratz.com/

↑ Back to topShare on Twitter

Sean Hodge is the creative mind behind AiBURN, a weblog about design, creativity, inspiration and graphics.

Advertising

Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  1. 1

    Bart-Jan Verhoef

    April 23, 2008 8:41 am

    Good writeup! I’m often astonished to see how little attention type gets in webdesign, and fully agree that type should be considered the user interface. For that reason I belief any design should start with designing content, navigation and other type elements. It’s 2008, the web isn’t what it used to be 10 years ago, and we cannot get by anymore just designing templates with some random lorem ipsum placed in them, only to find out what content is going to be placed by the client just before launch. People visit sites for their content, and that’s what we should design (around).

    Happy to see you guys paying attention to this subject, it sometimes seems so underrated. Also, thanks for yet another mention of my site!

  2. 2

    some excellent points in there…

  3. 3

    Just looking for something like this, and BAM! Smashing has it all!

  4. 4

    This is a great post!, just what i need at the moment.

  5. 5

    Blimey.

    Great post. You guys keep coming up with the goods.

  6. 6

    One of the best posts about typography+webdesign I have read. Just great!

  7. 7

    really very good. thank you , this is the first time i post artivle here..

  8. 8

    Great post as always, smashing.

    <plug type=”shameless”>
    The Principles of Beautiful Typography
    </plug>

    :)

  9. 9

    Always good to learn more about typography. Content as UI specifically; often something people are always trying to attain but don’t really realize what it is they’re trying to do.

  10. 10

    Wow ! Exactly what I was looking for ! Thanks for this article.

  11. 11

    Good advice from a respected web designer or should I say analyst? Good analysis of web content is critical. I agree that content is key and should be used as the basline for site development rather than an after thought. I am rebuilding my site based on key content http://www.eye-web-design.co.uk

  12. 12

    Nice timing. I just started a new project and I sat ruminating typographic choices for a while before finding your article in my feed reader. Thanks!

  13. 13

    Typography is a VERY good thing.
    So is spelling: sIFR 2.0: Richt Accessible Typography for the Masses
    Never leave home without a proof reader…

    –hsm

  14. 14

    Every single post on Smashing is great, you guys are doing an awesome job!

  15. 15

    excellent article! thanks guys!

  16. 16

    A great article! I’ve been looking for a great reference article like this for months.

  17. 17

    The psdtuts principles of web design link has a thumbnail of Marius Roosendaal site ;]

  18. 18

    you may want to include information on sIFR 3, at http://www.novemberborn.net/sifr3.

  19. 19

    As always, a great post. Just what I was looking for!

  20. 20

    Great post as usual, thanks.

    Regarding #5. Treat Text as a User Interface – is there any site that will show the sort of CSS required to layout the text in that way? It looks so much better in the screenshot on the right it’s unreal.

    Thanks

  21. 21

    nice info… gr8…

  22. 22

    Dexterous SEO India (Search Engine Optimization) Company

    April 26, 2008 9:02 pm

    Ultimate article that excels through simplicity, this sort of article i am looking for to leverage my SEO work process.

  23. 23

    Great!
    This article is really good, very interesting and rich of information.
    Thank you very much.

    s

  24. 24

    webpixelkonsum

    May 3, 2008 7:27 am

    A great summary about typo in web to improve the usability. Thank you for your great work.

    Ralph

  25. 25

    Article would be even nicer if I could see all of the images. I presume you are using a CDN or something, because every second image comes from a different server to the rest, and fails to load.

  26. 26

    This is an excellent reference. I’m a beginning web designer too and this is a great resource.

↑ Back to top