Typografisella suunnittelulla on tärkeä rooli verkkosivujen suunnittelussa. Hyvin muotoiltu ja muotoiltu tekstisisältö auttaa sivustoa menestymään paremmin luomalla sekä nautinnollisen että helppokäyttöisen lukukokemuksen. Osa ponnisteluistasi työskennellessäsi tyypin kanssa on valita oikeat fontit suunnittelulle ja käyttää sitten CSS: ää näiden fonttien ja kirjasintyylien lisäämiseen sivun näyttöön. Tämä tehdään käyttämällä ns fontin pino.
Fonttipinot
Kun sinä määritä kirjasin Jos haluat käyttää verkkosivua, on suositeltavaa sisällyttää myös varavaihtoehtoja siltä varalta, että kirjasintyyppiäsi ei löydy. Nämä varavaihtoehdot on esitetty fontin pino. Jos selain ei löydä pinon ensimmäistä kirjasinta, se siirtyy seuraavaan. Se jatkaa tätä prosessia, kunnes löytää fontin, jota voi käyttää, tai loppuu valinnat (jolloin se vain valitsee minkä tahansa haluamasi järjestelmäkirjasimen). Tässä on esimerkki siitä, miltä fonttipino näyttäisi CSS: ssä, kun sitä käytetään "body" -elementtiin:
runko {
fonttiperhe: Georgia, "Times New Roman", serif;
}
Fontti Georgia ilmestyy ensin, joten oletusarvoisesti tätä sivua käytetään, mutta jos kyseinen fontti ei ole jostain syystä käytettävissä, sivu palaa Times New Romaniin.
Liitä Times New Roman lainausmerkeissä, koska se on monisanainen nimi. Yksisanaiset fonttien nimet, kuten Georgia tai Arial, eivät tarvitse lainausmerkkejä, mutta monisanaiset kirjasinten nimet, joissa on upotettuja välilyöntejä, tarvitsevat niitä, jotta selain tietää, että kaikki nuo sanat sisältävät fontin nimen.
Fonttipino päättyy sanaan serif. Se on yleinen fontin sukunimi. Siinä epätodennäköisessä tapauksessa, että henkilöllä ei ole Georgiaa tai Times New Roman heidän tietokoneellaan, sivusto käyttäisi mitä tahansa serif-fonttia, jonka se löysi. Selain valitsee fontin sinulle, mutta ainakin tarjoat ohjeita, jotta se tietää, millainen fontti toimisi parhaiten suunnittelussa.
Yleiset kirjasinperheet
CSS: ssä saatavana oleva yleinen fontin nimi on:
- kursiivinen
- fantasia
- yksitila
- serif
- sans-serif
Vaikka web-suunnittelussa ja typografiassa on tarjolla monia muita fonttien luokituksia, mukaan lukien laatta-serif, blackletter, display, grunge ja paljon muuta, näitä viittä yleistä fonttinimeä ovat ne, joita käytettäisit fonttipinossa CSS: ssä.
- Kursiiviset fontit - niissä on usein ohuita, koristeellisia kirjaimia, jotka on tarkoitettu jäljittelemään hienoa käsinkirjoitettua tekstiä. Nämä kirjasimet eivät sovi ohuiden, kukkaisten kirjaimiensa vuoksi suurelle sisällölle, kuten tekstikopio. Kursiivikirjasimia käytetään yleensä otsikoihin ja lyhyempiin tekstitarpeisiin, jotka voidaan näyttää suuremmilla kirjasinkokoilla.
- Fantasiafontit - ovat hieman hulluja fontteja, jotka eivät todellakaan kuulu mihinkään muuhun luokkaan. Fontit, jotka toistavat tunnettuja logoja, kuten Harry Potter tai Paluu tulevaisuuteen elokuvia, kuuluvat tähän luokkaan. Nämä kirjasimet eivät sovi rungon sisältöön, koska ne ovat usein niin tyyliteltyjä, että näillä kirjasimilla kirjoitettujen tekstien pitempien kappaleiden lukeminen on aivan liian vaikeaa.
- Monospace-fontit - Käytä yhtä suurikokoisia ja toisistaan erillisiä kirjaimia, kuten olisit löytänyt vanhasta kirjoituskoneesta. Toisin kuin muut fontit, joiden leveys vaihtelee kirjaimille niiden koosta riippuen (esimerkiksi iso kirjain) W vie paljon enemmän tilaa kuin pienet kirjaimet i), monospace-fontit käyttävät kiinteää leveyttä kaikille merkeille. Näitä fontteja käytetään usein koodien lukemiseen, koska ne näyttävät selvästi erilaisilta kuin muilla kyseisen sivun teksteillä.
- Serif-fontit - käytä vähän ylimääräisiä liitoskohtia kirjelomakkeissa. Näitä ylimääräisiä kappaleita kutsutaan serifit. Yleisiä serif-fontteja ovat Georgia ja Times New Roman. Serif-fontit toimivat erinomaisesti suurelle tekstille, kuten otsikolle, sekä pitkille tekstin ja tekstikopioiden kohdille.
- Sans-seriffontit - sinulla ei ole ligatureja. Nimi tarkoittaa ilman serifeja. Tämän luokan suosittuja kirjasimia ovat Arial tai Helvetica. Kuten serifit, sans-serif-fontit toimivat yhtä hyvin otsikoissa kuin kehon sisällössä, vaikka jotkut asiantuntijat pitävät parempana, että suuret tekstilohkot välttävät sans-serif-fontteja, koska niitä on vaikea lukea pienessä vaiheessa koot.