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

Why do Golden Ratios work for visual appearance?

• The brain is geared for nature, in which natural logarithms and other well known patterns such as the Golden Ratio, are ubiquitous.

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
• Microsoft, based on their studies, have retired Verdana and Arial in favour of the Calibri family of fonts
  • This is a sans-serif font but differs from the others in that it is thinner in points to become lighter, which the studies showed improves readability.
• Neuroscience gives a lot of insight as to why some fonts and visual layouts are better than others
  • The retina has nearly all of its resolution concentrated in the centre of vision, where there is maximal colour and contrast discernment. The size of this area is small, about the size of two thumbs in front of you, arms outstretched.
    • The significance of this is that the eye takes in a certain line-length before it must flick across to the next set of text. If the text is tiny, the eye must rest in one place for longer while the cortex processes the information before it can flick across, and it is likely to flick across a smaller distance if the text is small (eg: sitting far away, or text too small). The reader will subconsciously adjust the distance from eye to page depending on the text size and display width. If there is a great mismatch between text size and display width, the processing work is too great, which is interpreted as discomfort.
    • This is the reason why studies show consistency in their results on readability. The evidence is believable because the mechanism is well understood.
  • The peripheral vision is dedicated to motion detection and lacks colour or detail. The perception that peripheral vision is complete is an illusion, as the brain invents the colours and textures of your peripheral vision based on experience and what has been captured in the central vision.
  • The blind spot (upper-outer vision) is necessary due to the blood supply to the retina, and is located such that the opposite eye can compensate for it, but not always.
  • The eye enhances what you see by center-surround antagonism:
    • Bright and dark shade is sent to the visual cortex, which processes the signal
    • If the contrast between bright and dark is low, the cortex amplifies the difference to enhance edge and texture detection
    • If there is a lot of shadow and many lines and details, the visual cortex has to work harder to process this information and make sense of it.
    • On the other hand, the visual cortex of primates is adapted to detecting vertical and horizontal lines and their intersections over lines or curves in other directions
  • The accessory visual cortex interprets shapes. The harder this is, the more work it takes to read.
    • Most of advanced readers recognize words as shapes rather than reading individual letters. This is aided by the use of familiar fonts which give a regular shape for a given word.
    • Placing serifs on letters enhances the uniqueness of their shape and this is why serif text is more readable. However modern taste is for simplicity and minimalism, and older displays handled serif text poorly, which is why sans-serif text is largely used.

Lessons

• Minimal lines, shades and distracting images should be used, to aid focus on the content (text) of the site.
• Font choice should be a compromise between aesthetics and readability. It is for this reason that, as displays became more photo-realistic, Microsoft chose Calibri, as it borders on being a serif font in many respects, but is recognized as sans serif. Microsoft's research in font readability has, at least until recently, been ahead of the others.
• We should consider returning to the use of a minimal serif, or borerline sans-serif font, rather than Verdana which is a classic sans-serif font and arguably a bit dated.
• As fonts are very inexpensive (less than $100) we could consider buying a font that suits our needs.

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)