Document Stack
Document Stack
Docs

Typography & Fonts

Configure typography — font families, sizes, weights, line height, letter spacing, and text decoration.

Font Families

Document Stack includes a curated selection of professional fonts from the Google Fonts library, ready to use in your templates. Categories include:

  • Sans-serif — Inter, Roboto, Open Sans, Lato, Poppins, Nunito, Montserrat
  • Serif — Playfair Display, Merriweather, Lora, PT Serif, Crimson Text
  • Monospace — JetBrains Mono, Fira Code, Source Code Pro, IBM Plex Mono
  • Display — Oswald, Bebas Neue, Anton, Raleway

Font Pairing

A good rule of thumb is to use a sans-serif font for body text and a serif or display font for headings. Limit to 2–3 font families per template.

Font Size

Font sizes are set in pixels. The size you see in the editor matches the rendered size in the PDF. Recommended sizes for common document roles:

RoleSize RangeExample Use
Fine print8–9pxLegal disclaimers, footnotes
Body text10–12pxParagraph content, descriptions
Labels12–14pxForm labels, table headers
Subheading16–20pxSection titles, category names
Heading24–32pxDocument title, main heading
Display36px+Certificate names, hero text

Font Weight

Font weight controls the thickness of text characters. Available weights depend on the selected font family:

  • 100 Thin — Ultra-light, decorative use only
  • 300 Light — Elegant, works well at larger sizes
  • 400 Regular — Default weight for body text
  • 500 Medium — Slightly emphasized text
  • 600 Semi-Bold — Subtitles and important labels
  • 700 Bold — Headings and strong emphasis
  • 900 Black — Maximum emphasis, display text
Not all fonts support every weight. If you select a weight that isn't available, the browser will approximate to the nearest available weight.

Text Color

Set text color using the color picker in the inspector. You can:

  • Click the color swatch to open the visual picker
  • Enter a hex code directly (e.g., #1a1a1a)
  • Use RGB values

Recommended text colors for readability:

  • #000000 or #1a1a1a — Primary text on light backgrounds
  • #4a4a4a or #6b7280 — Secondary/muted text
  • #9ca3af — Placeholder-style light text
  • Brand color — Accent text for links or highlights

Text Alignment

Control how text is aligned within its element bounding box:

  • Left — Default alignment, natural reading flow
  • Center — Centered text, good for headings and certificates
  • Right — Right-aligned, useful for amounts and dates

Line Height

Line height controls the vertical spacing between lines of text. It's expressed as a multiplier of the font size:

  • 1.0 — Tight, no extra spacing (dense tables)
  • 1.2 — Compact, good for headings
  • 1.5 — Comfortable reading, recommended for body text
  • 1.8–2.0 — Spacious, good for legal or formal text

Letter Spacing

Adjust the horizontal space between individual characters:

  • Negative values — Tighter spacing, good for large headings
  • 0 — Default spacing
  • Positive values — Looser spacing, good for uppercase labels and small text

Text Decoration & Transform

  • Italic — Slanted text for emphasis or quotes
  • Underline — Underlined text for links or emphasis
  • Strikethrough — Crossed-out text
  • Uppercase — Transforms all text to capital letters
  • Lowercase — Transforms all text to lowercase
  • Capitalize — Capitalizes the first letter of each word

Next Steps