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
  • 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.

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) that is about 0.5cm
  • A suggested shade of the left margin-bar is 5%, in keeping with the border used in Code (see below)

Code

• Code should be monospace
• Code boxes should have a standard size 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