CSS Typografy

https://www.youtube.com/watch?v=agbh1wbfJt8

Several fields:

Caligraphy: Escribir a mano con buena letra (focus legibilidad)
Lettering: Escribir a mano con letra artística (focus composición)
Typography: Use of premade definitions of letters

Several items:

TypeFace: the design of a collection of characters
- ie: Helvetica, Futura...
Font: Specific embodiment of a specific weight, witdh or style of a typeface
- ie: Helvetica bold 10pt

Goals:

Legibility: How easy is to identify a character in a given typeface.
Readability: How easy is to read because how the typefaces are used. Spacing between letters, words, lines, paragraphs...
Accessibility: How adapted to diferent functional abilities of the readers
Scanability: How it eases the read as blocks or locate random content.

Font face features affecting Legibility:

Baseline: Serves as common reference for reading line where the lines rest.
Cap-height: Height of the capital letters from the base line.
X-height: The height of most lowercase, the higher the more legible
Descender/ascenders: Letters that go down the baseline
Descender: Letters that go down the baseline: q, p, g...
Ascender: Letters that go up of the x-height: d, b, l, t...
Matching Cap-height and ascenders might affect readability: Ill.
Serifs: adornations of the endings of the main traces of the letters, might help readibility
- sans serif: a font that does not have
Stroke contrast: diference in stroke thicknes depending on the orientation
Counters: closed or semi-closed negative shapes. The smaller the harder to read.
Adornments: Might distract from the character identification
Density, quantity of ink in the paper
Weight: both extreme light and extreme heavy weights are hard to read

Text features affecting Readability:

Type size: too small is hard to read
Type case: long text in all caps is hard to read
Line spacing (leading): Distance between baselines.
Paragraph spacing: Added space between lines in different paragraphs (must be added to the leading)
Long lines: (>70chars) hard to follow and changing line.
Short lines (<45 chars) interrupts too often the reading flow.
Color Contrast: wcag 4.5:1 contrast
Color blindnes (Red-Green, Blue-Yellow)
- Use browser tools to simulate it

Typefaces genres

Serif
- Humanism (Janson, Kennerly Centaur):
  - First printed works 1450
  - diagonal stress
  - small x height
  - caligraphic
  - unrefined serif
- Old-style (Palatino):
  - 15 Century
  - more x height
  - serifs are wedge like
  - less caligraphy style
  - greater
- Transitional (Baskervile, Bookman) 18th cnetury
- Didone (Bodani, Didot) late 18th
  - hight contrasts (thin horizontal
  - classy
  - Flat thin lines as serif
- Slab (Rockwell, Clarendon, Egyptienne)
  - Thick slab-like serif
  - Used in headers because the 'look at me'
Sans Serif
- Grotesque (Venus, News Gothic, Franklin Gothic, Akzidenz-Grotesk)
  - early 19th (no sans, before that)
  - low contrast
  - low cap height (used in titles with many caps)
- Geometric (Futura, Gotham)
  - 20s Alemania (Futuristas)
  - Based on geometric shapes (circles, squares, straight lines).
  - lowercase a, as a circle with a straight line adornation on the right
- Neo grotesque (Helvetica, Univers, Folio, Unica, Roboto. San Francisco (SF))
  - 50s (Modernistas)
  - Thiner and simpler than Grotesque
- Humanism Sans (Verdana, Tahoma, Trebuchet, Droid Sans, Lucida Grande)
  - Inspiration on the classical roman letters for capitals.
  - Inspiration on the italic script
  - Uppercases from Monumental Roman
  - swashes (decoracion exagerada)
Scripts
- Formal:
  - Based on scripts of writing masters from 17th and 18th centuries
- Casual:
  - Modern script leters
  - If constrast, simulates the writting device
Display
- Decorative: Headers, Designs...

Resumen historico: https://www.youtube.com/watch?v=WVfRxFwVHQc

Numbers:

Old style figures: Go down the baseline, good for read
Lining figures: Same height and base
Tabular figures: Same width so that digits are aligned (versus proportional figures)

Target users

Monospace: designed for typerwriters but now used by developers, alignment of tabular data

Fix vs fluid layouts: Magazine is fix layout, while a web might depend on the device or the size or the window.

Font formats:

OpenType (.otf): Recommended format
TrueType (.ttf): Former standard, missing features of otf
EOT (.eot): Microsoft, just for IE
WOTT (.wott): Web forms compressed
WOOT 2 (.wott2): A more compressed version, not fully supported in ie
Scalable Vector Graphics (.svg):

Utility:

Body typeface: La que se usa como base del texto denso. Focus en legibilidad.
Display typeface: la que se usa para cabeceras, en tamaños grandes. Focus en expresividad, pero sin descuidar tampoco legibilidad.

Styles:

Faux bold: is done by increasing the stroke width, this can be distort
Faux italic: it is done by obliquing or slanting the font, this might distort the tone

Gradients of weight: thing, light, regular, semi-bold, bold, extra-bold

Tex size:

Horizontal space

Measure: how many characters per line (45-75 ch per line to be readable)

Multiple columns can opt for the 45-50 smaller lines.

Tracking/Letterspacing: - Sparse tracking - Condensed vs Expanded fonts - Reduce the header tracking slightly 3-5% - This gives the headers more impact - Keep the track of body, normally is set to - Increase tracking in smallcap or uppercase

Kerning: horizontal overlap between letters depending on the shape: TAV
Ligatures: some letters fuse when they are closed: fi fl

Vertical space

Leading (line height, line spacing): distance between succesive base lines
A good one would be a 150%.
For headings it won't work, should be reduces
Interparagraph space

Floating heading:

Design concepts

Hierarchy

Guide the reader towards what it is important. Where to begin and where to continue. Use size, weigth, color

Reduce to a couple of typeface using complementary styles.