Fonts, Moods, and Textures on the Web

Transitioning from a print designer to a web designer is never easy.  One thing that is different are fonts.  Aren’t web fonts and print fonts the same?  No!  In the web, serif fonts should be headlines and sans serif are more commonly used for body fonts.  Why?  In the web, unlike in a printed text in a book, san serif fonts are easier to read as many browsers “render” the serif fonts differently.


After knowing what types of fonts you should use, the next step is to start “pairing” fonts.  Common practice is to pair sarif and sans serif.  Great articles to read about this idea in more depth can be found through Web Tuts’ Beginner’s Guide to Pairing Fonts.  Also, a great article about pairing Google Fonts can be found from Design Shack.  Another great, but site you have to pay to use their fonts is TypeKit. They have a great blog that shows some great font pairings using their fonts.


You can now test your fonts together and put them into your “mood board” , “style guide” , or whatever you use to create your visual mockup of your site.  A great site to use to help you create this is  Another great resource to visually help you see the fonts before you put them on your style guide is the font combinator.


This is another post that needs to be written, but three quick resources to get you going can be found at Adobe’s Kuler, Color Lover’s website trends, and for cool background textures, check out Subtle Patterns.

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>