Category Archives: Typography

Monitor color calibration

  • Photo Friday — Photo Friday is a simple web page that is designed to help you calibrate the brightness and contrast of your screen. Just adjust the monitor settings until the transition of tones from black to white is clearly distinguishable on the screen.
  • Online Monitor Test — Online Monitor Test is one of the better calibration websites out there. It is lined with a slew of interactive tests to help you adjust your monitor’s screen colors and to see if your monitor can produce smooth gradients. There are also tools for pinpointing damaged pixels and backlight bleeding, rendering the website one of the more robust web-based calibration tools to date.
  • The Lagom LCD Monitor Test Pages — The Lagom LCD Monitor Test Pages are handy, both online and offline. The website not only allows you to adjust various things such as contrast and response time, but it also allows you to download the images as a 120KB zip file, so you can check any monitor in-store that you are thinking about purchasing.

Basic typography rules

Basic ratios:

  • Heading font size ÷ Body copy font size = 1.96
  • line height (pixels) ÷ body copy font size (pixels) = 1.48
  • line length (pixels) ÷ line height (pixels) = 27.8
  • space between paragraphs (pixels) ÷ line height (pixels) = 0.754
  • characters per line: 75 to 85

Basic ratios: (Type size = font size)

Attribute Recommended value:
Paragraph width (max-width) = 30 (type size)                          (approx. 65 chars)
Leading (line-height) = type size + (2-5) pt
Vertical rhythm (margin bottom) = line spacing = line height = type size + (2-5)pt

Other rough guidelines:

  1. Either serif or sans-serif fonts are fine for body copy and headings, but sans-serif fonts are still more popular for both.
  2. Common choices for headlines are Georgia, Arial and Helvetica.
  3. Common choices for body copy are Georgia, Arial, Verdana and Lucida Grande.
  4. The most popular font size for headings is a range between 18 and 29 pixels.
  5. The most popular font size for body copy is a range between 12 and 14 pixels.
  6. The optimal number of characters per line is between 55 and 75, but between 75 and 85 characters per line is more popular,
  7. Body text is left-aligned, image replacement is rarely used and links are either underlined or highlighted with bold or color.

 

References:

https://www.smashingmagazine.com/2009/08/typographic-design-survey-best-practices-from-the-best-blogs