Vastaavan Web-typografian säännöt

Responsitiivinen Web-typografia on kova - sinulla on oltava sekä suunnittelu chops että tekninen osaaminen. Mutta kuitenkin hankalaa se voi olla, saada se väärin ei ole vaihtoehto, koska typografia on web-suunnittelun kulmakivi.

Miten saat sekä suunnittelun että koodin oikein? Miten kehittäjät kommunikoivat Pixel-pushing suunnittelijoiden kanssa? Miten suunnittelijat voivat tehdä epämiellyttäviä kehittäjät huolehtivat typografiasta? Nopein ja yksinkertaisin tapa on saada suunnittelijat ja kehittäjät puhumaan samaa kieltä, kunnioittamaan toisiaan alustaan ​​ja pyrkivät ymmärtämään sekä verkkoympäristön periaatteita että rajoituksia.

Tässä artikkelissa pyritään antamaan sekä suunnittelijat että kehittäjät säätiöllä, josta aloittaa tiedonanto typografian aiheesta. Kannatamme tarvittavat suunnitteluperiaatteet ja tutkimme käytännön ratkaisuja Vastaava typografia .

Mikä on hyvä typografia?

"Hyvä" on aina subjektiivinen; Se ei ole kiinteä ankkuri, jota voimme saranoida viestintää. Suunnittelijoille ja kehittäjille kommunikoida tehokkaasti, meidän on aloitettava puhumalla yhteisestä nimittäjästä, jota molemmat osapuolet voivat ymmärtää. Tämä nimittäjä on typografian tarkoitus.

Typografia on tekstin ulkonäkö; Olemme pukeutuneet tekstin ylös. Pukeutumisen tarkoituksena on tehdä käyttäjän houkuttelevan tarpeeksi houkutella keskustelua, mutta ei ole niin paljon huomiota, että toinen osapuoli häiritsee keskustelusta.

Samoin typografian tarkoituksena on antaa lukijoille keskittyä ja upottaa itsensä tekstin sisältöön. Hyvä typografia on määritelmän mukaan typografia, joka auttaa tekstiä täyttämään viestinnän tarkoituksen.

Kaksi asiaa on tapahduttava lukijoille keskittyä ja upota itseään tekstiin. Ensinnäkin typografia on välitettävä sopiva (jos sellainen) tunteet. Toiseksi teksti on helppo lukea. Tämä tuo meidät neljään olennaiseen kiinteistöön, sinun täytyy saada oikealle.

• Fonttiperhe
• Fonttikoko
• Linjan korkeus (kutsutaan myös johtavaksi)
• Tekstin leveys (kutsutaan myös tekstiksi)

Oikean fonttiperheen saaminen auttaa tekstin taustalla olevia tunteita loistaa läpi. Muiden kolmen ominaisuuden saaminen oikein varmistaa, että teksti on helppo lukea. Useimmiten suunnittelijat ovat erinomaisia ​​löytää oikea fonttiperhe. Joten loput tämän artikkelin keskitymme muihin kolmeen tekijään.

Luettavissa oleva teksti

Ensimmäinen vaihe missä tahansa projektissa on asettaa Fonttikoko , viivankorkeus ja leveys kehon tekstistä. Tätä prosessia kutsutaan kirjoituslaitteeksi. Aloita kirjoituksella sivulla, joka sisältää tietoja käyttäjien tarpeisiin. Niin paljon kuin mahdollista, tämän sivun tulisi sisältää useita elementtejä, kuten H1, H2, H3, Kehon teksti ja kuvatekstit, joista sinun on tehtävä tietoinen valinta siitä, mikä toimii suunnittelussa. Mitä enemmän elementtejä sivusi sisältää paremmat mahdollisuudet asettaa tyyppihyväksyn, joka toimii koko laudalla.

Kun valitset Fonttikoko , viivankorkeus Ja mitata kehon tekstiä, varmista, että käytät todellista sisältöä. Jos sinulla ei ole todellista sisältöä, käytä tekstiä Wikipediasta Lorem Ipsumin sijaan.

Sinun on myös asetettava itsesi samaan tilanteeseen, jota kirjoitat, koska etäisyys lukijan silmien ja näytön välillä on erilainen eri laitteille. Jos olet kirjoittanut mobiililaitteelle, katso lähtösi puhelimen kautta. Jos olet kirjoittanut kannettavan tietokoneen, istu pöydälläsi kannettavan tietokoneen ja niin edelleen.

Kun olet asettanut itsesi oikeaan ympäristöön, aloita kirjoitusprosessi valitsemalla ensin Fonttikoko , jota seuraa toimenpide ja lopulta viivankorkeus . Muista, että ei ole täydellistä yhdistelmää - katsokaa vain muita sivuja, jotka tunnet, että sinulla on hyvä typografia ja näet, ettei mikään niistä käytä samaa Fonttikoko , viivankorkeus ja mitata. Joten, mitä pyritään, on yksinkertaisesti teksti, joka on helppo lukea.

Oikeiden koon asettaminen on vaikeampaa selittää kirjallisesti, joten olen tehnyt joitakin videoita, jotka auttavat sinua ulos Fonttikoko , mitata ja johtava .

Seuraavassa on joitain nopeita ohjeita, joiden avulla voit varmistaa, että sinulla on hyvä kirjasinkoko, johtava ja mittaus.

Fontti on liian pieni, jos:

• Sinun on keskityttävä tekstin lukemiseen
• Sinun täytyy squint silmäsi
• Sinulla on halu zoomata

Fontti on liian suuri, jos:

• Aloitat huomaamatta kirjaimia sisällön lukemisen sijaan
• Voit lukea vain yksi tai kolme sanaa kerrallaan
• Sinulla on halu suurentaa

Tekstin mittasi on liian pitkä, jos:

• Sinun täytyy kääntää päätäsi lukemaan teksti
• Menetät keskittymisen puoliväliin läpi

Tekstin mittasi on liian lyhyt, jos:

• Sinusta tuntuu ärtyneeltä, kun teksti rikkoutuu seuraavaan riviin
• Silmäsi väsyvät pomppimasta vasemmalle ja oikealle nopeasti

Johtava on liian kapea, jos:

• Teksti tuntuu tiheästä ja ylivoimaisesta
• Luet väärän tekstin linjan vahingossa

Johtava on liian suuri, jos:

• Saat hajamielinen sanojen rivien valkoinen tila

Muista aina hyvän typografian määritelmä: Et ole täydellisyyden jälkeen, olet yksinkertaisesti helppoa, joka on helppo lukea. Näin teemme, että haluat testata kirjoitusvalintoja yleisösi (ystävät ja työtoverit tekevät myös suuria testaajia) varmistaaksesi, että olet oikeassa. Siirry vain muiden elementtien koon asettamiseen, kun olet lopettanut korin tekstin kirjoittamisen.

Muita elementtejä

Monet suunnittelijat ja kehittäjät valitsivat Fonttikoko Elementtejä, kuten H1 ja H2 visuaalisesti, ja yksinkertaisesti toivovat, että nämä maagiset numerot toimivat hyvin niiden suunnittelussa. Mutta ei tarvitse vain vetää numeroita ohut ilmaa; Typografit ovat käyttäneet typografiaa vuosisatojen ajan auttamaan tätä. Mitä teet, on valita numero typografia-asteikolla elementtisi kokona. Valitettavasti näitä vaakoja ei voi käyttää suoraan verkkoon, koska ne on rakennettu tulostusuunnitteluun.

Tim Brown, typografian asiantuntija, tuli ratkaisu, jota kutsutaan modulaariseksi asteikolla. Se toimii täsmälleen kuin typografia-asteikko, paitsi että rakenna modulaarinen asteikko kehon tekstin kanssa, jonka olet päättänyt.

Luodaan modulaarinen asteikko, otat kehon tekstin Fonttikoko (kutsutaan myös base font-size) ja kerro se suhde useita kertoja, kunnes saat asteikon. Usein käytön suhde on peräisin musiikista (koska musiikki on juuria harmoniassa). Edellä on esimerkki asteikolla, joka on luotu a Modulaarinen asteikko laskin .

Kun olet valmis rakentamalla modulaarinen asteikko, voit siirtyä muusta elementtien kirjoittamiseen, kun valitset numeron asteikolla Fonttikoko . Aseta sitten johtava ja mittaa samalla prosessilla, kunnes saat hyvän tasapainon luettavista elementeistä.

Pystysuora rytmi

Seuraava askel on auttaa geeliä yksittäisiä elementtejä yhdessä käyttäen pystysuoraa rytmin tekniikkaa. Yhden elementin virrata harmonisesti seuraavaan, meidän on säädettävä asia, joka liittyy heille: valkoinen tila. Tämä valkoinen tila on riittävän suuri erottamaan yksi elementti seuraavasta selvästi, mutta sen on oltava riittävän pieni, jotta virtaus ei ole rikki.

Kuinka paljon valkoista tilaa sinun pitäisi käyttää? Monet suunnittelijat valitsevat luku, kuten 10px, joka on helppo suunnitella ympärillä. Monet kehittäjät toisaalta pyrkivät satunnaisesta numerosta (kuten 6px) joko toisesta verkkojärjestelmästä tai artikkelista, jonka he ovat lukeneet verkossa. Ei ihme, että nämä kaksi eivät voi kommunikoida.

Kuten voitte kuvitella, ei ole tarpeen luottaa maagiseen numeroon valkoiseen tilaan; Voimme käyttää useita viivankorkeus kehon tekstin arvo. Tämä johtuu siitä, että me vaistomaisesti tunnistaa valkoiset tilakuviot tekstissä. Vahvempi malli, turvallisempi tuntuu, ja sitä helpompi on antaa mielemme vaeltaa sisältöön.

Käytä pystysuoraa rytmiä, kaikki mitä teet on:

1. Aseta valkoinen tila elementtien välillä pohjaan viivankorkeus
2. Aseta viivankorkeus kaikista muista elementeistä viivankorkeus

Kyseisen moninkertaistumisen ei tarvitse olla kokonaisluku. Voit käyttää arvoja, kuten 0,5x ja 1,25x pohjasta viivankorkeus antaa sinulle enemmän joustavuutta. Nämä arvot toimivat, koska pystysuora rytmi käyttää toistumisen periaatetta.

Baseline Grid tai Ei?

Aina kun mainitsemme vertikaalisen rytmin, perusverkon käsite väistämättä tulee väistämättä kuvaan. Vaikka perusverkko voi olla hyödyllinen, se on enimmäkseen junan hylky, koska aloittelijat keskittyvät niin paljon energiaa tekemään tekstiä (tai on) perusviivojen välillä, että he kokevat olevan mahdotonta saada pystysuora rytmi oikealle.

Rehellisesti, et koskaan saa perusverkkoja työskennellä täydellisesti verkossa, koska tyypillisesti matematiikka sisältää aina alipisteet (kuten 24.8px) ja kaikki selaimet käsittelevät alipisteet eri tavalla. Esimerkiksi jotkin selaimet aiheuttavat jokaisen sivun elementin pois 1px: llä. Nämä 1px-virheet kerääntyvät ja työnnä kaikki elementit, jotka on asetettu alas alaspäin sivulle vieläkin pois päältä. Tämän seurauksena suosittelen käyttämään perusverkkoa.

Siirtyminen, astumme reagoivien käytäntöjen valtakuntaan ja suunnittelemaan useita näytöitä.

Typografia useille näytöille

Typografian suunnittelu useille näytöille ei ole keskiarvo. Meidän on tehtävä kolme asiaa suunnittelusta.

Ensinnäkin käyttäjän silmien ja niiden näytön välinen etäisyys riippuu siitä, millaista laitetta he käyttävät. Yleensä käyttäjä asettaa laitteen kauempana, kun käytät suurempaa näyttöä. Tämä ilmiö tarkoittaa, että sinun on lisättävä fonttikokoja, kun laitteen leveys kasvaa.

Toiseksi haluamme pitää mittasuhteet kehon tekstin ja muiden elementtien välillä johdonmukaisesti. Tämä tarkoittaa, että meidän on lisättävä kaikkien elementtien kokoja, kun lisäämme kehon tekstin kokoa.

Kolmanneksi, tiettyjen katkaisupisteiden avulla haluamme lisätä Fonttikoko erityisiä elementtejä (kuten h1) valitsemalla eri numero modulaarisesta asteikolla. Näin voimme hallita visuaalista hierarkiaa ja varmistaa, että elementit keräävät tarpeeksi huomiota vetämään käyttäjä lukemaan.

Hyväksyttävä tyypillinen tyypillinen

Tiedämme, että meidän on lisättävä tekstikumppaneita suhteellisesti. Helpoin tapa tehdä tämä on lisätä Fonttikoko sisällä html valitsin. Haluamme myös käyttää suhteellisia yksiköitä käyttäjän kunnioittamiseksi Fonttikoko Etusija.

 HTML {font-koko: 100%;}
@Media (min-leveys: 40EM) {
 HTML {Font-koko: 112,5%;}
} 

Haluamme myös käyttää suhteellista yksikköä muille elementeille, joten ne skaalaavat HTML: n mukaan Fonttikoko ( h2 alla olevassa esimerkissä). Jos haluat muuttaa Fonttikoko eri numeroon modulaarisella asteikolla, kaikki mitä teet, on muuta Fonttikoko asianmukaisesti ( h1 alla).

 H1 {Font-koko: 2.369EM;}
@Media (min-leveys: 40EM) {
 html {font-koko: 3.147em;}
}

H2 {Font-koko: 1.777EM;} 

Vaikka prosessi näyttää yksinkertaiselta, uudet kehittäjät saattavat kohdata tonnin päänsärkyä, koska matematiikan mukaan, minkä vuoksi suosittelen toimintoja ja sekoittamista. Käytän usein neiti() peräisin Modulaarinen asteikko kirjasto . Tämän avulla voit kirjoittaa MS (4) sijasta 3.157EM ja MS (3) sijasta 2.369EM .

Esimerkki toiminnasta, joka voi helpottaa pystysuoran rytmin laskemisen kuormitusta:

  @function vr ($ rytmi) {@return $ rytmi / 16 * 1rem;} 

Tämä vr Toiminnalla voit kirjoittaa VR (3) Kolmen baseliinin moninkertaiselle sijaan laskemalla se itse. Auttaa sinua (ja itseäni) entisestään, olen luonut reagoivan typografian kirjaston Typsi .

Suhteelliset yksiköt

Kaikki keskustelut suhteellisista yksiköistä päättyy kysymykseen siitä, onko sinun käytettävä rem tai em yksiköt. Uskon, että rem ja em On ainutlaatuisia käyttötapauksia, ja sinun pitäisi käyttää niitä eri olosuhteissa. Tässä on kaksi sääntöä, jotka voivat auttaa sinua valitsemaan, mikä yksikkö käyttää:

1. Käyttää em Jos omaisuus on laadittava Fonttikoko
2. Jos ei, käytä rem

Lisätietoja näiden yksiköiden välillä, Katso tämä artikkeli .

Summaaminen

Tässä artikkelissa olet oppinut olennaiset reagoivan Web-typografian. Tietenkin löydät lisätietoja, kun sukeltaessasi syvemmälle, sekä teoriassa että toteutuksessa, mutta mitä tässä on 80 prosenttia siitä, mitä tarvitset todellisessa projektissa. Tämä tieto on valmis aloittamaan keskustelemaan sekä suunnittelijoiden että kehittäjien kanssa siitä, miten suunnitella ja koodaa hyvää typografiaa reagoivaan verkkoon.

Vastaava typografia ei ole uskomattoman vaikeaa. Se on vain haastavaa, koska tarvitset valtava määrä kärsivällisyyttä ja huolellisuutta paljastaa asiaankuuluvat periaatteet ja soveltaa niitä tavalla, joka sopii verkkoon.

Tämä artikkeli oli alun perin ilmestynyt Net-aikakauslehti . Tilaa täältä .

Aiheeseen liittyvät artikkelit:

• Mestari Esteetön Web-typografia
• Suunnittele reagoiva sivusto EM-pohjaisella mitoituksella
• 10 Säännöt käyttäjäystävällisten web-lomakkeiden tekemiseksi