Typografia: 10 fonttia tekoälysivujen Interin tilalle

Tekoälyllä tehdyn sivuston tunnistaa usein ennen kuin ehtii lukea sanaakaan. Iso osa tunnusmerkeistä on typografiassa: sama fontti, samat koot ja samat pienet tavat toistuvat sivustolta toiseen. Tämä opas käy läpi, mistä tekoälyn typografian tunnistaa, mitkä ilmaiset fontit sopivat Interin tilalle ja miten teksti asetellaan niin, ettei se näytä valmispohjalta.

Mistä tekoälyn typografian tunnistaa

ChatGPT, Claude ja Codex samoin kuin sivugeneraattorit v0, Bolt ja Lovable rakentavat sivut samojen aloituspohjien päälle, joten ne päätyvät samoihin typografisiin ratkaisuihin. Yleisimmät tunnusmerkit:

• Inter tai Geist kaikessa tekstissä otsikoista nappeihin.
• Otsikossa yksi sana kursiivilla antiikvalla, useimmiten Instrument Serifillä tai Frauncesilla.
• Harvennettu versaalimerkintä jokaisen otsikon yläpuolella.
• Monospace-fontti numeroissa, päivämäärissä ja pienissä merkinnöissä.
• Metatiedot ketjutettuna keskipisteillä, esimerkiksi lukuaika, päivämäärä ja kategoria peräkkäin.
• Nuoli jokaisen linkin perässä.
• Kaikki teksti lähes samassa koossa ja painossa.

Yksikään näistä ei ole yksinään virhe, mutta yhdessä ne kertovat kävijälle valmispohjasta. Helpoin aloitus on vaihtaa fontti.

10 ilmaista fonttia Interin tilalle

Kaikki alla olevat löytyvät Google Fontsista ja ovat vapaita myös kaupalliseen käyttöön. Suomalaiselle yritykselle luontevin aloitus on Finlandica, Helsinki Type Studion piirtämä Suomen kansallinen kirjasintyyppi.

Jos tarvitset yhden suosituksen: Host Grotesk käy Interin paikalle sellaisenaan, Finlandica antaa suomalaiselle brändille oman äänen, ja Newsreader tai Literata kantaa pitkän tekstin, kuten blogin tai oppaan.

Näin teksti ei näytä valmispohjalta

Fontin vaihto auttaa, mutta yhtä paljon ilme riippuu siitä, miten teksti asetellaan.

• Tee otsikon ja leipätekstin välille selvä ero koossa ja painossa.
• Kiristä isojen otsikoiden välistystä hieman, leipätekstin ei.
• Leipäteksti 16–20 pikseliä, rivillä 45–90 merkkiä ja riviväli 130–150 prosenttia kirjasinkoosta.
• Korosta otsikossa lihavalla tai värillä, älä vaihtamalla fonttia kesken lauseen.
• Tasaa numerot font-variant-numeric: tabular-nums -asetuksella. Monospace-fonttia ei tarvita.
• Erota metatiedot välistyksellä tai omille paikoilleen keskipisteiden sijaan.
• Jätä otsikon yläpuolinen versaalimerkintä pois, jos otsikko kertoo jo saman asian.
• Kaksi kirjasinta riittää, kunhan toinen on selvästi erilainen, esimerkiksi antiikva groteskin pariksi.

Maksulliset fontit

Kun haluat ilmeen, jota kilpailijalla ei ole, maksullinen fontti on usein edullisempi kuin moni odottaa. Helsinki Type Studio hinnoittelee verkkolisenssin kuukausikävijöiden mukaan: yksittäinen leikkaus alkaa 70 eurosta, ja koko Allee-perhe 500 000 kävijään asti maksaa 1 050 €. Helsingin kaupungin Helsinki Grotesk Pro maksaa 70 € leikkaukselta.

Muita valimoita Suomesta ja lähialueilta ovat Typolar, Paavola Type Studio ja Hurme Design, ruotsalainen Letters from Sweden, islantilainen Or Type ja norjalainen Monokrom. Ilmaisista kotimaisista Jaapokki on vakiintunut otsikkofontti.

Lisenssit lyhyesti

• Google Fontsin kirjasimia saa käyttää myös kaupallisesti, mutta lataa tiedostot omalle palvelimelle. Googlen palvelimilta lataaminen välittää kävijän IP-osoitteen Googlelle, ja Münchenin maaoikeus tuomitsi siitä hyvityksen vuonna 2022.
• Ilmainen ei aina tarkoita vapaata. Fontsharen Satoshia ja Switzeriä ei saa muokata eikä luovuttaa ulkopuoliselle suunnittelijalle, ja lisenssi on irtisanottavissa.
• Maksullisessa kirjasimessa ratkaisee, kuka lisenssin omistaa. Toimiston lisenssillä ei saa ajaa asiakkaan sivustoa, joten pyydä lisenssi asiakkaan nimiin.
• Tilauspohjaiset kirjasimet lakkaavat toimimasta, kun maksu loppuu. Adobe Fonts ja vuosimaksulliset verkkolisenssit ovat huonoja valintoja pysyväksi brändifontiksi.

Tekninen toteutus

Next.js:ssä next/font lataa kirjasimet rakennusvaiheessa ja tarjoilee ne omalta palvelimelta, joten pyyntöä Googlelle ei synny. Muuttuvasta fontista tulee oletuksena mukaan vain lihavuusakseli, joten optinen koko pyydetään erikseen axes-asetuksella. WordPressin omat teemat ovat tarjoilleet fontit teemahakemistosta versiosta 6.2 alkaen. Jos teema tai sivunrakentaja hakee fontin ulkopuoliselta palvelimelta, korjaa se.

Näin valitset fontin

• Katso ensin, mitä kilpailijasi käyttävät. Jos kolme neljästä on Interillä, sinulla on helppo tilaisuus erottua.
• Valitse kirjasin, jossa on kursiivi ja riittävästi lihavuuksia. Ilman kursiivia leipätekstin korostukset näyttävät kömpelöiltä.
• Suosi muuttuvaa fonttia: saat kaikki lihavuudet yhdellä tiedostolla.
• Testaa otsikot pisimmällä oikealla tekstillä, älä lorem ipsumilla. Suomen yhdyssanat kaatavat monen asettelun.
• Lue lisenssi ennen kuin asennat fontin asiakkaan sivustolle, ja isännöi tiedostot aina itse.

Typografia on vasta yksi tekoälyn kädenjälki. Sarjan seuraava osa käsittelee värejä ja sitä, miksi violetti gradientti on tekoälysivujen tunnusmerkki.