# Markin typografinen ääni: miksi mukana tulee fontit

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

Väri ja tekstuuri ovat vain puolet ilmeestä. Markissa on myös otsakefontti, tekstifontti ja tapa käyttää niitä. Ensimmäinen luonnos kuulostaa jo taustaltaan.

## The short version

- Markin typografinen ääni määrittää designin alkutypografian: näyttöfontin, tekstifontin, näyttöfontin vahvuuden, kirjainvälin ja kirjainkoon.
- Otsakkeet käyttävät typografisen äänen näyttöfonttia ja muu teksti sen tekstifonttia, kunnes valitset toisin.
- Voit vaihtaa minkä tahansa rivin fontin Studiossa tai käyttää sivulla brändipaketin otsake- ja leipätekstifontteja.
- Typografinen ääni on olemassa, koska samat sanat tuntuvat erilaisilta eri fonteilla. Taustan ja tekstin pitäisi tuntua yhdeltä päätökseltä.
- Markkinat esittelee Markin sen omalla typografisella äänellä ja viidellä muulla parilla: Editoriaalinen, Grotesk, Juliste, Klassinen ja Moderni.

Markin **typografinen ääni** on sen mukana tuleva typografia: näyttöfontti otsakkeille, tekstifontti muulle tekstille, näyttöfontin vahvuus, kirjainväli ja kirjainkoko. Kun aloitat designin Markilla, sanat käyttävät tätä ääntä. Ensimmäinen luonnos sopii siis jo taustaan. Se on lähtökohta: joka rivin asetuksia voi muuttaa ja omat brändifontit voivat korvata sen.

## Miksi taustan mukana tulee fontit

Typografialla on äänensävy aivan kuten puheella. ”Ovet avautuvat seitsemältä” hienolla Garamondilla kuulostaa gallerian avajaisilta. Kapeilla suuraakkosilla se kuulostaa keikalta. Väärällä taustalla kumpikin riitelee designin kanssa. Syvän luumunvärinen Silkki-Mark ja haponvihreä Op-taide-Mark kaipaavat erilaisia kirjaimia. Kun valitset ne yhdessä, ilme tuntuu harkitulta.

Tapahtumakutsu tekstillä Ovet avautuvat seitsemältä ensimmäisen Markin typografisella äänellä

Yksi Mark omalla typografisella äänellään.

Sama kutsu toisessa Markissa, jolla on eri paletti, materiaali ja typografia

Samat sanat toisessa Markissa, joka tuo oman typografisen äänensä mukanaan.

Syy on myös käytännöllinen. Useimmat viikoittaisen julkaisun tekijät eivät ole typografeja, ja [fonttien yhdistäminen](https://gradiently.design/fi/guide/font-pairing) on helppo kohta mennä vikaan. Markiin valmiiksi sovitettu ääni poistaa tämän päätöksen jokaisesta designista.

## Mitä typografinen ääni sisältää

| Osa | Mitä se määrittää | Esimerkki |
| --- | --- | --- |
| Näyttöfontti | Otsakkeet ja suuret sanat | Fraunces, Syne, Bebas Neue |
| Tekstifontti | Leipäteksti, yksityiskohdat ja pienet tekstit | Inter, Manrope, Newsreader |
| Vahvuus | Näyttöfontin vahvuus ohuesta erittäin lihavaan | 400 tyylikkäälle antiikvalle, 700 julisteelle |
| Kirjainväli | Kirjainten välinen tila, tiiviimpi tai väljempi | Hieman tiivis suurille otsakkeille |
| Kirjainkoko | Kirjoitetussa muodossa, suuraakkosin tai pienaakkosin | Suuraakkoset julisteääneen |

Typografisen äänen viisi osaa. Yhdessä ne päättävät Markin jokaisen otsakkeen ilmeen ennen asetusten muuttamista.

Fontit tulevat Gradientlyn fonttikirjastosta. Siinä on antiikvoja, kuten Fraunces, Playfair Display ja EB Garamond, groteskeja, kuten Space Grotesk ja Schibsted Grotesk, kapeita näyttöfontteja, kuten Anton ja Oswald, tasalevyisiä fontteja, käsialafontteja ja pyöristettyjä fontteja. [Antiikva vai groteski](https://gradiently.design/fi/guide/serif-vs-sans-serif) kertoo kunkin ryhmän tavallisesta vaikutelmasta.

Jos haluat verkkosivusi vastaavan Markia, typografinen ääni siirtyy suoraan CSS:ään. Tässä tavallinen toimituksellinen ääni kirjoitettuna:

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

Otsakkeille näyttöfontti, vahvuus, kirjainväli ja kirjainkoko. Muulle tekstille tekstifontti. Molemmat löytyvät Google Fontsista.

## Miten teksti seuraa typografista ääntä

Jokainen designin teksti tietää, onko se otsake vai leipätekstiä. Otsakkeet seuraavat äänen näyttöfonttia, vahvuutta, kirjainväliä ja kirjainkokoa. Leipäteksti seuraa tekstifonttia. Niin kauan kuin rivillä ei ole omaa fonttia, se jatkaa seuraamista. Jos vaihdat designin Markin, sanat omaksuvat uuden Markin typografisen äänen.

Studion väri- ja typografiapaneeli näyttää Markin äänen otsake- ja leipätekstiparina. Voit käyttää niitä koko sivulla yhdellä kertaa. Tämä auttaa, jos pohjassa on muita fontteja ja haluat sen kuulostavan Markiltasi.

## Markin typografisen äänen muuttaminen designissa

1. **Vaihda yksi rivi** Valitse teksti ja toinen fontti, vahvuus, välistys tai kirjainkoko. Rivi säilyttää nyt oman asetuksensa.
2. **Vaihda koko sivu** Valitse otsake- ja leipätekstifontti ja käytä niitä sivulla. Kaikki otsakkeet ja kappaleet muuttuvat yhdessä.
3. **Käytä brändifonttejasi** Lisää brändipakettiin otsake- ja leipätekstifontti. Lataa tarvittaessa omat OTF-, TTF-, WOFF- tai WOFF2-tiedostot. Käytä sitten brändifontteja koko sivulla yhdellä kertaa.
4. **Pyydä Designerilta** Designer käyttää brändipakettia puolestasi, joten sen tekemät designit alkavat brändisi fonteilla.

Fontin lataamista käsittelee [omien fonttien lataaminen](https://gradiently.design/fi/guide/custom-fonts-upload) ja muuta pakettia [brändipaketin perustaminen](https://gradiently.design/fi/guide/brand-kit-setup). Tarkista lisenssi ennen kaupallisen fontin lataamista. [Fonttien lisenssit](https://gradiently.design/fi/guide/font-licensing) kertoo, mitä etsiä.

## Kokeile Markia muilla typografisilla äänillä

Markin sivulla [Markkinoilla](/market) voit vaihtaa esikatselun sen omasta äänestä viiteen valmiiseen fonttipariin. Näet ilmeen brändiäsi lähempänä olevalla typografialla ennen suunnittelun aloittamista.

| Fonttipari | Näyttöfontti | Tekstifontti | Vaikutelma |
| --- | --- | --- | --- |
| Oma ääni | Valittu Markin kanssa | Valittu Markin kanssa | Markin alkuperäinen ilme |
| Editoriaalinen | Instrument Serif | Inter | Lehti, galleria, harkittu |
| Grotesk | Space Grotesk | Space Grotesk | Studio, tekninen, ajankohtainen |
| Juliste | Anton suuraakkosin | Archivo | Voimakas, tapahtumat, urheilu |
| Klassinen | Cormorant Garamond | EB Garamond | Kirjallinen, perinteikäs, hillityn ylellinen |
| Moderni | Geist | Geist | Selkeä, tuote, ohjelmisto |

Markin sivulla esikatseltavat fonttiparit. Jokainen on toimiva ja huolellisesti testattu yhdistelmä, jota voit käyttää myös omissa designeissasi.

## Milloin säilyttää oma ääni ja milloin vaihtaa fontit

### Säilytä Markin ääni

- Sinulla ei vielä ole brändifontteja
- Ääni sopii jo tapaasi viestiä
- Haluat designien ja taustan tuntuvan kokonaisuudelta
- Julkaiset usein ja haluat vähemmän päätöksiä

### Käytä omia fontteja

- Sinulla on vakiintunut logotyyppi tai brändifontti
- Pakkaukset, myymälä tai sivusto käyttää jo tiettyjä fontteja
- Tarvitset fontin tietyille kielille
- Usealla brändillä on yhteinen talotyyli

Pidä kummassakin tapauksessa käytössä enintään kaksi fonttia ja anna koon sekä vahvuuden hoitaa muu. Selkeä hierarkia on fontteja tärkeämpi, kuten [visuaalinen hierarkia](https://gradiently.design/fi/guide/visual-hierarchy) näyttää. Markissa luettavuus hoidetaan erikseen: rauhallisin alue siirtyy tekstin taakse ja Automaattinen muste valitsee jokaiselle riville vaalean tai tumman tekstin fonttivalinnasta riippumatta.

## FAQ

### Mikä on typografinen ääni?

Typografia, jolla Mark aloittaa jokaisen designin: näyttöfontti, tekstifontti, näyttöfontin vahvuus, kirjainväli ja kirjainkoko.

### Voinko vaihtaa Markin fontit?

Kyllä. Muuta mitä tahansa riviä Studiossa, käytä otsake- ja leipätekstifonttia koko sivulla tai valitse brändipaketin fontit. Markin oma ääni on vain lähtökohta.

### Voinko käyttää omia fontteja Gradientlyssä?

Kyllä. Lisää brändipakettiin otsake- ja leipätekstifontti ja lataa tarvittaessa fonttitiedostot.

### Mitä fonteille tapahtuu, jos vaihdan designin Markin?

Typografista ääntä yhä seuraava teksti omaksuu uuden Markin äänen. Rivit, joille annoit oman fontin, säilyttävät sen.