> ## Documentation Index
> Fetch the complete documentation index at: https://www.lettercamp.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Typography

> Choose heading and body fonts, text sizes, line spacing, and text colors for your Lettercamp publication.

Set heading and body typography for your entire Lettercamp publication.

In **Settings → Design → Customize → Content**, choose separate heading and body fonts. Search the Google Fonts list or upload a TTF, OTF, WOFF, or WOFF2 file within your site's upload limit. Selecting a font updates your draft; **Publish** makes it live. See [Supported fonts](#supported-fonts) for the complete built-in list.

## Font settings

Set `design.typography` in `settings.json`:

```json theme={null}
{
  "design": {
    "typography": {
      "headingFont": {
        "google": "Inter"
      },
      "bodyFont": {
        "google": "Inter"
      },
      "headingColor": "",
      "bodyColor": "",
      "headingBaseSizePx": 18,
      "bodyBaseSizePx": 16,
      "bodyLineHeight": 1.8
    }
  }
}
```

| Field | Default | Purpose |
| - | - | - |
| `headingFont` | `{ "google": "Inter" }` | Font for page titles, post cards, and article headings. |
| `bodyFont` | `{ "google": "Inter" }` | Font for body text, navigation, buttons, and supporting text. |
| `localFonts` | `false` | Load catalog fonts from `public/fonts/`. The CLI starter sets this to `true`; Cloud requires `false` or omission. |
| `headingColor` | `""` (automatic) | Color for page titles, post-card titles, and article headings. |
| `bodyColor` | `""` (automatic) | Color for primary body text. Supporting text retains its muted colors. |
| `headingBaseSizePx` | `18` | Minimum grid title size in pixels at the standard browser text size. Other titles and headings scale proportionally. |
| `bodyBaseSizePx` | `16` | Body text size in pixels at the standard browser text size. Summaries, navigation, metadata, and footer links scale from this base. |
| `bodyLineHeight` | `1.8` | Article line spacing as a multiple of its font size. |

## Custom fonts

For a hosted font, use `{ "url": "https://example.com/brand.woff2", "name": "Brand" }`. Variable fonts can include `"weight": "100 900"`; uploads detect this automatically. The host must allow cross-origin font requests. Single-face fonts use browser-synthesized bold and italic when needed. Code blocks keep their monospace font.

For local previews and standalone builds, put a custom font in `public/fonts/`
and use `{ "url": "/fonts/brand.woff2", "name": "Brand" }`. Before publishing
to Cloud, [upload the font](https://www.lettercamp.com/docs/cli/upload.md) and replace this path with its hosted URL.

## Local fonts

The CLI starter sets `design.typography.localFonts` to `true` and bundles the
files for **Inter**, **Geist**, **Geist Mono**, **Instrument Serif**, and
**EB Garamond** in `public/fonts/`. These cover all starter presets and load
from your own site in previews and standalone builds.

When you choose another catalog family, set `localFonts` to `false` to load it
from Lettercamp's CDN, or provide its font files at the matching paths in
`public/fonts/`. Setting `localFonts` does not download missing font files.

Before deploying to Lettercamp Cloud, set `localFonts` to `false` or remove it.
Cloud does not serve `public/fonts/`; this setting lets the same selected
families use hosted files. It does not change custom `url` values, which must
also point to hosted fonts.

## Size and line spacing

Under **Content** on either the Home or Post tab, set **Heading base size (px)**
beside **Heading font**, and **Body size (px)** beside **Body font**. Set
**Body line height** beneath the body controls. These settings apply across your
site and in the editor when site styles are enabled. Changing a font keeps its
role's size setting.

## Text colors

Set **Heading color** below heading size and **Body color** below body size.
Each defaults independently to **Automatic**, choosing black or white for contrast
against your background. The swatch shows the resolved color. Choosing one color
does not change the other; a custom color stays fixed when the background changes.
Click **Use automatic color** in a customized picker to restore the default.

In `settings.json`, use a six-digit hex color for `headingColor` or `bodyColor`.
Omit a field or set it to `""` for automatic color. For example, this sets both
roles to brown on a sand background:

```json theme={null}
{
  "design": {
    "backgroundColor": "#FCF0DA",
    "accentColor": "#994636",
    "typography": {
      "headingColor": "#543712",
      "bodyColor": "#543712"
    }
  }
}
```

These colors apply in the design preview, the editor with site styles enabled,
and sites built with `npx lettercamp dev` or `npx lettercamp build`. Supporting text,
such as summaries, metadata, and captions, keeps its automatic muted treatment.
Individually colored article text keeps its explicit color. Accent hovers,
selection colors, and contrasting button labels keep their existing behavior.
Choose custom text colors that are readable against your background.

## Responsive sizes

The two sizes are independent, even when you select the same font for both roles.
`headingBaseSizePx` sets the smaller end of the responsive grid title size.
With the heading base at 18 and body base at 16, page titles range from 32 to 42px, grid titles from
18 to 20px, and wide-row titles are 24px. Article H2, H3, H4, H5, and H6 sizes are
30, 24, 20, 18, and 16px. Page titles and grid titles also adapt to the viewport.
A 21px heading base makes an H2 35px while a 16px body base keeps paragraphs
at 16px and listing summaries at 15px.

Navigation, table-of-contents labels, and footer labels use the body font and
scale. **Reading width (em)** follows the body size;
changing the heading base does not change the reading column's width.

Font sizes in these scales use `rem` so browser text-size preferences still
apply. Use positive numbers; omitted or invalid values fall back to the defaults.
Omit `design.typography` entirely to use Inter and the default sizes.

## Supported fonts

Choose any of these 40 built-in font families for headings, body text, or both.
They are available in the design modal's **Google Fonts** tab and, with
`localFonts` disabled, served from Lettercamp's asset CDN. You do not need to
upload a font file or provide a Google
API key. The same families work in the editor, published sites, `npx lettercamp dev`,
and `npx lettercamp build`.

| Style | Font families |
| - | - |
| Sans serif | Atkinson Hyperlegible Next, DM Sans, Figtree, Geist Sans, IBM Plex Sans, Inter, Lato, Manrope, Montserrat, Noto Sans, Nunito Sans, Open Sans, Outfit, Plus Jakarta Sans, Poppins, Raleway, Roboto, Source Sans 3, Work Sans |
| Serif | Bitter, Crimson Pro, DM Serif Display, EB Garamond, IBM Plex Serif, Instrument Serif, Libre Baskerville, Literata, Lora, Merriweather, Newsreader, Noto Serif, Playfair Display, Roboto Slab, Source Serif 4 |
| Monospace | Fira Code, Geist Mono, IBM Plex Mono, JetBrains Mono, Roboto Mono, Source Code Pro |

In `settings.json`, use the exact family name with the `google` field in
`design.typography.headingFont` or `design.typography.bodyFont`. **Geist Sans** is
the one display-name exception: use `"Geist"` in your settings.
For example, pair Instrument Serif headings with EB Garamond body text:

```json theme={null}
{
  "design": {
    "typography": {
      "headingFont": { "google": "Instrument Serif" },
      "bodyFont": { "google": "EB Garamond" }
    }
  }
}
```

With `localFonts` disabled, font names outside this list use the external Google
Fonts loader. You can also upload a custom font or supply an
HTTPS font-file URL as described above.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.