Style:Typography

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 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:
Evidence Basis:
- Older studies for screen fonts relied on lower resolution displays than those currently being manufactured.
  - 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

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.

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 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 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)

Contents