Typography

Typography components use specific conventions around unit handling, margins, and trim. The current implementation works because we never use margins in CSS for anything other than typographic styles.


Creating new typographic styles

Leading trim is set using Capsize CSS. Capsize provides font-size, line-height, and margin styles for a given font. This allows text to be sized according to the height of its capital letters, while trimming the space above capital letters and below the baseline.


To generate CSS rules with Capsize:

  • Capsize “Font Size” is set to the font-size in Figma
  • Capsize “Leading” is set to the line-height in Figma <br>

Rules

  • Font sizes are always set with rem values for accessibility purposes. When a user adjusts their default font size in their browser settings, relative units are affected, where as pixel values are not.