A list of some good, basic, easy to implement practices.
- Set body copy first, and make sure you set it relative to REM (so we can make other measures on our site relative too).
- Acceptable sizes for body copy range from 12-21px. When in doubt, use 16px.
- Pick a scale, and let that set the sizes for your headings.
- Enforce line lengths of 75 characters, max. 45 is a good character count
- Line heights for body copy will range between 1.2 and 1.55, if using acceptable line lengths.
- on larger screens and for larger type (19-22px), line heights between 1.6-2 become useful.
- The longer the line length, the taller the line height
- Use the regular variation and regular weight of a font for body copy, unless there’s a compelling reason not to.
- Establish distinct, clear, and consistent anchor styles
- Unless there’s a compelling reason not to, design for your body copy to be dark gray as the base color. If you want to use completely black text, try using an off-white background.
- Avoid using light text on a dark background for body copy (though this is just fine for buttons, calls to action, and navigation elements where there’s less to compete with)
- Always check to see that your color choices are WCAG compliant (AA is a 4.5:1 ratio).
- Make sure there’s enough variation between your heading styles that a user can tell what is an H1, an h2, etc. at a glance
- Reserve H1’s for page titles
- Header sizes can get quite large but most H1s range from 30px to 72px.
- Line heights for headers generally range from 1 to 1.4 – the bigger the Heading size, the smaller the line-height.
- As screens get smaller, both the size of the headings and the line heights ought to shrink.
- use the equation of (element size * line-height) + margin = multiple to establish a baseline grid height
- When every element that you’d use in an article has a multiple that is divisible by the baseline grid height, you should have vertical rhythm for the majority of your content.
- Keep your font kits to 5 total variations or less, or 100kb or less.
- Use web fonts to ensure a consistent, attractive and meaningful design effect.
- Even if you use a “system font” instead of web fonts, set type with care and be aware your design may vary from device, browser, and operating system.
- Consider using a font loading strategy, and when I say to consider, I mean, implement a font loading strategy.
- Use a fallback font. You don’t need to go overboard here, 2-3 fonts, max.