10 Web Type Trends for 2012

You’ve learned the history and basics of web typography. But what are the major web type trends you should be aware of when working in web design? Look for these 10 trends in web typography to take us through 2012 and beyond.

web typography, tyler galpin

1. Typographic voice diversity

Look for websites where the typography is used to tell half the story. The web type on this portfolio site for a designer in Canada tells you a lot about his personality and style.

web typography, large body text

2. Larger font sizes

As screen resolutions increase, so should font sizes. Use 14px as a minimum for body copy. Jason Santa Maria’s website is a great example of this in action.

slab serif font, slab type, web type

3. Slab serif fonts

Slab serifs are great for the screen, providing easy-to-read text and a strong voice. Try the SlabText jQuery plugin—it’s even responsive!

letterpress, css3 text effects, shadow

4. Letterpress and other text effects

CSS3 allows you to create text effects to add emphasis to text without bold or italics. Line25’s tutorial on creating a letterpress text effect with CSS3 is a classic.

web typography, colors, web type adweek

5. Color contrast

Although controversial, varying contrast allows designers to further guide the viewer’s eye. AdWeek uses different colored headlines for various sections of its website, and doesn’t shy away from big type, drawing on web trend No. 2.

mixed weights typography, web typography, la wine agency

6. Mixing font weights

Web fonts can include multiple font weights, allowing designers to mix them together for typographic contrast. La Wine Agency does this really well.

scrolling website, one-page website, jessica hische

7. More space

The “above the fold” myth is dead. People scroll, so give your designs some breathing room. Many web designers are embracing the infinite page with creative designs that tell stories as you scroll, like Jessica Hische’s wedding website.

responsive web typography, fittext jquery plugin

8. Responsive typography

Typography can change to optimize for tablets and smartphones. The FitText jQuery plugin makes it easy.

handwriting fonts, google web fonts, web typography

9. Handwritten fonts

For maximum typographic voice, you can’t beat handwritten fonts. Google Webfonts has more than a hundred available for free to use on your own web projects.

10. Dingbats instead of images

Using dingbats allows you to change the color and size of icons with no loss of fidelity. There’s no shortage of free icon fonts available these days to use on your website.

A version of this article appeared in the July 2012 issue of HOW


3 thoughts on “10 Web Type Trends for 2012

  1. Pingback: Website Trend of 2012: Playing with Fonts | ChurchMag

  2. Pingback: Explore Your Web Font Options with Typecast | The Realn3ws Post

  3. Pingback: Type Trends 2012 « ALiMMSP125