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

[Canonical HTML page](https://gradiently.design/guide/type-voice-of-a-mark)

Colour and texture are only half a look. Every Mark also carries a headline face, a text face and a way of setting them, so the first draft already sounds like the background it sits on.

## The short version

- A Mark's type voice is the typography it starts every design in: a display face, a text face, a display weight, letter spacing and letter case.
- Headlines follow the voice's display face and other text follows its text face, until you choose something else.
- You can change the font of any line in the Studio, and put your brand kit's heading and body fonts on a page instead.
- A type voice exists because the same words feel different in different faces, and a background and its type should feel like one decision.
- A Mark's page in the Market previews it in its own voice and in five other pairings: Editorial, Grotesk, Poster, Classic and Modern.

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.

An event invitation reading Doors open at seven, set in the type voice of the first Mark

One Mark, in its own voice.

The same invitation on a second Mark with a different palette, material and typography

The same words on another Mark, which brings its own voice with it.

There is a practical reason too. Most people who design a weekly post are not typographers, and [font pairing](https://gradiently.design/guide/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

| Part | What it sets | Example |
| --- | --- | --- |
| Display face | Headlines and large words | Fraunces, Syne, Bebas Neue |
| Text face | Body copy, details, small print | Inter, Manrope, Newsreader |
| Weight | How heavy the display face is, from light to extra bold | 400 for an elegant serif, 700 for a poster |
| Tracking | Space between letters, tighter or looser | Slightly tight for big headlines |
| Case | As typed, all capitals or all lower case | Capitals for a poster voice |

The five parts of a voice. Together they decide how every headline on the Mark looks before you touch a setting.

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](https://gradiently.design/guide/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:

```css
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;
}
```

Display face, weight, tracking and case for headings; the text face for everything else. Both faces are on Google Fonts.

## 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. **Change one line** Select the text and pick another font, weight, spacing or case. That line now keeps its own setting.
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. **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. **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](https://gradiently.design/guide/custom-fonts-upload), and the rest of the kit in [brand kit setup](https://gradiently.design/guide/brand-kit-setup). Check your licence before uploading a commercial font; [font licensing](https://gradiently.design/guide/font-licensing) explains what to look for.

## Trying a Mark in other voices

On a Mark's page in the [Market](/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.

| Pairing | Display face | Text face | Feels |
| --- | --- | --- | --- |
| Its own voice | Chosen with the Mark | Chosen with the Mark | As the Mark was made |
| Editorial | Instrument Serif | Inter | Magazine, gallery, considered |
| Grotesk | Space Grotesk | Space Grotesk | Studio, technical, current |
| Poster | Anton, in capitals | Archivo | Loud, events, sport |
| Classic | Cormorant Garamond | EB Garamond | Bookish, heritage, quiet luxury |
| Modern | Geist | Geist | Clean, product, software |

The pairings a Mark's page can preview. Each is a sound, well-tested combination you can also use in your own designs.

## When to keep the voice and when to replace it

### Keep the Mark's voice

- You have no brand fonts yet
- The voice already suits how you speak
- You want designs to feel of a piece with the background
- You post often and want fewer decisions

### Use your own fonts

- You have an established logotype or brand face
- Your packaging, shop or site already uses set fonts
- You need a face that covers particular languages
- Several brands share a house style

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](https://gradiently.design/guide/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.

## FAQ

### What is a type voice?

The typography a Mark starts every design in: a display face, a text face, a display weight, letter spacing and letter case.

### Can I change the fonts on a Mark?

Yes. Change any line in the Studio, apply a heading and body font to a whole page, or use your brand kit's fonts. The Mark's own voice is only the starting point.

### Can I use my own fonts in Gradiently?

Yes. Add a heading and a body font to your brand kit, uploading the font files if needed.

### What happens to my fonts if I put a different Mark on a design?

Text that still follows the voice takes on the new Mark's voice. Lines you gave their own font keep it.