Additional Design Rules With Typography

Points

• Fundamental building block of typography - character
• Fundamental building block of character - point
• Point - default measurement of typography (unit of size)
  • translates to 1/12th of an inch
  • 12 points = 1 inch
• 1 pixel = 0.75 points
• 1 inch = 12 points = 16 pixels

Size - EM and REM Model

Differentiate between titles, subtitles and paragraphs

• EM = ~Equal Measure
• "EM sets size of character equal to size of the font"
• Update with respect to relative to the font-size of the parent element
• If no parent size is set, it falls back to the browser's default (usually 16px).
• so if my default size = 16px = 1em
• If I want heading to be twice as much as my paragraph font size => set as 2em
• REM - Root EM
• Update font scaling with respect to ROOT of HTML File (root css element)

Boldness

• Use boldness (high weight) for titles and buttons
• Use lightness for labels, paragraphs and points

Guiding lines

• ![[Pasted image 20250422194005.png]]
  
• Baseline - Characters are written on the baseline
• ![[Pasted image 20250422193519.png]]
• Capline - Determines Max Height of a character
• ![[Pasted image 20250422193628.png]]
• Large diff b/w baseline and capline = more luxurious
  • Used in fasion magazines, high end clothing (Vogue, Calvin Klein)
• xheight - Determines Max Height of a lowercase character
• ![[Pasted image 20250422193857.png]]