Web Design Ideas: Type-Centric Designs

v8223_wdib3_coverEditor’s Note: This article on using type in web design is excerpted from The Web Designer’s Idea Book volume 3 by Patrick McNeil. We’re keeping Patrick quite busy these days; in addition to his HOW Design University independent study courses on interactive design and coding for designers, he’ll be presenting at HOW Design Live in June. 

Given the explosion of options for using typography in web design, it should come as no surprise that many a designer has opted to create type-centric website designs.

Here’s a collection of gorgeous web design examples that features type as the central focus. Clearly, all of these sites have some supporting elements beyond the text, but for the most part, the style of the site is predominantly contained in the typography.

The personal site of Chris Davis (below) is a great example of this. Though the site has some supporting design elements, the majority of the layout is focused on the text. It will not come as a surprise to find that the site makes heavy use of @font-face to embed custom fonts into the page. After all, a site focused on its elegant type is likely to use distinct fonts as a technique for establishing a unique look and feel.

WDIB excerpt Chris

An even more type-centric example can be found at Viljamis.com (below). This design features next to nothing but text. It’s amazing just how unique the design is considering it is almost entirely type based. And, of course, all of the text in the page (sans the logo) is live, editable text rendered using embedded typefaces.

WDIB excerpt_Responsive Design


Creative director and designer Trent White used script typographical elements to give sophistication and style to his otherwise image-heavy portfolio site. Note the stylized ‘t’ that serves as the search button.WDIB excerpt TWhite

One huge perk to type-centric design, especially when it is all live text (as in not rendered using images), is that it can be adapted very easily to a wide variety of layouts. Remember, responsive design seeks to format a page for a given device. Text-based layouts are particularly flexible and can be a great place to start when venturing into this territory.

HOWU Web TypographyWant to go further with fonts? Check out the HOW Design University Web Type course with Patrick McNeil! 

And don’t forget about MyDesignShop.com, where books, webinars and other materials live to scratch your interactive (font) itch.