Using Families of Fonts for Better Web Designs

Sometimes its challenging to figure out how to create a good mix of fonts in a design.

Too little variation and the design is less than interesting and too many fonts creates a jumbled, unorganized look.

I've been using font families lately (not to be confused with CSS font-family) - using variations of the same font in various weights and styles. This is an excellent and easy way to add interest and keep a cohesive design.

Laura Schoppa, Senior Designer
#Design | Posted

Sometimes its challenging to figure out how to create a good mix of fonts in a design.

Too little variation and the design is less than interesting and too many fonts creates a jumbled, unorganized look.

I've been using font families lately (not to be confused with CSS font-family) - using variations of the same font in various weights and styles. This is an excellent and easy way to add interest and keep a cohesive design.

You can build a whole site around a solid font family with 4-5 weights and styles - enough for headlines, navigation, quotes, form elements and more.

Luckily, new developments in fonts for the web, including Typekit, Google Fonts and @font-face opens up a lot of possibilities.

Here are a few font families that you can use in your web designs. While these show just 2 variations, most families have more.

Museo Sans Rounded can be used with @font-face. Comes in 6 styles. Font available at FontSpring.

Futura PT is available through Typekit. Comes in 10 styles.

Arvo is available through Google Fonts and comes in 4 styles.

Dosis

is available through Google Fonts and comes in 7 styles.

Laura Schoppa

Senior Designer