A Mark's type voice: why every Mark comes with fonts

A Mark's type voice is the typography that comes with it: a display face for headlines, a text face for everything else, a weight for the display face, a letter spacing and a letter case. When you start a design on a Mark, your words appear in that voice, so the first draft already fits the background. It is a starting point, not a lock: every line can be changed, and your own brand fonts can replace it.

Why a background comes with fonts

Type has a tone of voice, just as speech does. "Doors open at seven" set in a fine Garamond sounds like a gallery opening; set in condensed capitals it sounds like a gig. Put either on the wrong background and the design argues with itself. A silk Mark in deep plum and an Op art Mark in acid green want different letters, and choosing them together is what makes a look feel deliberate.

There is a practical reason too. Most people who design a weekly post are not typographers, and font pairing is one of the easiest places to go wrong. A voice that has already been matched to its Mark removes that decision from every design.

What a type voice contains

The faces come from Gradiently's font library, which spans serifs such as Fraunces, Playfair Display and EB Garamond, grotesques such as Space Grotesk and Schibsted Grotesk, condensed display faces such as Anton and Oswald, monospaced faces, scripts and rounded faces. Serif vs sans serif explains what each category tends to say.

If you want your website to match a Mark, a voice translates directly into CSS. Here is a typical editorial voice written out:

h1, h2 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.02em; /* tracking */
  text-transform: none;    /* case: as typed */
}

body {
  font-family: "Inter", system-ui, sans-serif;
}

How text follows the voice

Each piece of text in a design knows whether it is a heading or body text. Headings follow the voice's display face, weight, tracking and case; body text follows its text face. As long as a line has no font of its own, it keeps following, so if you put a different Mark on the design, the words take on the new Mark's voice too.

The Studio's colour and type panel shows the Mark's voice as a heading and a body pair, and lets you use them on the whole page in one step. That is handy when a template arrives in other fonts and you want it to sound like your Mark.

How to change a Mark's voice in your designs

1. 1

   Change one line

   Select the text and pick another font, weight, spacing or case. That line now keeps its own setting.

2. 2

   Change a whole page

   Choose a heading and a body font and apply them to the page, so every heading and paragraph moves together.

3. 3

   Use your brand fonts

   Add a heading and a body font to your brand kit, uploading OTF, TTF, WOFF or WOFF2 files if they are your own, then put the brand's fonts on a page in one step.

4. 4

   Ask the Designer

   The Designer applies the brand kit for you, so designs it makes start in your brand's fonts.

Uploading a typeface is covered in upload custom fonts, and the rest of the kit in brand kit setup. Check your licence before uploading a commercial font; font licensing explains what to look for.

Trying a Mark in other voices

On a Mark's page in the Market, the previews can be switched between its own voice and five ready pairings, so you can see the look with typography closer to your brand before you design anything.

When to keep the voice and when to replace it

Either way, keep to two faces at most and let size and weight do the rest. A clear hierarchy matters more than the fonts themselves, as visual hierarchy shows. If your words sit on a Mark, legibility is handled separately: the Mark moves its calmest region behind the text and Auto ink picks light or dark type for each line, whatever face you choose.