Typography Cheatsheet

Font Shorthand

/* font: style variant weight size/line-height family */
font: italic small-caps 700 1.5rem/1.6 'Inter', sans-serif;

/* REQUIRED: size AND family */
/* OPTIONAL: style variant weight (in that order, before size) */
/* line-height: after size, separated by / */

---

font-family Stack Templates

/* Modern system UI */
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

/* Geometric sans (Inter-style) */
font-family: 'Inter', 'DM Sans', 'Manrope', system-ui, sans-serif;

/* Classic serif */
font-family: 'Playfair Display', 'Lora', 'Georgia', serif;

/* Monospace / code */
font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', ui-monospace, monospace;

/* Apple-first */
font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;

---

font-weight Reference

Value	Name	Variable Font
100	Thin	✅ Any value 1–1000
200	Extra Light
300	Light
400	Regular (normal)
500	Medium
600	SemiBold
700	Bold
800	ExtraBold
900	Black

---

font-size Units Guide

Unit	Relative To	Use Case
px	Screen pixels	Fixed — avoid for body/heading
rem	Root (html) font-size	Use for all text ✅
em	Parent's font-size	Use for spacing relative to text
%	Parent's font-size	Avoid — same as em but confusing
vw	Viewport width	Fluid text (combine with clamp)
clamp(min, ideal, max)	Dynamic	Best for headings ✅

Base font size: don't set px on html/body — use % or rem from default 16px:

html { font-size: 100%; }   /* 16px — browser respects user preference */

---

Fluid Type Scale (Copy-Paste)

:root {
  --text-xs:   clamp(0.75rem,  0.6rem  + 0.3vw,  0.875rem);
  --text-sm:   clamp(0.875rem, 0.75rem + 0.4vw,  1rem);
  --text-base: clamp(1rem,     0.85rem + 0.5vw,  1.125rem);
  --text-lg:   clamp(1.125rem, 0.9rem  + 0.75vw, 1.375rem);
  --text-xl:   clamp(1.25rem,  1rem    + 1vw,    1.75rem);
  --text-2xl:  clamp(1.5rem,   1.1rem  + 1.5vw,  2.25rem);
  --text-3xl:  clamp(1.875rem, 1.2rem  + 2.5vw,  3rem);
  --text-4xl:  clamp(2.25rem,  1.5rem  + 3vw,    4rem);
  --text-hero: clamp(3rem,     2rem    + 5vw,    6rem);
}

---

line-height Guide

Value	Effect	Use
1	Same as font-size	Headings (tight)
1.2	20% extra	Large display headings
1.5	50% extra	Body text minimum
1.7	70% extra	Long-form articles
normal	~1.2 (browser decides)	Avoid — unpredictable
1.5rem	Fixed — doesn't scale	Avoid in most cases

---

Text Properties

/* Alignment */
text-align: left | right | center | justify | start | end;

/* Transform */
text-transform: uppercase | lowercase | capitalize | none;

/* Decoration */
text-decoration: none | underline | line-through | overline;
text-decoration-color: var(--color-primary);
text-decoration-thickness: 2px;
text-underline-offset: 3px;     /* Space between text and underline (great for links) */

/* Spacing */
letter-spacing: 0.05em;         /* Tracking — use em so it scales with font-size */
word-spacing: 0.1em;

/* Wrapping and overflow */
white-space: normal | nowrap | pre | pre-wrap | pre-line;
word-break: normal | break-all | keep-all | break-word;
overflow-wrap: normal | break-word | anywhere;
hyphens: none | manual | auto;  /* auto requires lang attribute on html */

/* Indentation */
text-indent: 2em;

/* Columns text */
text-align: justify;
hyphens: auto;

---

Google Fonts: Variable Quick Links

<!-- Inter (variable weight 100-900) -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">

<!-- Playfair Display (variable weight + italic) -->
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap" rel="stylesheet">

<!-- DM Sans -->
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,300..700;1,300..700&display=swap" rel="stylesheet">

<!-- Combo: body + display -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap" rel="stylesheet">

/* Always add this — browsers default inputs to system font */
input, textarea, select, button { font: inherit; }

---

@font-face Template

@font-face {
  font-family: 'MyFont';
  src: url('/fonts/myfont.woff2') format('woff2');
  font-weight: 100 900;    /* Variable: range */
  font-style: normal;
  font-display: swap;      /* Show fallback immediately, swap when loaded */
}

---

text-overflow Patterns

/* Single line ellipsis */
.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Multi-line clamp to N lines */
.c-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;      /* Change number */
  -webkit-box-orient: vertical;
  overflow: hidden;
}