Narrowing Down Font Sizes

One of the biggest gripes I have with designers when implementing a design with HTML/CSS is font sizes. Often when presented with a PSD, it’s filled with dozens of font sizes and font variations, some slightly different than the rest. Upon implementing the design, however, I consolidate all font sizes in 8 different styles:

  • 1. Body Text (p, ul, ol, etc)
  • 2 – 7. Headings (h1, h2, h3, etc)
  • 8. Intro paragraph

These eight sizes, with the exception of modifier elements like small, sub, sup, etc, should cover all font sizes that appear on the site. This can easily be achieved with the help of a styleguide. A styleguide is something you and the designer can work on together to establish these elements and utilize them, and only them, in the design.

Creating this visual consistency and hierarchy helps the user understand the language of the site. It allows the user to visually interpret the level of importance of pieces of content. By making your content easier to read and interpret, you achieve a better user experience, that’s not bogged down by aesthetics, but rather a well-designed visual system.

Has your site fallen into this dilemma? Open up your compiled CSS file and grep for “font-size.” How many results turned up? I’d say anything over 25 and you need to consider having a talk with your designer. The number 25 might get skewed a bit if you’re using an icon font, but page through your results and see what you can uncover.

posted in: Best Practices, design, Front End Development
tagged: , ,

Comments are closed