# Otsikkofontit: kirjasimet, jotka herättävät huomion

[Canonical HTML page](https://gradiently.design/fi/guide/headline-fonts)

Otsikon lukemiseen on noin sekunti. Fontti tekee yllättävän suuren osan työstä. Tässä ilmaiset huomiota ansaitsevat kirjasimet käyttötarkoituksittain ja heti toimivat parit.

## The short version

- Hyvissä otsikkofonteissa on selkeät kirjainmuodot, vahvat leikkaukset ja riittävästi luonnetta, jotta ne tunnistaa silmäyksellä.
- Kapeat kirjasimet kuten Anton ja Bebas Neue mahduttavat pitkiä sanoja suuriin kokoihin, joten ne sopivat julisteisiin ja pikkukuviin.
- Vahvakontrastiset antiikvat kuten Playfair Display ja DM Serif Display antavat otsikoille toimituksellisen, hienostuneen sävyn.
- Otsikkofontin parina on yleensä rauhallisempi leipätekstifontti, kuten Inter tai DM Sans, kaikkea muuta varten.
- Suurena ladotut otsikot tarvitsevat yleensä fontin oletuksia hieman tiiviimmän kirjainvälin ja rivivälin.

Parhaat **otsikkofontit** pystyy lukemaan suuresta koosta yhdellä silmäyksellä, ja ne välittävät selkeän sävyn. Kapeat groteskit kuten Anton ja Bebas Neue tuovat voimaa, raskaat groteskit kuten Archivo Black painokkuutta ja vahvakontrastiset antiikvat kuten Playfair Display ja DM Serif Display eleganssia. Kaikki ovat ilmaisia [Google Fontsissa](https://fonts.google.com). Oikea valinta riippuu maun sijaan tehtävästä: sanojen määrästä, tilasta ja otsikon tavoitellusta tunnelmasta.

## Millainen on hyvä otsikkofontti

- **Selkeät muodot silmäyksellä.** Avoimet sisätilat ja erottuvat kirjaimet, jotta sanat hahmottuvat ennen katseen pysähtymistä.
- **Riittävästi vahvuutta.** Fonttiperheessä on bold, extra bold tai black, sillä puhelimen otsikot tarvitsevat paksuja viivoja.
- **Hyvät oletusvälit ja välistys.** Suuri teksti korostaa jokaista väliä. Hyvin tehdyt fontit tarvitsevat vähemmän korjausta. Katso [välistys](https://gradiently.design/fi/guide/kerning).
- **Viestiin sopiva sävy.** Äänekäs, rauhallinen, ylellinen tai tekninen. Fontti kertoo sen ennen sanoja.
- **Tilaan sopiva leveys.** Kapeat kirjasimet mahduttavat pitkät sanat kapeaan muotoon; leveät sopivat lyhyisiin sanoihin, joiden ympärillä on tilaa.

## Parhaat ilmaiset otsikkofontit tyyleittäin

| Tyyli | Kokeiltavat Google Fonts -fontit | Tunnelma | Sopii parhaiten |
| --- | --- | --- | --- |
| Kapea groteski | Anton, Bebas Neue, Oswald, Barlow Condensed, Big Shoulders Display | Äänekäs, kiireellinen, urheilullinen | Julisteet, pikkukuvat, tarjousjulkaisut |
| Raskas groteski | Archivo Black, Inter Tight, Work Sans black-vahvuudella | Suora, moderni, mutkaton | Ilmoitukset, tuotelanseeraukset |
| Geometrinen groteski | Montserrat, Poppins, Outfit, League Spartan | Ystävällinen, puhdas, pyöreä | Startupit, palvelut, somejulkaisut |
| Luonteikas groteski | Bricolage Grotesque, Space Grotesk, Syne | Erottuva, ajankohtainen, hieman omalaatuinen | Omaa ääntä hakevat brändit |
| Vahvakontrastinen antiikva | Playfair Display, DM Serif Display, Instrument Serif | Toimituksellinen, hienostunut, arvokas | Muoti, kauneus, julkaisut, menut |
| Pehmeä antiikva | Fraunces, Young Serif | Lämmin, käsityömäinen, lähestyttävä | Ruoka, kahvilat, itsenäiset kaupat |

Alustava valikoima. Kaikki nämä fontit ovat ilmaisia Google Fontsissa avoimella lisenssillä, joka sallii kaupallisen käytön.

Muutama huomio ennen valintaa. **Bebas Neue** sisältää vain suuraakkoset, joten se sopii lyhyisiin huudahduksiin kokonaisten lauseiden sijaan. **Oswald** on klassisen Alternate Gothic -tyylin uudistettu versio, jossa on useita vahvuuksia. Se on siksi Antonia joustavampi. **Fraunces** on muuttuva fontti, jossa on pehmeysakseleita ja leikkisä wonky-tila. Sama perhe voi vaihdella terävästä pehmoiseen. **Syne** levenee selvästi vahvemmissa leikkauksissa, mikä antaa lihavoidulle otsikolle painoarvoa.

Tarjouksen pystyjulkaisu, jossa KESÄALE on suurilla kapeilla suuraakkosilla kirkkaan liukuvärin päällä

Lyhyet, äänekkäät sanat suuraakkosin: juuri tällaisiin kapea Antonin tai Bebas Neuen kaltainen kirjasin on tehty.

Toimituksellinen pystyjulkaisu hienostuneella antiikvaotsikolla Pellavan hiljainen paluu

Toimituksellinen otsikko kaipaa vastakohtaa: Playfair Displayn kaltainen vahvakontrastinen antiikva hidastaa lukijaa ja viestii huolellisuutta.

## Näin valitset otsikkofontin

1. **Kirjoita oikea otsikko ensin** Testaa todellisilla sanoillasi, älä fontin mallitekstillä. ”Hamburgefonts”-sanassa upea kirjasin voi näyttää oudolta brändisi nimessä.
2. **Mittaa tila** Pitkä otsikko kapeassa muodossa, kuten tarinassa tai pinissä, tarvitsee kapean kirjasimen. Lyhyet rivit leveässä muodossa sallivat leveämmän.
3. **Sovita sävy viestiin** Kirjoita kolme sanaa siitä, miltä otsikon pitäisi tuntua. Ota harkintaan vain fontit, jotka sopivat kaikkiin kolmeen.
4. **Testaa pienimmässä todellisessa koossa** Pienennä design puhelin- tai ruudukkopikkukuvan kokoon. Ohuet viivat ja ahtaat sisätilat pettävät ensin.
5. **Yhdistä rauhalliseen leipätekstifonttiin** Valitse tukitekstiin rauhallinen luettava kirjasin, jotta otsikko pysyy sivun äänekkäimpänä osana.

## Otsikkofonttien yhdistäminen leipätekstiin

Otsikkofontti on erikoistunut tehtäväänsä. Se loistaa 90 px:n koossa ja väsyttää silmää 16 px:n koossa. Yhdistä se työjuhtaan, joka toimii kappaleissa ja pysyy sivummalla. Turvallisimmat parit eroavat yhdellä selkeällä tavalla, yleensä antiikva vastaan groteski tai kapea vastaan normaalilevyinen. [Fonttiparit](https://gradiently.design/fi/guide/font-pairing) selittää periaatteet, ja [Google Fonts -parit](https://gradiently.design/fi/guide/google-fonts-pairings) tarjoaa paljon lisää yhdistelmiä.

| Otsikko | Leipäteksti | Miksi toimii |
| --- | --- | --- |
| Anton | Inter | Kapea teho neutraalin, hyvin luettavan groteskin rinnalla |
| Playfair Display | Source Sans 3 | Klassinen toimituksellinen antiikvan ja groteskin kontrasti |
| Bricolage Grotesque | DM Sans | Luonteikas otsikko rauhallisen geometrisen leipätekstin rinnalla |
| DM Serif Display | DM Sans | Piirretty kumppaneiksi, joten mittasuhteet täsmäävät |
| Archivo Black | Archivo | Yksi perhe kahdella vahvuudella, yksinkertaisin mahdollinen pari |
| Fraunces | Manrope | Lämmin pehmeä antiikva puhtaan modernin groteskin rinnalla |

Kuusi ilmaisiin Google Fonts -fontteihin perustuvaa paria. Käytä otsikkofonttia yhteen tai kahteen riviin ja anna leipätekstifontin kantaa muu sisältö.

## Otsikkotekstin asetukset: koko, kirjainväli ja rivikorkeus

Oikeakin fontti näyttää heikolta oletusasetuksilla. Suuri teksti tarvitsee leipätekstiä tiiviimmän kirjainvälin ja rivivälin sekä vähemmän sanoja. Käytännössä kirjainväli on noin miinus 0,01:stä miinus 0,03 em:ään ja rivikorkeus noin 1,0:sta 1,1:een. 1080 px:n somejulkaisussa otsikko on yleensä 90 ja 140 px:n väliltä. [Instagram-julkaisujen fonttikoot](https://gradiently.design/fi/guide/font-size-for-social-media) antaa koko asteikon.

### Vältä

- Ohutta vahvuutta puhelimen pääotsikossa
- Käsiala- tai koristefontteja pitkissä otsikoissa
- Oletusrivikorkeutta kolmirivisessä otsikossa
- Kahta eri näyttöfonttia samassa designissa
- Kahtatoista sanaa otsikkokoossa

### Tee näin

- Semiboldista blackiin somessa ja pikkukuvissa
- Näyttöfontti tehoon, groteski lisätietoihin
- Noin 1,05:n rivikorkeus päällekkäisille riveille
- Yksi otsikkofontti johdonmukaisesti
- Viidestä kahdeksaan sanaa, karsi kunnes tuntuu

```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;600&display=swap" rel="stylesheet">

<style>
  h1 {
    font-family: "Anton", "Arial Narrow", sans-serif;
    font-size: clamp(2.75rem, 7vw, 6rem);
    line-height: 1.02;
    letter-spacing: -0.01em;
  }
  body {
    font-family: "Inter", system-ui, sans-serif;
  }
</style>
```

Otsikko- ja leipätekstiparin lataaminen Google Fontsista. Varafonttiketju pitää rivin leveyden samankaltaisena latauksen aikana.

Myös tausta vaikuttaa. Raskaskin otsikko levottomalla liukuvärillä voi hajota värin muuttuessa sen takana. Gradientlyn Markit siirtävät rauhallisimman alueensa sanojen taakse ja valitsevat vaalean tai tumman musteen riveittäin. Kirjainkäsittelyt kuten Käyrät, Sisäviiva ja Kohotettu antavat otsikolle lisää voimaa ilman laatikoita tai varjoja. Julisteiden suuresta tekstistä kertovat [näyttöfontit](https://gradiently.design/fi/guide/display-fonts) ja [lihavoidut fontit](https://gradiently.design/fi/guide/bold-fonts), pikkukuvista [pikkukuvan teksti](https://gradiently.design/fi/guide/typography-for-thumbnails).

## FAQ

### Mikä on paras fontti otsikoihin?

Se riippuu tehtävästä. Anton ja Bebas Neue sopivat äänekkäisiin lyhyisiin otsikoihin, Playfair Display ja DM Serif Display toimituksellisiin, Montserrat ja Outfit ystävällisiin selkeisiin.

### Ovatko Google Fonts -fontit ilmaisia kaupalliseen käyttöön?

Google Fontsin fontit julkaistaan avoimilla lisensseillä, useimmiten SIL Open Font License -lisenssillä, joka sallii kaupallisen käytön. Jokaisen fontin sivu näyttää lisenssin, joten tarkista se ennen käyttöä. [Fonttilisenssit](https://gradiently.design/fi/guide/font-licensing) selittää yksityiskohdat.

### Pitäisikö otsikon olla antiikvaa vai groteskia?

Kumpikin toimii. Groteskit tuntuvat suorilta ja moderneilta, antiikvat toimituksellisilta ja hienostuneilta. Valitse sävyn mukaan ja yhdistä leipätekstiin vastakkainen tyyppi.

### Minkä kokoinen otsikon fontin pitäisi olla?

1080 px:n somejulkaisussa noin 90:stä 140 px:ään. Verkkosivulla noin 2,5:stä 4 kertaa leipätekstin koko typografisesta asteikosta riippuen.

### Voinko käyttää kahta otsikkofonttia yhdessä designissa?

Se on harvoin hyvä idea. Yksi näyttöfontti ja yksi rauhallinen leipätekstifontti antavat selkeämmän hierarkian ja harkitumman vaikutelman.