Yksinkertainen opas reagoivaa typografiaa varten
Suurin osa artikkeleista, jotka puhuvat reagoivasta suunnittelusta, keskittyvät kahteen pääalueeseen: nesteen, joustavan verkon ja nesteen, joustavien kuvien. Monet niistä eivät puhu typografiaa.
Ja vielä, suurin osa verkkosivustoista teksti, sisältö, on tärkein tekijä.
Hyväksytty, sillä sivustot, joissa kuvat tai video ovat ensisijainen sisältö, reagoiva tyyppi on vähän vähemmän tärkeä, mutta sitä ei silti saa jättää huomiotta.
Hyvä uutinen on, että reagoiva typografia ei ole erityisen vaikea saavuttaa. Sinun tarvitsee vain jonkin aikaa ajatella, miten tyyppisi vastaisi näytön koon muutoksiin, ja toteuttaa nämä muutokset.
Herkän tyypin periaatteet
On olemassa kaksi pääperiaatetta tehokkaan reagoivan typografian luomiseen. Ensimmäinen on muokattava tyyppi. Tämä tarkoittaa sitä tyyppiä, joka ei vain muuta kokoa näytön kokoa vaan myös käyttäjän muokattavissa olevaa kokoa.
Toinen on optimoidut rivin pituudet, jotka pitävät luettavuutta. Tämä tarkoittaa sitä, että jotkut näytöt pitävät sisällön aluetta pienemmäksi ja lyhyemmät linjat ovat järkevämpiä, vaikka sisältö saattaa teoreettisesti ulottua laajemmalle.
Muokattava tyyppi remmillä
Useimmat suunnittelijat käyttävät joko pikseleitä tai ems -tyyppisiä mittasuhteita. Ems on parempi vaihtoehto, koska käyttäjät voivat muuttaa selaimen tyypin. Mutta ems on suhteessa vanhempielementtiin, mikä tarkoittaa, että ne ovat monimutkaisempia kuin pikseleitä, jotka yhdistetään vain reagoivissa malleissa, joissa on enemmän kokoja ja suhteita.
Rems tarjoavat paremman vaihtoehdon emsille. Ne toimivat lähes identtisellä tavalla, paitsi yksi keskeinen ero: rem yksiköt ovat suhteessa html elementti, eikä yksittäisiä elementtejä. Tämä tekee tyypin asianmukaisen mitoituksen pitämisen paljon yksinkertaisemmaksi.
Rem-yksiköitä tuetaan nyt kaikissa suurimmissa nykyaikaisissa selaimissa, mukaan lukien Opera 11.6 ja IE9 -versiot. Vaikka haluat ehkä sisällyttää aikaisempien selainten takavarikointiin, on olemassa riittävästi tukea, jotta ne voisivat käyttää niitä nyt.
Koska käytät kalibrointityyppisiä rem-yksiköitä, varmista, että käytät nollausta omaan html elementti eikä sinun body elementti. Joten sen pitäisi näyttää tältä:
html { font-size:100%; }
Nyt sinun rem-yksikkösi käytetään laitteen oletusfonttikokoon.
Seuraavaksi sinun on määritettävä kunkin näytön koon fonttikoko. Suosittelen kokeilla todellisten fonttien koon eri laitteilla nähdäksesi, mikä näyttää parhaiten. Se on pitkälti riippuvainen valitsemastasi kirjasintyypistä ja koko mallistasi.
Luultavasti haluat määrittää useita eri fonttikohtia eri näytön koon mukaan, mikä on varsin suoraviivaista. Esimerkkinä CSS voi näyttää tältä:
@media (max-width: 640px) { body {font-size:1.2rem;} } @media (min-width: 640px) { body {font-size:1rem;} } @media (min-width:960px) { body {font-size:1.2rem;} } @media (min-width:1100px) { body {font-size:1.5rem;} }
Hyväksytty, tämä on yksinkertaistettu koodi tässä artikkelissa, mutta antaa sinulle lähtökohta. Saatat huomata, että pienimmillä näytöillä on hieman suurempi fonttikoko. Tämä johtuu siitä, että isommat kirjasimet ovat yleensä helpompi lukea pienillä näytöillä.
Haluat tietenkin tehdä lisäspesifikaatiota esimerkiksi sinun h1 elementtejä ja niin edelleen. Suosittelen käyttämään tällaista työkalua Web-kirjasimenetelmä nähdä, miten tyyppisi todella näyttää.
Optimaalisten rivien pituuden ylläpitäminen
Vaikka resizeable -tyyppinen malli on melko yksinkertainen käsite, ylläpitämällä asianmukaisia viivojen pituuksia useiden laitteiden välillä saa hieman haastajan. Keskustelua siitä, mitä optimaalinen linjan pituus on luettavuuden kannalta, on ollut melko vähän, mutta sen mukaan Baymard-instituutti , konsensus näyttää olevan välillä 50-75 merkkiä riviä kohden.
He suosittelevat myös kiinteän leveän kontin käyttöä sisältöäsi varten, mutta se heikentää reagoivan suunnittelun tarkoitusta, joten meidän on lähestyttävä asioita hieman eri tavalla, jos haluamme ylläpitää reagointia optimoidulla rivin pituudella.
Ensinnäkin tarkastele eri näytön koot, jotka suunnittelet ja selvitä, minkä kokoinen kirjasin haluat käyttää, jotta saadaan noin 50 merkkiä rivillä. Hyvin pienille näytöille saatat joutua menemään alle 50 merkkiä riviä pitämään luettavia fonttikoon, mutta 50: n pitäisi olla tavoite. Tämä antaa meille hyvän lähtökohdan kirjasinkokoon.
Meidän pitäisi myös asettaa suurimmat leveydet (tai rikkoutumispisteet) tekstisisältöalueille. Katso käyttämäsi tyypin koko tietyn ruudun kokoa varten ja määritä sitten sisällön säilön leveys, kun kustakin riviltä on noin 75 merkkiä. Tämä ei ole tarkka, ellet käytä monospace fonttia, mutta sinun pitäisi pystyä keksimään keskimäärin melko helposti. Tästä tulee suurin kontin leveys.
Oletetaan, että tietyn laitteen oletuskoko on 16px, ja haluat, että fonttikoko on 20px (sanotaan, että käytämme serif-kirjasintyyppiä, kuten Droid Serif, tässä esimerkissä). Tämä tarkoittaa, että määrität tyypin 1.25rem. Tällöin haluat, että kontin leveys on noin 675px leveä. Tämä antaa meille keskimäärin merkin määrän 60-luvulla, mikä on oikein tavoiteleveydellämme.
Määritä kontin leveys vain käytä tätä koodia:
@media (min-width: 950px) { .container {width:675px;} }
Voit asettaa enimmäisviivan leveydet kullekin näytön koolle tai vain tietyille näytöille. Pienemmillä näytöillä saatat haluta jättää säiliön leveyden ulos ja antaa sen tyypin levitä koko näytön leveydelle.
Nyt, paljon suurempia näyttöjä, kannattaa tarkastella sisältösi jakamista useisiin sarakkeisiin. Oletetaan esimerkiksi, että työskentelet iPadin kanssa maisemakuvauksessa. Näytön leveys on 2048 pikseliä. Tasojen täyttäminen näytön täyttämiseksi vaikeuttaa lukemista, mutta sisällön keskittäminen ja linjan pituuksien pitäminen lyhyemmällä tavalla heikentää sisällön katselua maisematilassa.
Aseta sen sijaan tyypillesi kaksi saraketta (tai jopa kolme fonttia koosta riippuen). CSS3: n moniparsaspesifikaatio tekee tekstistä helppo jakaa useisiin sarakkeisiin muuttamatta koko ulkoasua. Yhdistä tämä median kyselyihin ja sinulla on nyt sisältöasettelu, joka jakautuu kahteen tai kolmoiseen sarakkeeseen suuremmille näytöille ylläpitämällä sekä luettavia tyyppiä että erittäin luettavia viivan pituutta.
Jälleen koodi tämän tekemiseksi on melko yksinkertainen:
@media (min-width:1140px) { .content { -webkit-column-count: 2; -webkit-column-gap: 1em; -moz-column-count: 2; -moz-column-gap: 1em; column-count: 2; column-gap: 1em; } }
Nyt 1140 pikselin leveämmälle näytölle saat sisällön jakautuneen kahteen sarakkeeseen, jolloin rivin pituudet ovat paljon helpommin luettavissa.
Vaihtoehtoisten kirjasimien käyttäminen
Yksi asia, jota usein unohdetaan puhuttaessa reagoivasta typografiasta, on ajatus siitä, että eri kirjasimet eivät välttämättä toimi hyvin eri kokoja. Tämä pätee erityisesti näytön fontteihin.
Tarkoittaako tämä sitä, että sinun pitäisi välttää näiden fonttien käyttämistä reagoivissa kuvioissa? Ei tietenkään. Sen sijaan määritä eri kirjasimet eri osiin suuremmissa tai pienemmissä asetteluissa.
Esimerkiksi pöytätietokoneiden suunnittelussa saatat haluta käyttää fonttia kuten League Script otsikoista. Mutta pienemmällä näytöllä, kuten iPhonella, sinun on joko tehtävä niin suuri, että se hallitsee sisältöä, tai sitä on vaikea lukea.
Mitä voimme tehdä tässä, käytä suurempien näyttöjen (iPad, työpöytää jne.) League Script -ohjelmaa siirtyessämme pienempien näyttöjen (kuten iPhonen tai muiden älypuhelinten) runko-fontin suurempaan versioon.
Voit tehdä tämän vain mainitsemalla jotain tällaista:
@media (min-width:960px) { h1 {font-family:"League Script", script;} } @media (max-width:960px) { h1 {font-family:"Droid Serif", serif;} }
Tietenkin tämä voidaan tehdä enemmän kuin vain otsikoillesi.
johtopäätös
Vaikka reagoiva muotoilu on pitkälti keskittynyt kuviin ja kokonaissuunnitteluun, typografia on yhtä tärkeä kuin molemmat asiat. Parasta on se, että typografiaa ei ole erityisen vaikea sopeuttaa ja optimoida herkälle suunnittelulle.
On tärkeää, että laitat samaan aikaan ja vaivaa siihen, että panet suunnittelusi muihin elementteihin. Tekstisisältötietojen luettavuus on olennainen osa optimaalisen käyttäjäkokemuksen luomista vierailijoille.
Pidätkö niin paljon huomiota herkkään typografiaan kuin malleissasi, kun teet herkkiä ruutuja ja kuvia? Miksi tai miksi ei?