SpyreStudios

Web Design and Development Magazine

  • Design
  • Resources
  • Showcase
  • Inspirational
  • Tutorials
  • CSS
  • Resources
  • Tools
  • UX
  • More
    • Mobile
    • Usability
    • HTML5
    • Business
    • Freebies
    • Giveaway
    • About SpyreStudios
    • Advertise On SpyreStudios
    • Get In Touch With Us

10 Great Tips For Improving Your Web Typography

May 14, 2010 by Tom Walker 16 Comments

From the invention of the printing press in the 15th Century, to the creation and development of the Internet into the 21st, typography has evolved to reflect technological advancement to become both a science and an art form.

Once a specialist occupation, the digital age has opened typography to computer users and web designers. When creating pages and laying out text with other content there are several guiding principles that designers should bear in mind. Typography is a huge field of study, but this post brings together a handful of hints to help web designers improve their pages.

1. Font

Font
One of the most fundamental considerations when composing typography is the style of font to be used. The choice of typeface should reflect the tone of the content, and it’s usually best to choose a readable and unfussy font for the main body of text.

There are hundreds of fonts available to download for free from the Internet, so designers may choose something fancy for headings and sub-headings, but generally keep to something simple for the rest of the content such as Helvetica, Arial or Times Roman.

2. Size

Size
The next thing to think about is the size of text to be used throughout a website. It’s important to make the main body of text a suitable size so that it is large enough to be readable, while not becoming too big and ‚”shouty”. Generally, most text should be set between 12 and 16 pixels, with variations in headings and menus.

In the contemporary world of web design it is also important to bear in mind that users may be accessing websites on iPhones and other hand held devices, so text must be legible across a range of screen sizes.

3. Scale and Hierarchy

Scale and Hierarchy
Having settled on a size for the main body of text, the various parts of the content can be differentiated by adopting a uniform hierarchy of text sizes throughout a site. This means using a certain size for headings, a slightly smaller size for sub-headings and so on, but keeping to the same sizes on all pages to create consistency.

Using a typographic scale to define parts of content achieves this. For example, this scale could be 14 points for main body content, moving up through 16, 18, 21, 24, 36, 48, 60, to 72 points for the largest headers. Designers can create their own patterns of scale, but should stick to it rigidly on all pages.

4. Emphasis

Emphasis
It is sometimes necessary to emphasize a word or phrase in a text to draw the readers’s attention to an important element of the content. Using italics is one of the best ways to do this, but designers may also choose to employ capitals, bold text, underlining, changes in type size or font, or use different colours.

Whichever style is selected, it’s best to keep to a single means of emphasis through all pages to avoid confusion and clutter.

5. Measure

Measure
The measure is the length of a line of text, which for a single-column design should ideally be two to three alphabets long, around 40 to 80 characters. If the lines are too short then the text becomes disjointed, if they are too long the content loses rhythm as the reader searches for the start of each line. Many typographers consider the perfect measure to be 65 characters.

6. Leading

Leading
Leading is the distance between each line of writing, and is an essential component of a text’s legibility and general aesthetics. The choice of leading depth depends on the font used, type size and style, word spacing and length of measure.

Usually the leading should be between two to five points larger than the text size, but since the previously mentioned factors effect the ideal leading, a degree of experimentation may be necessary to achieve the desired appearance and readability.

7. Alignment & Grid

Alignment and Grid
A well-planned grid can form a solid foundation on which to design a website, with content laid out neatly and logically for accessibility and visual balance. Pages should be divided into a system of columns, rows, menus, headers, sidebars and footers, guiding the user’s eye smoothly to the important content and navigational tools.

8. Colour and Contrast

Colour and Contrast
A splash of colour can make a website design enormously attractive, but for large chunks of text it’s best to keep to the traditional combination of dark type on a light page.

Experimenting with dark backgrounds and light text can produce stylish results for headers or short phrases, and coloured text can be used to emphasize words or sentences. Long tracts, however, can be tiring and difficult to read with anything other than black on white or a similar combination. It is also important to bear in mind how well the design elements contrast with each other; lightly coloured text may look appealing but is difficult to read at length.

9. White Space

White Space
The white space is the negative space between objects in a page design, not always white, but the ‘blank’ parts that allow content to breathe. Minimal designs, with plenty of wide-open spaces are much more attractive and accessible than pages crammed with content, so at times it may become necessary to edit down to the bare essentials.

10. Break the Rules

Break the Rules
Finally, it should be noted that rules are there to be broken. Designers should be aware of the general principles of typography, and be bold enough to experiment and contradict the rules to produce innovative and beautiful web pages.

Your Turn To Talk

I hope you learned a thing or two about web typography from this article. Please take a moment to leave a comment below and tell us what to think and of course feel free to share your own tips and tricks!

lead image: sandbaum

Filed Under: Article, Typography

Comments

  1. darth says

    May 14, 2010 at 6:23 pm

    Great article. I wish more people were englighted on typography.

  2. wpBlast says

    May 14, 2010 at 6:35 pm

    Very Nice article. Typography can add so much to a webpage if it is done right. Lately I have been meaning to use @fontface to replace some of my fonts.

  3. Muhammad Ghazali says

    May 14, 2010 at 7:16 pm

    Great article, good job! I learned something after I read this article. Thank you.

  4. zikoon says

    May 14, 2010 at 7:17 pm

    thx dude for this article cause i have a problems with fonts so tht may help

  5. Greg says

    May 14, 2010 at 8:48 pm

    While working on the website of the company I work for, we tried our best to also maintain a vertical rhythm. Since you didn’t mention this in the article, I’ll quickly share my thoughts:

    Aligning to a baseline grid makes a lot of sense in some cases. We eventually discovered, though, that it really only matters for multi-column text. Aligning body text with sidebar text proved to be overly “fussy” and aesthetically incorrect– spacing out the lines artificially just to share the same baseline resulted in a bad-looking sidebar. As you said in the last point, gotta break some rules sometimes!

  6. Eko Setiawan says

    May 14, 2010 at 10:28 pm

    Really helpful…adding my knowledge to improve web typography
    Thanks…

  7. Erik Kubitschek says

    May 15, 2010 at 10:54 am

    Very attractive article, I just never get tired of Typography.

  8. W3Mag says

    May 16, 2010 at 5:40 am

    Thanks for the tips! Very useful!

  9. Ted Thompson says

    May 17, 2010 at 6:34 am

    Great guide, very helpful, thanks for putting together.

  10. Erwin says

    May 18, 2010 at 4:59 am

    Good Post! Wouldn’t hurt to give typography some more focus (on some sites). Cheers!

  11. Jordan Walker says

    May 19, 2010 at 9:45 am

    Thought provoking article, those are all great points to consider when improving typography.

  12. chris raymond says

    June 15, 2010 at 10:25 am

    Times Roman is NOT hinted for web use (in fact, neither is Helvetica). So I would suggest using Georgia, which was designed for screen display and is frankly, a lovelier font than Times Roman.

  13. ThomasP says

    June 16, 2010 at 5:04 am

    Hey, great post, thx!
    I was wondering if there’s a “perfect” ration between font-size and leading for the standard fonts like Times and Arial?

    Thomas

  14. Crystal Andus says

    July 17, 2010 at 7:14 am

    Hi Tom,

    You’ve shared some great tips.
    When implemented, these advices will surely offer a better readability.

    Glad to discover this site.

  15. Lime Factory says

    May 27, 2011 at 3:23 pm

    I love the last tip:) In my opinion – you learn a lot trying to understand basic rules to become a good designer but if you want to be the pro designer you must forget basics and make your own rules. But the most important thing is that to make your own rules you must know basic rules to break them. It’s very strange but it’s true. What do you think?

  16. Razvan says

    June 10, 2011 at 4:37 am

    Great article with many helpful advices. I think many people are just ignoring typography aspects when building websites and this is a huge mistake.
    As for fonts, I’m constantly using this website http://www.fontineed.com. Its just a suggestion but i hope it proves useful for those in looking for a good font.

Leave a Reply

Your email address will not be published. Required fields are marked *

Please prove you're human *

Recent Posts

  • How to Choose a Stunning Font Package for Your Brand
  • 31 Fresh Design Elements for Spring and Easter
  • 10 Templates for Music Concert Flyers
  • How to Build a Web Scraper Using Node.js
  • Best PHP Books, Courses and Tutorials in 2022

Archives

  • May 2022
  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021
  • May 2021
  • April 2021
  • March 2021
  • February 2021
  • January 2021
  • December 2020
  • November 2020
  • October 2020
  • September 2020
  • August 2020
  • July 2020
  • June 2020
  • May 2020
  • April 2020
  • March 2020
  • February 2020
  • January 2020
  • December 2019
  • November 2019
  • October 2019
  • September 2019
  • August 2019
  • July 2019
  • June 2019
  • May 2019
  • April 2019
  • March 2019
  • February 2019
  • January 2019
  • December 2018
  • November 2018
  • October 2018
  • September 2018
  • August 2018
  • July 2018
  • June 2018
  • May 2018
  • April 2018
  • March 2018
  • February 2018
  • January 2018
  • December 2017
  • November 2017
  • October 2017
  • September 2017
  • August 2017
  • July 2017
  • June 2017
  • May 2017
  • April 2017
  • March 2017
  • February 2017
  • January 2017
  • December 2016
  • November 2016
  • October 2016
  • September 2016
  • August 2016
  • July 2016
  • June 2016
  • May 2016
  • April 2016
  • March 2016
  • February 2016
  • January 2016
  • December 2015
  • November 2015
  • October 2015
  • September 2015
  • August 2015
  • July 2015
  • June 2015
  • May 2015
  • April 2015
  • March 2015
  • February 2015
  • January 2015
  • December 2014
  • November 2014
  • October 2014
  • September 2014
  • August 2014
  • July 2014
  • June 2014
  • May 2014
  • April 2014
  • March 2014
  • February 2014
  • January 2014
  • December 2013
  • November 2013
  • October 2013
  • September 2013
  • August 2013
  • July 2013
  • June 2013
  • May 2013
  • April 2013
  • March 2013
  • February 2013
  • January 2013
  • December 2012
  • November 2012
  • October 2012
  • September 2012
  • August 2012
  • July 2012
  • June 2012
  • May 2012
  • April 2012
  • March 2012
  • February 2012
  • January 2012
  • December 2011
  • November 2011
  • October 2011
  • September 2011
  • August 2011
  • July 2011
  • June 2011
  • May 2011
  • April 2011
  • March 2011
  • February 2011
  • January 2011
  • December 2010
  • November 2010
  • October 2010
  • September 2010
  • August 2010
  • July 2010
  • June 2010
  • May 2010
  • April 2010
  • March 2010
  • February 2010
  • January 2010
  • December 2009
  • November 2009
  • October 2009
  • September 2009
  • August 2009
  • July 2009
  • June 2009
  • May 2009
  • April 2009
  • March 2009
  • February 2009
  • January 2009
  • December 2008
  • November 2008
  • October 2008
  • May 2008
  • April 2008

Categories

  • Accessibility
  • Android
  • Apps
  • Art
  • Article
  • Blogging
  • Books
  • Bootstrap
  • Business
  • CSS
  • Design
  • Development
  • Ecommerce
  • Fireworks
  • Flash
  • Freebies
  • Freelance
  • General
  • Giveaway
  • Graphic Design
  • HTML5
  • Icons
  • Illustrator
  • InDesign
  • Infographics
  • Inspirational
  • Interview
  • Jobs
  • jQuery
  • Learning
  • Logos
  • Matrix
  • Minimalism
  • Mobile
  • Motion Graphics
  • Music
  • News
  • Photoshop
  • PHP
  • Promoted
  • Rails
  • Resources
  • Showcase
  • Tools
  • Tutorial
  • Twitter
  • Typography
  • Uncategorized
  • Usability
  • UX
  • Wallpapers
  • Wireframing
  • WordPress
  • Work

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

SpyreStudios © 2022