What customization options does temper offer?

Updated

temper gives you control over four areas: site metadata, text color, background, and typography. All of it lives behind the settings button in the top right corner of the editor, and the same panel holds the download button that produces your HTML file. There is no account, no theme gallery, and no CSS editing — the options below are the full set described on the site.

Settings panel overview

Open the settings button (top right) to reach:

  • Your site's title — the metadata field for your page title
  • Text color — color of your body text
  • Background — page background color
  • Font — typeface selection
  • Bold / Italic — text style toggles
  • Font size — size control
  • Show temper branding — toggle for the "built with temper" credit

The panel also handles meta data entry, and the download button sits here too.

Typography

Font families

The font list is long and mixes system stacks with named typefaces. Grouped roughly as they appear:

Category Options
Generic stacks Sans Serif, Serif, Monospace, System UI
Display / experimental Scope, Scope Condensed, Scope Expanded, Fictional, Indicate Mono, Indicate Mono Condensed, Balkenschrift, Balkenschrift Rounded, Blow, Gain, Golzheim, Golzheim Sans, Krasz, Takeoff A, Takeoff B, Alcea, Marblis
Text families Massimo Grafia, Massimo Grafia Semi Mono, Massimo Grafia Mono, Neue Sammlung, Neue Television
Common web fonts Chivo, Domine, EB Garamond, IBM Plex Mono, IBM Plex Sans, IBM Plex Sans Condensed, IBM Plex Serif, Karla, Livvic, Montserrat, Ovo, Playfair Display, Poppins, Space Mono, Vidaloka, Work Sans

If you want something safe and fast-loading, the generic stacks and System UI are the low-risk picks. The named display faces are where the page gets its character, but they are also the ones most likely to look wrong at small sizes.

Style and size

Bold and Italic are simple toggles applied to your text. Font size is a separate control, so you can pair a display face with a larger size rather than relying on browser defaults.

Color and background

Text color and background are set independently, which means you are responsible for contrast. Nothing in the panel enforces a readable pairing — if you pick a light background and light text, the page ships that way. Check your combination before downloading.

Metadata and branding

The site's title field feeds your page metadata, and the settings panel is where you add meta data generally. The Show temper branding toggle controls whether the "built with temper" credit appears on your page. Turning it off is a supported option, not a workaround.

What is not customizable

Worth knowing before you commit:

  • No custom CSS or HTML editing — you download generated HTML, you don't hand-edit the source inside temper
  • No per-paragraph styling; typography and color apply to the page
  • No layout or column controls beyond adding and removing paragraphs
  • Links are added inline by typing link text, selecting it, and using the link button that appears in the bottom right corner. Link text must be unique within its paragraph, and the slideFrame beta option only works with external HTTPS links that permit iFrame embedding.

Practical order of operations

  1. Write your paragraphs first — the first paragraph cannot be removed, so treat it as your introduction.
  2. Add links by typing the text, selecting it, and using the link button.
  3. Open settings and set the title and metadata.
  4. Choose font, then bold/italic and size.
  5. Set text color and background, and check the contrast.
  6. Decide on the temper branding toggle.
  7. Download the HTML file and upload it to your own hosting.

If you only need a page up quickly, the generic font stacks plus a high-contrast color pair will get you there without touching the display faces.