Fonttiparien esikatselu

Näin käytät fonttiparien esikatselua

1. Aloita jostain Ehdotetut parit -kohdan vaihtoehdosta (Toimituksellinen, Moderni blogi, Laskeutumissivu, Uutiset, Elegantti, Teknologialehti, Kirja, Klassinen, Dokumentaatio, Leikkisä). Jokainen painike näyttää, mitä otsikkofonttia ja leipätekstin fonttia se käyttää.
2. Tai valitse oma Otsikkofontti ja Leipätekstin fontti. Luettelot on ryhmitelty sans-serif-, serif-, display-, tasalevyisiin ja käsialafontteihin. Vaihda fontit vaihtaa nämä kaksi keskenään.
3. Säädä Otsikon koko, Leipätekstin koko ja Riviväli sekä valitse Otsikon paksuus (Lihavoitu (700) tai Normaali (400)). Valitse Tumma tausta tarkistaaksesi parin tummassa tilassa.
4. Korvaa Otsikkoteksti ja Leipäteksti omilla sanoillasi: oikea otsikko ja oikea kappale kertovat paljon enemmän kuin pangrammi. Jätä kappaleiden väliin tyhjä rivi.
5. Kopioi CSS-koodi ja seuraa sitten kohtaa Omalta palvelimelta ladattavat fontit Fontsourcella lisätäksesi fontit projektiisi.

Fontit latautuvat, kun valitset ne ensimmäisen kerran (noin 12–50 kt paksuutta kohti). Ne tarjoillaan tältä sivustolta, ei koskaan fonttien CDN-palvelusta.

Mikä tekee hyvästä fonttiparista hyvän

• Kontrasti, ei ristiriita. Klassinen resepti on serif toiselle roolille ja sans-serif toiselle: Playfair Display Lato-fontin päällä tai Montserrat Merriweatherin kanssa. Kaksi samankaltaista mutta ei identtistä fonttia (esimerkiksi kaksi geometristä sans-serifiä) näyttää usein virheeltä.
• Rauhallinen leipätekstin fontti. Leipätekstissä ihmiset viettävät aikansa. Valitse fontti, jossa on avoimet kirjainmuodot ja runsas x-korkeus (Inter, Lato, Open Sans, Source Serif 4, Merriweather) ja säilytä display-fontit, kuten Playfair Display, DM Serif Display, Oswald tai Caveat, lyhyille otsikoille.
• Yhteensopivat mittasuhteet. Fontit, joilla on samankaltaiset x-korkeudet, sopivat hyvin yhteen samalla rivillä ja samassa palstassa.
• Kaksi fonttia riittää. Luo hierarkia koon, paksuuden ja välien avulla kolmannen kirjasimen sijaan.

Luettavalle leipätekstille 16–20 px ja riviväli 1,4–1,7 on hyvä lähtöalue, ja rivillä on noin 60–75 merkkiä. Otsikot tarvitsevat yleensä tiiviimmän rivivälin (1,1–1,3), jonka CSS-koodi asettaa puolestasi.

Suomen kirjaimet ä, ö ja å kuuluvat Latin-osajoukkoon, joka latautuu kaikille fonteille. Esikatselu osoittaa siis suoraan, miltä suomenkielinen teksti näyttää. Jos tekstissäsi on harvinaisempia kirjaimia, kuten š tai ž, fontti tarvitsee latin-ext-osajoukon, jonka työkalu lataa, kun fontissa se on ja teksti sitä tarvitsee.

CSS-koodi

Koodi määrittelee kaksi mukautettua ominaisuutta, --font-heading ja --font-body, joilla kummallakin on varapino: jos verkkofonttia ei ole vielä ladattu, selain näyttää samankaltaisen järjestelmäfontin (Georgia serifeille, järjestelmän käyttöliittymäfontti sans-serifeille). Koot kirjoitetaan rem-yksiköinä (16 px = 1 rem), joten ne noudattavat lukijan selaimen kirjasinkoon asetusta.

Omalta palvelimelta tarjoilu ja lisenssit

Kaikki 20 fonttia tulevat Fontsourcesta, joka paketoi avoimen lähdekoodin fontteja npm:ää varten. Asennuslaatikko antaa npm install -komennon ja import-rivit latin-osajoukolle ja vain käyttämillesi paksuuksille. Niputtimesi kopioi sitten woff2-tiedostot koontiversioosi. Fonttien tarjoilu omalta verkkotunnukseltasi on nopeampaa (ei ylimääräistä yhteyttä), toimii offline-tilassa ja välttää vierailijoidesi IP-osoitteiden lähettämisen kolmannen osapuolen fonttipalveluun, mikä on tunnettu GDPR-ongelma EU:ssa.

Jokainen tässä oleva fontti on SIL Open Font License 1.1 -lisenssin alainen pakettinsa metatietojen mukaan: voit käyttää sitä verkkosivustoilla, sovelluksissa ja painotuotteissa, kaupallisesti tai ei, ja upottaa sen. Fonttitiedostoja ei saa myydä sellaisenaan. Jos muokkaat fonttia, sen on säilytettävä OFL-lisenssi, eikä se saa käyttää alkuperäistä varattua nimeä. Lisenssitiedosto sisältyy jokaiseen pakettiin.