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

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. 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.
• 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

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.

Näin valitset otsikkofontin

1. 1

   Kirjoita oikea otsikko ensin

   Testaa todellisilla sanoillasi, älä fontin mallitekstillä. ”Hamburgefonts”-sanassa upea kirjasin voi näyttää oudolta brändisi nimessä.

2. 2

   Mittaa tila

   Pitkä otsikko kapeassa muodossa, kuten tarinassa tai pinissä, tarvitsee kapean kirjasimen. Lyhyet rivit leveässä muodossa sallivat leveämmän.

3. 3

   Sovita sävy viestiin

   Kirjoita kolme sanaa siitä, miltä otsikon pitäisi tuntua. Ota harkintaan vain fontit, jotka sopivat kaikkiin kolmeen.

4. 4

   Testaa pienimmässä todellisessa koossa

   Pienennä design puhelin- tai ruudukkopikkukuvan kokoon. Ohuet viivat ja ahtaat sisätilat pettävät ensin.

5. 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 selittää periaatteet, ja Google Fonts -parit tarjoaa paljon lisää yhdistelmiä.

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 antaa koko asteikon.

<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>

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 ja lihavoidut fontit, pikkukuvista pikkukuvan teksti.