EmilyUI

Typography

Define typography tokens once and generate readable, consistent text utilities.

Typography config model

Keep typography split into family, weights, and a named size scale. This gives predictable class naming and cleaner content design decisions. 

{
  "fontFamily": {
    "heading": "lexend",
    "body": "inter"
  },
  "typography": {
    "fontWeights": {
      "normal": 400,
      "medium": 500,
      "semibold": 600,
      "bold": 700
    },
    "fontSizes": [
      { "name": "sm", "value": "14px", "lineHeight": 1.5 },
      { "name": "base", "value": "16px", "lineHeight": 1.65 },
      { "name": "lg", "value": "18px", "lineHeight": 1.65 },
      { "name": "xl", "value": "20px", "lineHeight": 1.4 }
    ]
  }
}

Generated utilities

font-heading font-body
text-sm text-base text-lg text-xl
font-medium font-semibold font-bold
leading-tight leading-relaxed
tracking-tight tracking-wide

Hierarchy guidance

  • Body copy should prioritize contrast and line height over decoration.
  • Headings should differ by scale and weight, not color alone.
  • Use tracking and uppercase sparingly for labels and metadata.
  • Keep long-form docs around 60-75 characters per line when possible.

Recommended content mapping

Page title: text-5xl font-bold tracking-tight
Section heading: text-2xl font-semibold
Body copy: text-base leading-relaxed
UI label: text-xs font-semibold uppercase tracking-wide
Meta note: text-sm text-neutral-60

Review checklist

  • Heading and body contrast remains readable on all surfaces.
  • Paragraph spacing is consistent across docs pages.
  • No page relies on one-off font-size overrides to fix layout issues.
  • Interactive text has clear focus and hover states.

Next step

Continue to Variants to apply responsive and interactive behavior cleanly.