Codeschool Font Guidelines Design

a.md

General Guidelines

Fonts

Serif

• Humanist Serif good for Journalism or Historical
• Transitional Sefir good for Traditional Acedamia and Legal
• Modern Serif good for Arts and Culture
• Eqyption (Slab Serif) good for Marketing and Promotional

Sans Serif

• Humanist Sans-Serif good for Government or Educational
• Traditional Sans-Serif good for Technology or Transportation
• Geometric Sans Serif good for Science or Architecture

General rule when mixing, either don't change the font at all, or change it a lot. This avoids fonts 'clashing' due to being too similar. A serif font paired with a sans serif font usually creates a very complementary difference in look and style.

Line Height

Good leading is about 120-150% of the body size. So line-height: 1.5;

CPL (Characters per line)

50-70 CPL for desktop 40-45 CPL for mobile

To acheive this you would lower the font-size for mobile.

Font Sizes

For the headline, use 200-300% of body size.

For the subheader, use 150% of the body size.

The navigation text should be the same as the body text size.

For the body, 16pt is usually a good starting point.

For the byline, use 75% (or 2-4px smaller) of the body size.