Designing Typography for the Modern Web

By / Sep 6, 2010 / Tips
shares

As web designers, it is our job to grow with the trends of the Internet. As new technology emerges, it’s our position to jump on board and see where it can take us. This includes trends all over the web, typography being a major player.

Many designers don’t consider type as a field of interest or focus. Ironically, typography is possibly one of the most important parts of our dynamic web. It helps deliver a website’s content to users from all over the world and it truly is an art to study.

I’ll be getting into a few concepts about typography for the modern web. Things haven’t changed too much since the previous years of web design, however many new techniques are being utilized and shared amongst the design community.

Styling Your Main Document’s Text Elements

Consider from a user experience perspective what your main elements of text may be. Of course you’ll need paragraphs and a few headings (h1-h3 mostly). You’d also want to style your links in a certain way, and maybe even include other elements such as blockquote properties.

All of these tags are useful when structuring your site’s content. These can all be styled through CSS properties in any web document with a large amount of precision. The main priority is to consider what each element represents and piece together a puzzle of how you want them to be displayed to your visitors.

Paragraphs are a good place to start as these will contain the bulk of your content. How do you think it’d be easiest for your readers to follow along? Many corporate and business websites use smaller font in paragraphs for a sophisticated look, but in the modern web things have changed.

Most paragraphs seen in blogs or social media sites today will use much larger font for paragraphs upwards of 16px-18px. This makes sense when you take into account the popularity of mobile users reading content on much smaller screens.

Separate Core Content from Headlines

Headings are also an interesting area to consider. You want them to stand out from your main text and be as scannable as possible. By this I mean your visitors should be able to quickly scroll down your page and check out each of your headings along the way with ease.

The best techniques in separating headings is styling each tier differently. Test out all sorts of colors and styles on your headings. Changing font type is another popular technique, for example styling paragraphs with Arial and larger headings with italicized Georgia.

When dealing with h1/h2/h3 elements you can generally get more creative than with simple paragraphs of text. This means adding text shadows, borders or unique underlines, or even messing around with font variants of big/small caps.

Creating a Stand-Out Hyperlink Design

Links are an essential part of any website. Unless your website home page is the only one on your entire site and goes nowhere else, you’re bound to have some hyperlinks somewhere.

What you have to consider here is not only how you want to style default links within your paragraphs or similar text, but how you want to style similar links used for navigation (header, sidebar, footer). Generally links in your paragraphs should stand out on their own. Funky colors and unique hover effects can take care of this nicely.

When specifying links elsewhere in your document you’ll want to remind yourself of the user experience perspective. A good example is with footer links as they don’t generally concern the masses of visitors to your site. They should be simple to read and out of the way, yet easy enough to scan and browse. Contrary to unique link styles in your paragraphs, outside areas work better with simple hover effects – an underline or light color change is perfect.

Utilizing Proper Line Height

Line height is a property many don’t consider when working to style typography. It’s a very important property set in your CSS which determines how much space in the grid is given between lines of text.

When styling elements of type try playing around with more/less white space. This can drastically change an entire design theme, especially within paragraphs. Adding height between lines of text makes scanning text much simpler. From a user’s point of view this is exactly what they’re looking for.

It also makes larger chunks of text seem more manageable as there’s room to breathe between each line.

Headings and other areas of lists or code can benefit from having their line height adjusted as well. Leaving room to breathe beneath and above these elements helps them stand out as foreground from your text. These elements become instantly noticeable as a user is reading through your page, making your content even simpler to browse at a glance.

Consider your Fonts for Mobile Devices

Sizing typography for the web can be tricky. You have to consider browsers such as IE6/7 and mobile devices displaying your text in unnatural ways. The simplest way to handle this is scaling your font sizes equally.

There’s a simple trick in fixing up your font sizes by setting your body element to have a 62.5% font-size. This brings down most fonts to unreadable sizes, but sets you up for a simple em sizing structure.

ems are units used in sizing font for the web, similar to pixels. They’re a great measurement unit to use as they allow for text to grow and expand naturally if your visitors resize the page. This is different from px as they aren’t resizable, and % values can be all over the place in different rendering engines.

By setting your body font-size property to 62.5% you essentially reset the fonts on your page to a scale of 10px. This makes working with ems easier as your font sizes will equate to 1/10th of the original. For example a paragraph with 12px font would be equally set to 1.2em. These also work great with line-height properties on text elements, too, as dynamic resizing is much more functional for those who need it.

Typography has many topics to consider when discussing the modern web. There are countless resources both online and in physical print dealing with these concepts. As a web designer typography should be a core focus during the design process.

If you’re also looking for inspiration there are many free font collections shared around. These can be fun to mess around with and integrate into your logos or concept artwork.

Consider browsing through CSS galleries or inspirational designs for further perspective into the world of typography. It’s a skill that doesn’t take too long to understand yet holds immense power in the hands of web designers.

About the Author

Jake Rocheleau is a social media enthusiast and Internet entrepreneur. He can be followed on twitter - @jakerocheleau His presence on the web can be found at JakeRocheleau.com.

20 Comments

  1. Alex
    September 6, 2010

    Thank you for this great article! In my opinion, Typography is the most important element of every website.

    Reply
  2. L1
    September 6, 2010

    That part about Em was great. I hope their will be a full tutorial/article about it.

    Reply
    • Jason
      September 15, 2010

      I second that!

      Reply
  3. gkl
    September 6, 2010

    Great points, thanks for sharing!

    Reply
  4. Jake Rocheleau
    September 6, 2010

    @L1 I’d love to do another write-up going in-depth about font sizing for the web, especially with ems. I’ll keep it as a consideration for the future

    Reply
  5. Edgar Leijs
    September 6, 2010

    Strong Web Typo = Better Usability / UX

    Reply
  6. dotintegral
    September 6, 2010

    Will the 62.5% font size trick give the same height (10px) independently to the system/browser DPI settings?

    Reply
  7. Yuva Designs
    September 6, 2010

    Great Post.
    Thanks for sharing.

    Reply
  8. Richard Slater
    September 6, 2010

    Recent follower of your RSS feed, good article and great to know about the 62.5% trick.

    Reply
  9. Chris Roberts
    September 6, 2010

    Great piece. Typography on the web has entered a new age. It should be noted that several of the most prolific and important font foundries have embraced web fonts. Monotype, Linotype and ITC are all currently available for web font usage via Fonts.com’s web font service (http://webfonts.fonts.com). These collections contain the most widely used fonts for corporate identity and branding. Fonts.com web fonts is the only service to support 40 major languages including Chinese, Japanese and Korean. Fonts.com Web Fonts now lists 4,752 fonts. 2,279 can be used for free. Over 7,000 will be available at end of beta.

    Reply
  10. Alex Flueras
    September 7, 2010

    Great article, typography is so important but very often neglected. Thanks for sharing.

    Reply
  11. Warren Jerzyszek
    September 7, 2010

    Hey really interesting post – I for one spend a lot of time deciding the right font for my website. I have considered several workarounds when using special font types in my websites such as sIFR, Cufon and @font-face. The reason I usually revert back to websafe fonts is because I find fixes like sIFR and Cufon to be quite bloated and unreliable when developing for some of the older browsers. Until there is a proper reliable method in place that works cross-browser I will continue to use good typography practices but only use web safe fonts in my commercial work.

    Reply
  12. niubi
    September 7, 2010

    I quite like the typography DubLi uses – it’s clean, simple and too the point. Too many people get mixed up with the design process and create fonts that look great – but readable? Nope.

    Reply
  13. logolitic
    September 7, 2010

    very useful informations, thanks!

    Reply
  14. Clipping Design
    September 7, 2010

    Typography is my favorite. I have huge collection of typography resources. Nice article about typography to apply web design. Thanks for share. :)

    Reply
  15. Laurence
    September 7, 2010

    Nice post. I like reading articles that cover the basics in how they apply with the latest trends in web design.

    Reply
  16. jDesai
    September 12, 2010

    For some very strange reason I tend to hate the ems and try to sort everything using px. What do you have to say about using hybrid layout (px and ems)? And the part about considering fonts for mobile devices was great.

    Reply
  17. Craig Pennings
    September 19, 2010

    Great article! Successful typography is key in great web design, but it’s really hard to fully master.

    Reply
  18. josh
    September 22, 2010

    Good article. Mobile is really changing how fonts and design elements are used.

    Reply
  19. Buzz
    December 5, 2010

    It’s great to see how far typography on the web has moved on… Nice article thanks for sharing.

    Reply

Leave a Reply