100-days-of-design

View project on GitHub

Day 7 - Typography


Photo by Kelly Sikkema on Unsplash

Font

  • a collection of letters, numbers, punctuation, and other symbols used to set text content.

Typeface

  • also called font family

Serif

  • when extra stroke is added to the end of the vertical and horizantal lines of a letterform
  • e.g Times New Roman, Georgia

Sans Serif

  • without the extra stroke in Serif
  • e.g Arial, Helvetica

Meanline

  • imaginary line that rests on top of the body of lowercase letters

Baseline

  • imaginary line upon which the characters rest

X-height

  • space between the baseline and the meanline

Ascender and Descender

  • Ascender is the part in the lowercase letters that extends above the x-height
  • Descender is the part in the lowercase letters that extends below the x-height

Tracking / Letter Spacing

  • spacing between all the characters of a font
  • looks pleasant when selected properly

Kerning

  • horizontal spacing between two consecutive characters

References

  1. https://xd.adobe.com/ideas/process/ui-design/typography-in-ui-design/
  2. https://careerfoundry.com/en/blog/ui-design/typography-ui-design/
  3. https://www.canva.com/learn/typography-terms/
  4. https://trydesignlab.com/blog/20-typography-terms/
  5. https://www.monotype.com/resources/studio/typography-terms