5.3. CSS typografia ja fontit
Typografiaa ja fontteja CSS:llä
Typografia-asetukset voidaan asettaa sivustolle CSS-muotoiluilla. On melko tavallista, että se asetetaan esimerkiksi Elementor-editoria käytettäessä editorin sivuston laajuisista asetuksista. Omaan luomistyöhöni ja työskentelymetodeihin kyseinen metodi on hankalampi tapa kuin hallinnoida asioita CSS-tiedostossa. Makuja toki on monia. Katsotaan millaisia aspekteja CSS-typografian luomiseen liittyy ja millaisia vaihtoehtoja kannattaa pohtia.
Mistä fontteja?
Fontteja voidaan löytää useasta eri palveluista ja usein ne ovat ilmaiseksi käytettävissä vapaasti sivustolla. Hyviä fonttilähteitä ovat mm. Google FOnts ja Font Squirrel. Palveluista löytyy tuhansia fontteja mistä valita ja fontit ladataan omalle koneelle .zip-tiedostona, joka sisältää itse font-tiedostot, jotka voidaan asettaa oman teeman kansioon ja ottaa käyttöön sivustolla.
Ladataan sivustollemme käyttöön seuraavanlaiset fontit typografiaa varten. Klikkaa linkkiä ja lataa fontit sivustoilta.
- Leipäteksti: Open Sans (Google Fonts)
- Pääotsikot: Playfair display (Google fonts)
- Alaotsikot: Open sans condenced (Font Squirrel)
- Painikkeet: Source Sans Pro (Google fonts)
Typografian lisääminen
Typografia lisätään CSS-tiedostoon siten, että määritetään sivun body -osalle staattinen fontin koko pikseleinä (px) ja muut fonttikoot kannattaa määrittää suhteellisena arvona body:n staattiseen kokoon verrattuna. Suhteellisen koon määre on ”rem”, jossa 1rem on sama, kuin body-osaan asetettu fontin koko.
”Remmin” hyötyjä?
Typografia lisätään CSS-tiedostoon siten, että määritetään sivun html-tagille (<html>) staattinen fontin koko pikseleinä (px) ja muut fonttikoot kannattaa määrittää suhteellisena arvona body:n staattiseen kokoon verrattuna. Suhteellisen koon määre on ”rem”, jossa 1rem on sama, kuin body-osaan asetettu fontin koko.
- Skaalautuvuus ja saavutettavuus
- Käyttäjä voi muuttaa selaimen fonttikokoa (esim. esteettömyysasetuksista), ja rem skaalautuu automaattisesti.
- Jos käyttäjä asettaa selaimen fontin isommaksi, sivustosi pysyy käytettävänä.
- Johdonmukaisuus typografiassa
- rem-arvo antaa yhtenäisen vertailukohdan riippumatta siitä, missä elementissä sitä käytetään.
- em taas perustuu vanhemman elementin fonttikokoon, mikä voi tehdä laskemisesta monimutkaisempaa.
- Helpompi käyttää
- Responsiivinen suunnittelu helpottuu, koska voit asettaa sivun juurielementille (body) media-kyselyllä (@media) juurielementille toisen arvon, jolloin kaikkien rem elementtien koko muuttuu tietyssä näyttöresoluutiossa.
Typografiaa sivustolle
Luodaan sivustolle typografian perusasetukset. Aloitetaan rakenteleminen lisäämällä erillinen tyylitiedosto typografiaa varten. Nimeä tyylitiedosto vaikka typografia.css ja luo tiedosto css-kansioon. Samaan kansioon missä harjoitus.css-tiedosto sijaitsee.
Seuraavaksi täytyy ottaa tiedosto käyttöön sivuston head-osassa. Se otetaan käyttöön kopioimalla functions.php-tiedostossa harjoitus_script_enqueue muuttujassa harjoitus.css-tiedoston lisäävä koodi sen yläpuolelle ja muuttamalla tiedoston osoitteeksi /css/typografia.css. Tällöin toiminto lisää typografiatiedoston latautumaan ennen harjoitus.css-tiedostoa… Miksi näin?
On mahdollista, että halutaan vaikuttaa jonkin fontin ulkonäköön (esim. väriin) harjoitus.css-tiedostossa ja siksi on tärkeää, ettei typografia.css-tiedoston asetus yliaja haluttua muutosta. Siksi se on asetettava ”alempaan asemaan” latauksessa ja se on ennen harjoitus.css-tiedostoa.
typografia.css sisältö
Luodaan sivustolle perustypografia-asetukset typografia.css-tiedostoon. Tällä kurssilla keskitytään CSS-muotoiluun tiedostossa, joten typografia asetetaan tiedostossa kirjoittamalla CSS-muotoiluja. Tavallisesti harrastuksen vuoksi sivustoja tekevä peruskäyttäjä asettaa sivustolla käytettäviä fontteja ja niiden asetuksia editorissa, lisäosan kautta tai sivustolle asennetun teeman asetuksista. Me kuitenkin luomme oman sivuston koodaamalla, joten myös typografia asetetaan CSS-muotoiluilla CSS-tiedostoon.
Kopioi seuraavat muotoilut typografia.css-tiedostoon ja kerron tunnilla mitä merkinnät tarkoittavat.
/*FONTTIMÄÄRITTELYT*/
/*Sivuston staattinen perusfontti*/
html {
font-family: 'Open Sans', sans-serif;
font-size: 100%;/*Perustuu selaimen perusfonttikokoon*/
margin: 0;
padding: 0;
}
/*Fonttiperheet ja ominaisuudet*/
h1 {
font-family: "Playfair Display", serif;
font-optical-sizing: auto;
font-style: normal;
font-size: 3.4rem;
line-height: 1;
font-weight: 400;
letter-spacing: -1px;
}
h2 {
font-family: 'Open Sans Condensed';
font-optical-sizing: auto;
font-weight: 300;
font-size: 2.7rem;
line-height: 1;
font-weight: 400;
letter-spacing: -1px;
padding: 12px 0 5px 0;
}
h3, h4, h5, h6 {
font-family: "Open Sans", serif;
font-optical-sizing: auto;
font-variation-settings: "wdth" 80;
}
p, li {
font-family: "Open Sans", serif;
font-optical-sizing: auto;
font-weight: 300;
font-variation-settings: "wdth" 100;
}
/*Muita otsikoiden fonttikokoja*/
h3 {
font-size: 2rem;
line-height: 1;
font-weight: 400;
letter-spacing: -1px;
padding: 12px 0 5px 0;
}
h4 {
font-size: 1.3rem;
line-height: 1;
font-weight: 400;
letter-spacing: -1px;
padding: 20px 0 5px 0;
}
h5 {
font-size: 1.4rem;
line-height: 1;
font-weight: 400;
letter-spacing: -1px;
padding: 12px 0 5px 0;
}
h6 {
font-size: 1.4rem;
line-height: 1;
font-weight: 400;
letter-spacing: -1px;
padding: 12px 0 5px 0;
}
/*Leipätekstit*/
p, ul > li, ol > li {
letter-spacing: -.1pt;
font-size: 1rem;
font-weight: 400;
line-height: 1.2;
}
b, strong {
letter-spacing: 0;
font-weight: 600;
}
/*Poistetaan kaikkien linkkien alleviivaus*/
a {
text-decoration: none;
}
/*Gutenbergin luomat ylimääräiset tilat nollataan*/
h1, h2, h3, h4, h5, h6, p, ul, ol {
margin-block-start: 0;
margin-block-end: 0;
}
header .site-name {
font-size: 1.4rem;
line-height: 1;
font-weight: 600;
letter-spacing: -1px;
padding-top: 1rem;
padding-bottom: .3rem;
}
/*Poistetaan menuvalikkolistojen listamerkit*/
ul.menu li { list-style-type: none; }
/*Nollataan menu päävalikon Gutenbergin täyte vasemmalta.*/
ul.menu {
padding-inline-start: 0;
}
Fontit käyttöön
Kun ollaan asetettu perustypografia, fontit täytyy ottaa myös käyttöön ja ladata sivuston tiedostoihin. Metodissa käytetään fontteja paikallisesti omalta palvelimelta käsin.
Miksi paikallisesti?
Kun fonttitiedostot ovat oman teeman kansiossa ja niitä käytetään sivustolla teemasta, metodia kutsutaan nimityksellä paikalliset fontit. Tällöin varastoidaan fontit sivustolle paikallisesti. Toinen vaihtoehto on, että sivusto lataa fontit esimerkiksi Googlen palvelimelta sivuston käyttöön tarvittaessa. Sivuston lataamisen kannalta fonttien paikallinen varastointi on suositeltavaa. Turha fonttien lataaminen verkon yli jää pois. Siksi harjoitellaankin harjoitussivustollamme fonttien lisäämistä paikallisesti.
1. Lataa fontit teemaan
Kun olet ladannut sivustolla käytettävät fontit, tulee päättää mitä leikkauksia fonteista tullaan käyttämään sivustolla. Joissain ladatuissa fonteissa on jopa yli 10 erilaista leikkausta fontista. Jos fontista on kuitenkin olemassa ”Variable”-tiedosto, se sisältää kaikki leikkaukset fontista yhdessä tiedostossa ja sitä kannattaa käyttää sivustolla. Näin voit valita vapaasti mitä leikkausta fontista käytät.
2. Ei ttf vaan woff2
Variable-tiedosto kannattaisi olla .woff2 tiedostomuodossa sillä se on optimoidumpi muoto käytettäessä webissä. Useassa ladatussa fontissa tiedostomuotona on .ttf se kannattaa muuntaa .woff2-tiedostomuotoon esimerkiksi Cloudconvert nimisessä palvelussa.
3.Luo fonts-kansio fonttitiedostoille
Luo fonttitiedostoille oma kansio esimerkiksi css-kansioon ja nimeä kansio nimellä fonts. Nimeä fonttitiedostot oheisen koodauksen mukaan lyhentämällä tiedoston nimet ja siirrä tiedostot teeman kansiossa css-kansion sisällä olevaan fonts-kansioon. Avaa harjoitus.css– sekä typografia.css-tiedosto muokattavaksi ja kopioi oheinen koodirimpsu tiedostojen alkuun ja tallenna tiedostot.
CSS-määrittelyssä linkitetään fonttitiedostot näihin CSS-tiedostoihin ja käyttöön muotoiluissa. Nyt voidaan käyttää fontteja myös typografian asettamisessa ja fontteja käytetään paikallisesti eikä ladata turhaan verkon yli palveluista.
fonts.css sisältö
/*otetaan fontit käyttöön sivustolla*/
@font-face {
font-family: 'Open Sans';
src: url('fonts/OpenSans.woff2') format('woff2');
font-weight: 100 900;
font-style: normal;
}
@font-face {
font-family: 'Open Sans';
src: url('fonts/OpenSans-Italic.woff2') format('woff2');
font-weight: 100 900;
font-style: italic;
}
@font-face {
font-family: 'Open Sans';
src: url('fonts/OpenSans-CondLight.woff2') format('woff2');
font-weight: 100 900;
font-style: normal;
}
@font-face {
font-family: 'Playfair Display';
src: url('fonts/PlayfairDisplay.woff2') format('woff2');
font-weight: 100 900;
font-style: normal;
}
@font-face {
font-family: 'Playfair Display';
src: url('fonts/PlayfairDisplay-Italic.woff2') format('woff2');
font-weight: 100 900;
font-style: italic;
}
@font-face {
font-family: 'Source Sans 3';
src: url('fonts/SourceSans3.woff2') format('woff2');
font-weight: 100 900;
font-style: normal;
}
@font-face {
font-family: 'Source Sans 3';
src: url('fonts/SourceSans3-Italic.woff2') format('woff2');
font-weight: 100 900;
font-style: italic;
}
Teeman tiedostorakenne on nyt kokonaisessa laajuudessaan ja projektissasi pitäisi tiedostot näyttää Visual Studiossa alla olevan kuvan mukaiselta.
