Style:Typography

Golden Ratio of Proportionality

This resource is summarised for our purposes here and pertains to Line length, Line height and Font Size:

• The Golden Ratio is approximately = 1.618
• Line height increases with increasing font size, and increasing line length.
  • Landscape view has long line lengths
  • Portrait view has short line lengths
• The screen orientation should be sensed to determine optimal line width: use media queries.
• Font style will have implications on perceived line widths, as stunted fonts versus tall fonts produce a different overhead whitespace.

See Line Height versus Line Width at pearsonified.com for a thumbnail guide to font size / line height selection.

• The same website provides a calculator:

See Typography Calculator

General Guidelines for Font Choice

• The actual font face chosen is a matter of taste, practicality and evidence basis
• Taste:
  • The current fashion is to use sans-serif fonts, however with increasing display desity and the fact that sans-serif has been in vogue a long time, this fashion is set to change back to serif
  • Titles should continue to be sans-serif, as we are a tech / geek oriented site and this font choice has been usual in such circles for many decades.
• Practicality:
  • Old screen displays come in at around 96 pixels per inch
  • New screen displays come in at 200+ pixels per inch:
    • Smartphones exceed 300 pixels per inch
    • Retina and similar high resolution displays are 250+ pixels per inch
  • Web browsers are now re-interpreting pixel and point sizes to make sure that fonts are not impossibly small on high resolution displays
    • This is bad because no two web browsers are using the same methods for this fudge factor
    • We therefore need to start using a more practical methods than px and pt for size definition. The use of em is probably the best option now.
• Evidence Basis:
  • Older studies for screen fonts relied on lower resolution displays than those currently being manufactured. Their validity is now doubtful.
    • A Swedish study by Julia Barrantes and Elahe Jalili Baleh showed (at 96 pixels per inch):
      • 80 characters per line is faster to read than 40
      • Times New Roman is much more readable than Verdana at equal pixel size
      • Arial is somewhat more readable than Verdana

General Guidelines for Styles

Drop Caps

• Drop-caps will not be used, as we are not aiming for magazine style and we do not consistently have long articles. If used, Drop caps should only be used in the top article in any given page, never in the lower half of a page.

Block Quote

• Blockquotes should be indented, approx 0.50cm from the left justification of normal text, however in fact this should be some fixed ratio of line height.
  • However to maintain tidy left flush design, a tick but lightly shaded vertical rule (3.30 pt thickness, for example) should run along the left margin
  • Text should be approximatley 0.5cm justified from the vertical rule
  • A suggested shade of the left margin-bar is 5%, in keeping with the border used in Code (see below)
• Using the vertical rule allows blockquotes to be nested. Over-nesting should be avoided and prevented, as it begins to be ugly beyond the 2nd tier.

Code

• Code should be monospace
• Code boxes should have a standard maximum height and generally have automatic vertical and horizontal scroll-bars
• Code could be in a very lightly shaded (eg: 2.5%) box, with a hairline border of twice the weight (eg: 5% shade).
• Text should have equal padding around it, about half the size that of block quote

Colour

• Colour should be used very sparingly
• If any colour is used, it becomes a method of branding the project and should conform to the overall skin of the site
  • Only one hue apart from black should be use in text formatting and this should be a named colour, having a standardized ratio of RGB.
  • The only possible exception to this rule is marking links as having been followed. In this case, possibly a grey shade is best, or the matched color to the chosen hue from a recognized color wheel (ideally one intended for a two tone design)