Typografia ilman oletuksia: 11 vaihtoehtoa Interille

Tekoäly kasaa verkkosivuston minuuteissa, ja jälki on usein kelvollista. Silti sivustot näyttävät toistensa kopioilta. Iso osa syystä on fontissa: teksti peittää sivusta enemmän alaa kuin kuvat, napit ja ikonit yhteensä, joten kirjasin värittää koko ilmeen ennen kuin kukaan lukee ensimmäistä sanaa. Väärä fontti kertoo kävijälle mallipohjasta nopeammin kuin mikään muu yksittäinen valinta.

Inter ei ole ongelma. Oletus on.

Fontti tulee aloituspohjasta. Next.js:n dokumentaatio käyttää esimerkeissään Geistiä, shadcn/ui:n oma dokumentaatiosivusto samoin, ja Interistä on tullut oletus kaikelle muulle. Molemmat on piirretty hyvin: Interissä on yli 2 000 merkkiä ja omat optiset koot leipätekstille ja otsikoille. Ongelma on toisto. Kun sama kirjasin toistuu kymmenissä tuhansissa demoissa ja mallipohjissa, silmä lukee sen merkkinä kiireessä kootusta sivustosta.

Katso itse: yksitoista ilmaista vaihtoehtoa

Ilmainen ei tarkoita heikkoa. Google Fontsissa on muuttuvia kirjasimia optisin koin ja kunnolla piirretyin kursiivein. Suomalaiselle yritykselle luontevin aloitus on Finlandica, Helsinki Type Studion piirtämä Suomen kansallinen kirjasintyyppi. Jokainen alla oleva fontti on oikeasti ladattu tälle sivulle, joten näet sen sellaisena kuin se omalla sivustollasi näkyisi.

Tämän sivuston otsikot ja leipäteksti ovat Host Groteskia. Instrument Serifin kursiivi oli pitkään sama temppu kevyemmin, mutta se on ehtinyt niin moneen tekoälyllä tehtyyn otsikkoon, että se on nykyään oma tunnusmerkkinsä. Niin käy oletuksille.

Fontin vaihto ei yksin riitä

Geneerinen ilme syntyy yhtä paljon siitä, että kaikki teksti on samankokoista, samanpainoista ja yhtä leveissä palstoissa. Butterickin käytännön typografia tiivistää nämä asetukset muutamaan sääntöön:

• Palstan leveys 45–90 merkkiä rivillä. Bringhurstin ihanne yhdelle palstalle on 66.
• Riviväli 120–145 prosenttia kirjasinkoosta, antiikvalle hieman enemmän kuin groteskille.
• Leipäteksti 15–25 pikseliä. Pienempi on oletus, ei valinta.
• Iso ero otsikon ja leipätekstin koossa ja painossa. Kaikki 400-painossa näyttää aloituspohjalta.
• Muuttuvan fontin opsz-akseli säätää kirjainmuodon koon mukaan. Selaimet ovat tukeneet sitä vuodesta 2020, ja se on halvin tapa saada typografia näyttämään harkitulta.
• Kaksi kirjasinta riittää, kunhan toinen on selvästi erilainen: antiikva groteskin pariksi, ei kahta samankaltaista groteskia.

Tekoälyn kädenjälkeen lukeutuvat nykyään myös nämä tavat: harvennettu versaalimerkintä jokaisen otsikon yläpuolella, keskipistein ketjutetut tiedot, monospace-fontti pienissä lukuarvoissa ja nuoli jokaisen linkin perässä. Yksittäin kukin on harmiton. Yhdessä ne ovat sama ilmiö kuin oletusfontti.

Maksullinen fontti on halvempi kuin luulet

Helsinki Type Studio on vuonna 2013 perustettu helsinkiläinen valimo, joka on piirtänyt kirjasimet muun muassa HSL:lle, ulkoministeriölle, Oulun kaupungille, S-Marketille ja Tori.fi:lle. Sen verkkolisenssi koskee yhtä sivustoa ja hinnoitellaan kuukausikävijöiden mukaan: Allee-perhe 500 000 kävijään asti maksaa 1 050 €, yksittäinen leikkaus lähtee 70 eurosta. Helsingin kaupunki lisensoi tunnuskirjasimensa Helsinki Grotesk Pron 70 eurolla leikkaukselta. Omaleimainen typografia ei ole suurten budjettien yksinoikeus.

Suomessa ja lähialueilla valinnanvaraa on enemmän kuin moni arvaa: Typolar, Paavola Type Studio ja Hurme Design, ruotsalainen Letters from Sweden, islantilainen Or Type ja norjalainen Monokrom. Ilmaisista kotimaisista Jaapokki on vakiintunut otsikkofontti.

Neljä asiaa lisensseistä

• 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 pitää pyytää erikseen. 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 ilmainen 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 pitkimmä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.

Fontti ei yksin tee brändiä, mutta väärä fontti kertoo kävijälle mallipohjasta ennen ensimmäistä lausetta. Sarjan seuraava osa käsittelee värejä ja sitä, miksi violetti gradientti on tekoälyn tunnusmerkki.