Typography

Font Families

Determining the font you’re going to use is the first step to proper web typography. The most common method is to define the font family by choosing between serif and sans serif fonts. Remember, if you choose a specialty font, users who maintain their default browser settings are more likely not going to be able to see your font. It will likely display on their monitor in their default font setting.

Studies show that the for optimal readability on the web, a sans serif such as Verdana or Arial work best.

Font Size

Once you’ve set your font family, you’ll need to set the font size. Determining the size is based on information architecture and content hierarchy decisions made in the Planning Phase. You will need to distinguish between heading size, sub-heading and content font sizes. Create a style hierarchy and document it, so you can apply the appropriate CSS styling to it during the Build Phase. There are many units of measure you can use with CSS fonts.

Font Colors and Highlighting

Choose your font colors the same way you would any other colors on your site. Follow the color scheme that you have already established for the branding look and feel of the site.

Define font colors in your CSS during the Build Phase. Consider accessibility issues with any use of color, there must be clear contrast between font colors that appear over a background color.

Leading and Kerning

Adjustments to the general treatment of the spacing between letters, words and lines can make a visual impact to the page design. Kerning is the amount of space between letters, while leading is the amount of space between lines. Default setting work well most of the time, but adjustments can be made for the sake of design. Make the design choice, but implement font styling through CSS.

You can highlight your text with various font properties:

  • background-color: To highlight text with a colored background.
  • font-weight: Sets the boldness of a font.
  • font-style: Sets the italics of the font.
  • font-variant: Changes the font to small-caps.

Related Sites

0 Comments

Submit a Comment