Difference between revisions of "Style:Typography"

From SoylentNews
Jump to: navigation, search
(Created page with "=== Golden Ratio of Proportionality === [http://www.pearsonified.com/2011/12/golden-ratio-typography.php This resource] is summarised for our purposes here: * Long line length...")
 
Line 1: Line 1:
 
=== Golden Ratio of Proportionality ===
 
=== Golden Ratio of Proportionality ===
[http://www.pearsonified.com/2011/12/golden-ratio-typography.php This resource] is summarised for our purposes here:
+
[http://www.pearsonified.com/2011/12/golden-ratio-typography.php This resource] is summarised for our purposes here and pertains to '''Line length, Line height and Font Size''':
* Long line lengths require wider line widths
+
* Line height increases with increasing font size, and increasing line length.
 
** Landscape view has long line lengths
 
** Landscape view has long line lengths
 
** Portrait view has short line lengths
 
** Portrait view has short line lengths
 
* The screen orientation should be sensed to determine optimal line width: use media queries.
 
* 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.
 
* Font style will have implications on perceived line widths, as stunted fonts versus tall fonts produce a different overhead whitespace.
 +
See [http://http://www.pearsonified.com/wp-content/uploads/2011/12/line-height-vs-line-width.png Line Height versus Line Width] at pearsonified.com for a thumbnail guide to font size / line height selection.

Revision as of 03:44, 29 March 2014

Golden Ratio of Proportionality

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

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