Skip to main content
Grauity provides a comprehensive typography system with tokens for font sizes, font weights, and font families.

​
Font Families

Grauity uses two primary font families:
TokenValueUsage
--font-family"Mona Sans", sans-serifDefault font for UI and content
--font-family-code"Fira Code", monospaceFont for code blocks and technical content

​
Usage

.text {
  font-family: var(--font-family);
}

.code {
  font-family: var(--font-family-code);
}

​
Font Sizes

Font size tokens provide a consistent typographic scale from 2px to 96px.
All font sizes are defined in pixels for precise control and consistency across browsers.
TokenValueTypical Usage
--font-size-2px2pxMicro text
--font-size-4px4pxTiny text
--font-size-6px6pxExtra small text
--font-size-8px8pxVery small text
--font-size-10px10pxSmall labels
--font-size-11px11pxSmall text
--font-size-12px12pxCaption, helper text
--font-size-14px14pxBody text (small)
--font-size-16px16pxBody text (default)
--font-size-18px18pxBody text (large)
--font-size-20px20pxSubheading
--font-size-24px24pxHeading 4
--font-size-28px28pxHeading 3
--font-size-32px32pxHeading 2
--font-size-36px36pxHeading 1
--font-size-40px40pxDisplay text (small)
--font-size-48px48pxDisplay text (medium)
--font-size-56px56pxDisplay text (large)
--font-size-64px64pxHero text (small)
--font-size-72px72pxHero text (medium)
--font-size-80px80pxHero text (large)
--font-size-96px96pxHero text (extra large)

​
Font Size Scale

The font size scale follows these progressions:
  • Micro scale: 2px, 4px, 6px, 8px, 10px
  • Small scale: 11px, 12px, 14px
  • Body scale: 16px, 18px, 20px
  • Heading scale: 24px, 28px, 32px, 36px, 40px
  • Display scale: 48px, 56px, 64px, 72px, 80px, 96px

​
Usage

/* Body text */
.body {
  font-size: var(--font-size-16px);
}

/* Heading */
.heading {
  font-size: var(--font-size-32px);
}

/* Caption */
.caption {
  font-size: var(--font-size-12px);
}

/* Display text */
.hero {
  font-size: var(--font-size-64px);
}

​
Font Weights

Font weight tokens provide a range from thin (100) to black (900).

​
Numeric Weights

TokenValueName
--font-weight-100100Thin
--font-weight-200200Extra Light
--font-weight-300300Light
--font-weight-400400Regular
--font-weight-450450Medium (custom)
--font-weight-500500Medium
--font-weight-550550Semi Bold (custom)
--font-weight-600600Semi Bold
--font-weight-650650Bold (custom)
--font-weight-700700Bold
--font-weight-800800Extra Bold
--font-weight-900900Black

​
Semantic Weight Aliases

For easier use, Grauity provides semantic aliases for common font weights:
TokenMaps ToValueUsage
--font-weight-medium--font-weight-450450Emphasized body text
--font-weight-semibold--font-weight-550550Subheadings
--font-weight-bold--font-weight-650650Headings and strong emphasis
The custom weights (450, 550, 650) are fine-tuned for the Mona Sans typeface to provide optimal visual hierarchy.

​
Font Weight Usage

/* Regular text */
.text {
  font-weight: var(--font-weight-400);
}

/* Medium emphasis */
.medium {
  font-weight: var(--font-weight-medium);
}

/* Semi bold */
.semibold {
  font-weight: var(--font-weight-semibold);
}

/* Bold heading */
.heading {
  font-weight: var(--font-weight-bold);
}

/* Heavy display text */
.display {
  font-weight: var(--font-weight-700);
}

​
Typography Best Practices

​
Hierarchy

Establish clear visual hierarchy by combining font size and weight: 
/* Primary heading */
.h1 {
  font-size: var(--font-size-36px);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family);
}

/* Secondary heading */
.h2 {
  font-size: var(--font-size-28px);
  font-weight: var(--font-weight-semibold);
  font-family: var(--font-family);
}

/* Body text */
.body {
  font-size: var(--font-size-16px);
  font-weight: var(--font-weight-400);
  font-family: var(--font-family);
}

/* Caption */
.caption {
  font-size: var(--font-size-12px);
  font-weight: var(--font-weight-400);
  font-family: var(--font-family);
}

​
Emphasis

Use font weight to create emphasis without changing size: 
.text {
  font-size: var(--font-size-16px);
  font-weight: var(--font-weight-400);
}

.emphasized {
  font-size: var(--font-size-16px);
  font-weight: var(--font-weight-medium);
}

.strong {
  font-size: var(--font-size-16px);
  font-weight: var(--font-weight-semibold);
}

​
Code Blocks

Always use the monospace font family for code: 
.code {
  font-family: var(--font-family-code);
  font-size: var(--font-size-14px);
  font-weight: var(--font-weight-400);
}

.code-heading {
  font-family: var(--font-family-code);
  font-size: var(--font-size-16px);
  font-weight: var(--font-weight-600);
}

​
Responsive Typography

While the tokens themselves are fixed, you can create responsive typography by changing tokens at different breakpoints: 
.heading {
  font-size: var(--font-size-24px);
  font-weight: var(--font-weight-semibold);
}

@media (min-width: 768px) {
  .heading {
    font-size: var(--font-size-32px);
  }
}

@media (min-width: 1024px) {
  .heading {
    font-size: var(--font-size-40px);
    font-weight: var(--font-weight-bold);
  }
}

​
React Component Example

import styled from 'styled-components';

const Typography = {
  H1: styled.h1`
    font-family: var(--font-family);
    font-size: var(--font-size-36px);
    font-weight: var(--font-weight-bold);
    color: var(--text-emphasis-primary-default);
  `,
  
  H2: styled.h2`
    font-family: var(--font-family);
    font-size: var(--font-size-28px);
    font-weight: var(--font-weight-semibold);
    color: var(--text-emphasis-primary-default);
  `,
  
  Body: styled.p`
    font-family: var(--font-family);
    font-size: var(--font-size-16px);
    font-weight: var(--font-weight-400);
    color: var(--text-emphasis-primary-default);
  `,
  
  Caption: styled.span`
    font-family: var(--font-family);
    font-size: var(--font-size-12px);
    font-weight: var(--font-weight-400);
    color: var(--text-emphasis-secondary-default);
  `,
  
  Code: styled.code`
    font-family: var(--font-family-code);
    font-size: var(--font-size-14px);
    font-weight: var(--font-weight-400);
  `,
};

export default Typography;

​
Source Files

  • Typography Tokens: ui/themes/GlobalStyle.ts (lines 141-182)
  • Font Size Stories: stories/atoms/Font/FontSize.stories.tsx
  • Font Weight Stories: stories/atoms/Font/FontWeight.stories.tsx

Build docs developers (and LLMs) love

Get started for freeTalk to us