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.

HOW TO KNOW WHAT FONTS TO USE:

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.

MOOD BOARD:

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 Styletil.es.  Another great resource to visually help you see the fonts before you put them on your style guide is the font combinator.

COLORS AND BACKGROUND TEXTURES:

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