Kuinka tehdä typografiasta herkkä

  • Tarvittava tieto: Perustiedot CSS: stä ja HTML: stä. Typografian tuntemus
  • Edellyttää: Suosikki tekstieditori ja selain
  • Projektin aika: Noin 30 minuuttia

Tukitiedosto 1

Olemme tottuneet ajattelemaan tyypin koon muuttamista suhteessa perusfonttikokoon käyttämällä ems tai prosenttiosuuksia. Kanssa reagoiva web-suunnittelu , kirjoitamme paljon sääntöjä ja valitsemme taittopisteitä varmistaaksemme, että asettelumme sopii moniin näyttökokoihin. Tyyppi on ihanaa nestettä, mutta se ei ole yksi koko. Tarkastelemme joitain nopeita vinkkejä typografia sovittamaan asettelusi hienosti riippumatta siitä, mitä laitetta tai näytön leveyttä sattuu olemaan.

Tähän on tietysti paljon enemmän kuin mitä yhdessä opetusohjelmassa voidaan käsitellä. Joten myös alla on runsaasti hyödyllisiä resursseja.

01. typografian saaminen mittakaavassa

Ah, reagoiva verkkosivujen suunnittelu! Ihanan sujuvat ruudukot ja mediakyselyt, joiden ansiosta mallit sopivat kaiken kokoisille näytöille. Onneksi meille, tyypin vaaka on lähes loputtomasti ja heijastuu mihin tahansa kokoiseen astiaan, jonka annamme. Tuskin tarvitsee antaa sille toisen ajatuksen reagoivista asetteluistamme ... vai eikö niin? Ihannetapauksessa, kun yleiset asettelumme skaalautuvat, myös meidän tyypin tulisi olla, ja tässä on yksi tapa tehdä se.



02. Näytesivumme

Tämän esimerkin tarkoituksiin olen laatinut hyvin yksinkertaisen sivun, jota voidaan käyttää esittelyyn, käyttäen sisältöä Alice's Wonderlandin seikkailuja. Sivustollasi on toivottavasti hieman enemmän, mutta yksinkertaisuus sopii täydellisesti tämän demon tarpeisiin ja samaa tekniikkaa voidaan soveltaa monimutkaisemmille sivuille.

Katsotaanpa lähteemme nähdäksesi, mitä meillä on hupun alla. H1 otsikollemme ja muutama kappale, joka on kääritty sisältävään div: iin, osoitti kätevästi käärimisluokan. Käytämme tätä säilöä apuna tämän esimerkin viivanpituuksien hallinnassa. Omassa työssäsi tämän säiliön leveys määräytyy ruudukon ja sen reagoivan käyttäytymisen perusteella, mutta samat ideat ovat voimassa.

Pika upotus CSS: ään osoittaa, että olemme asettaneet kehon fonttikokoksi 100% (noin 16 kuvapistettä viitteeksi). Ja jokainen tekstielementti on kooltaan ems. Mukava ja suhteellinen! Aloitamme hyvin:

runko {
kirjasinkoko: 100%;
viivan korkeus: 1,6875;
font-perhe: Georgia;
}

Meillä on kaikki typografian perustaajuus asetettu, joten katsotaanpa, miten tämä kestää eri näytön kokoja.

03. Tarkistetaan ensin pienin näyttö

Aloitetaan katsomaan asetteluamme hyvin pienellä näytön leveydellä, sanotaan noin 320 pikselin levyinen. Todennäköisesti mitä näet näistä suosituista mobiililaitteista.

Aluksi tällä kapealla leveydellä viivan pituudet ovat hieman lyhyempiä kuin yleisesti hyväksytty optimaalinen pituus 45 ja 75 merkkiä. Tai jos et halua laskea merkkejä, saatat huomata, että rivit tuntuvat lyhyiltä ja vaikeuttavat tekstin seuraamista. Henkilökohtaisesti minulla on tapana mennä lukutuntumaan useammin kuin ei.

Saadaksemme hieman enemmän tilaa mukavalle viivan pituudelle voimme pienentää tyypin kokoa tai tehdä kontistamme hieman isomman. Koska tämä on tyypin mitoitusopetus, aion mennä ensimmäisen kanssa, mutta jälkimmäinen olisi myös täysin hyväksyttävä vaihtoehto.

Hoidamme tämän kirjoittamalla mediahaun enintään 400 pikselin leveydelle. Kyllä, se ei ole tarkalleen 320 pikseliä, mutta mieluummin asetan katkaisupisteet sen perusteella, missä suunnittelu osoittaa niiden tarpeen, ei tiettyjen laitemittausten perusteella.

Helpoin tapa muuttaa kaiken tyyppistä kokoa on muuttaa meille määritettyä kokoa kirjasinkoko-ominaisuus:

Vain @media-näyttö ja (enimmäisleveys: 400px) {
body {font-size: 90%;}
}

Kiitos siitä, että olemme koonneet kaiken tyyppimme aluksi emillä, voimme tehdä tämän muutoksen kautta linjan vain yhdellä rivillä. Jee, suhteellisen tyypin mitoitukseen!

kuinka saada kuva photoshopiin

04. Siirtyminen ylöspäin

Jos teemme kuten web-suunnittelijat tekevät ja jatkamme selainikkunamme koon muuttamista, suhteellisen kokoinen säilömme kasvaa jatkuvasti ja tekstimme heijastuu kulkiessamme. Juuri mitä odotat. Mutta pidä silmällä viivan pituutta. Milloin se alkaa näyttää ja tuntua liian pitkältä?

Noin 800 pikselin leveydellä (selaimen koko ikkunan koosta) viivan pituudet alkavat näyttää epämiellyttävän pitkiltä. Näyttää hyvältä ajalta lisätä uusi katkaisupiste tyypillemme.

Vain @media-näyttö ja (enimmäisleveys: 800px) {
body {font-size: 100%;}
}

Vain @media-näyttö ja (enimmäisleveys: 1100px) {
body {font-size: 120%;}
}

Tältä näyttää sivumme nyt millä tahansa ikkunan leveydellä 800–1100 pikseliä. Meillä on vähän enemmän tilaa työskennellä ja nyt tyyppimme täyttää sen hieman mukavammin:

Tällä kertaa kirjoitamme kaksi mediakyselyä. Yksi, jonka enimmäisleveys on 800 pikseliä ja rungon kirjasinkoko on asetettu 100%: iin, joka kattaa kaiken 500 pikselin ikkunan ja 800 pikselin ikkunan leveyden välillä, sitten sekunnin, kun ikkunan leveys on yli 800 pikseliä, jotta voimme lisätä peruskirjasinkoko.

Olen kasvattanut peruskirjasinkoon 120%: iin, kun siirrymme yli 800 pikselin leveydelle saadakseni viivan pituuden hieman pidemmälle. Tämä on tietysti hieman subjektiivista ja riippuu myös sisällöstä itsestään ja ympäröivästä sisällöstä. Valitse katkaisupisteet ja kokomuutokset, jotka ovat järkeviä sinulle ja suunnittelullesi. Tavoitteena on mukava lukeminen ja tasapainoinen asettelu. Asettelujen testaaminen muulla kuin vain kooltaan muutetulla työpöydän selaimella auttaa sinua saavuttamaan parhaatkin paikat myös näille.

05. Ylös ja pois!

Voit arvata, mitä seuraavaksi tulee, aion jatkaa selainikkunani laajentamista ja nähdä, mitä tapahtuu. Ei ole yllättävää, kun linjan pituudet pitenevät ja ne alkavat lähestyä sietämätöntä pituutta jälleen noin 1100 pikseliä. Aika uudelle katkaisupisteelle? Voisimme vain jatkaa ja jatkaa näin loputtomiin, mutta se ei näytä niin fiksulta, tämä alkaa tuntua loputtomalta!

Teknisesti tyyppisi voi jatkaa mittakaavansa loputtomasti. Mahdollisuutesi ovat kuitenkin asettelu ja kuvat eivät. Jossain vaiheessa meidän on pidettävä taukoja. Ja tässä yksinkertaisessa esittelyssä olen päättänyt, että piste on 1100 pikseliä.

Viimeinen tyyppiin liittyvä mediakysely on vielä kirjoittamatta. Haluan jotain, joka pysäyttää viivan pituuden kasvun, jotta voimme jäädyttää asiat tässä vaiheessa, jossa meillä on hyväksyttävät viivanpituudet. Helpoin tapa saada tämä tapahtumaan on asettaa enimmäisleveys tekstin sisältävälle div: lle.

Ensin on määritettävä sisältävän div: n likimääräinen leveys pikseleinä. Jos selainikkunamme on 1100 pikseliä leveä ja kääreosastomme leveys on 70%, pieni matematiikka kertoo meille, että div on noin 770 pikseliä. (1100 *, 7x).

Aseistettuna muokkaamme viimeistä mediakyselymme näin:

Vain @media-näyttö ja (min-leveys: 1100px) {
body {font-size: 120%;}
.wrap {max-width: 770px;}
}

Demomme tyyppi on yhtä suuri kuin olemme päättäneet, että sen saa:

Siellä meillä on se. Yksinkertainen tekniikka pitää tyyppisi mukavan ja mukavan lukea useilla näyttökokoilla.

06. Yhteenvetona

Jopa tästä yksinkertaisesta esimerkistä olet todennäköisesti alkamassa nähdä, että voisit olla paljon yksityiskohtaisempi siitä, mihin lisäät tyypin rikkoutumispisteet linjan pituuden hallitsemiseksi. Entä sitten johtajuus ja hierarkia? Nämä vaikuttavat myös, kun säiliön ja tyyppikoko muuttuu. On niin paljon harkittavaa!

Pidä silmällä tyyppiäsi ja tee sitten säätöjä missä on järkevää asettelulle ja projektille. Kyse ei ole siitä, kuinka monta mediakyselyä tai katkaisupistettä lisäät. Kyse on siitä, että suunnittelustasi tulee vakaa sinulle ja kaikille sitä käyttäville.

07. Lisälukemista

Tämä yksinkertainen esittely on vain jäävuoren huippu. Jos reagoivan verkkosuunnittelun typografia on jotain, josta haluat lukea lisää, tässä on joitain suositeltuja lukemisia:

Val Head on suunnittelija ja konsultti, joka haluaa nähdä Internetin pysyvän mahdollisimman mahtavana. Hän johtaa Web Design -päivää, kirjoittaa CreativeJS: ään ja blogeihin osoitteessa valhead.com.

Piditkö tästä? Lue nämä!