8-pisteinen ruudukko: typografia verkossa

Web-typografia on hämmentävää. Tiedätkö parhaat käytännöt?

Kun aloin katsella suosittuja verkkosivustoja selvittääkseen parhaita käytänteitä verkkotyypittelyyn, minun on myönnettävä, että olen hämmentynyt. Alla on esimerkkejä typografiasteikoista, jotka vetin muutamalta suositusta verkkosivustosta ja suunnittelujärjestelmistä. Löydätkö yhdistävän mallin?

Näytteet yksinkertaistettiin sopimaan vakiovaa'alle

On selvää, että tyyppijärjestelmiin on erilaisia ​​lähestymistapoja. Tosiasia on, että verkkoyhteisönä emme kaikki ole samaa mieltä. Kuten useimmat suunnitteluongelmat, se kuitenkin alkaa todella huomioimalla käyttäjän tarpeet.

Typografiajärjestelmien kolme arkkityyppiä

Tässä on kolme yleistä typografiajärjestelmän arkkityyppiä. Useimmat yritykset käyttävät kaikkia näitä kolmea jossain vaiheessa, mutta on tärkeää tunnistaa taustalla olevat käyttäjien tarpeet, joihin kukin suuntaus vastaa.

Markkinointi-sivusto

  • Tarkoitus: rakennettu kertomaan tietty tarina ja innostamaan kävijöitä viettämään aikaa ja / tai rahaa sivustolla.
  • Vaatimukset: Jokainen kirjasintyyppi tarvitsee oman tyylinsarjansa ja kokovaihtoehdot perustuvat enemmän taiteen suuntaan kuin elementtien sovittamiseen.
  • Reagoiva käyttötapa: Järjestelmän on joustava useiden kokojen läpi matkapuhelimelta pöytään.

Verkkokokemukset, joiden tarkoituksena on antaa sinulle jotain, päätyvät tähän luokkaan. Kunnianhimoiset rikkovat kaikki typografian säännöt luodakseen kiehtovia ja kiehtovia kokemuksia.

Vaikka näihin sivustoihin menee paljon ajatuksia, keskitytään splashin tekemiseen pikemminkin kuin laajennettavissa olevaan järjestelmään, johon voidaan rakentaa tulevaisuudessa. Näillä sivustoilla on yleensä lyhyt varastointiaika, ja ne hylätään kokonaan ylhäältä alas suunnittelemiseksi.

Edistynyt esimerkki tästä on Leigh Taylorin ja Nick Jonesin käyttämä interpolointitoiminto Invisionin aloitussivulla.

: llä on fonttikoko: calc (32 kuvapistettä + ((24 * (100 vw - 800 kuvapistettä)) / 799)) ;. Sivun typografia on laskettu huolellisesti toimimaan jokaisen näytön koon mukaan.

“Matematiikan käyttäminen dynaamisen taiteen suunnan tekemiseen” - Leigh Taylor

Blogi / Tietosivusto

  • Tarkoitus: Välittää suuri määrä tekstipohjaista tietoa.
  • Vaatimukset: Päälukemisalueella voidaan käyttää suhdepohjaista viivankorkeusjärjestelmää, aivan kuten tämä Medium-artikkeli tekee.
  • Responsiivinen käyttötapaus: Todennäköisesti reagoiva, mutta keskittyy luettavuuteen.

Tämä Medium-artikkeli on esimerkki verkkokokemuksesta, joka on rakennettu pitkäaikaiseen lukemiseen.

Painopiste ei ole pienten visualisointien tulkinnassa tai lomakkeiden täyttämisessä. Heidän valitsemansa koko-suhteet on suunniteltu erityisesti luettavuutta varten rajoitetun halutun viivanpituuden saamiseksi. Voin mukavasti lukea jokaisen rivin, koska typografia on suunniteltu huolellisesti sopivaksi lukijani tarpeisiin.

Tuote

  • Tarkoitus: suunniteltu ratkaisemaan käyttäjän ongelmat, kuten verojen jättäminen, git-repo-sovellusten hallinta tai suorituskykymittarien visualisointi.
  • Vaatimukset: Tekstin on sovittava kauniisti elementtihierarkiaan. Tekstiä käytetään enimmäkseen tarroihin, ohjeisiin ja näytettyihin tietoihin.
  • Reagoiva käyttötapaus: Minimaalisesti reagoiva. Pitkälle kehitetyissä tuotteissa käytetään mukautuvaa suunnittelua, joka tarkoittaa erilaisia ​​kokemuksia mobiililaitteille ja työpöydälle. Painopiste on käyttökokemusta tukevien elementtien hierarkiassa.

Googlen materiaalisuunnittelu on suosittu suunnittelukieli, jota voidaan soveltaa moniin tuotekäyttötapauksiin.

Materiaalin etäisyysmenetelmä perustuu 8pt: n komponenttiruudukkojärjestelmään ja 4pt: n perustasoverkkoon typografiaa varten. He yrittävät skaalata viivakorkeuksia asteikolla 4. Skaalaus 8-askelein perusviiva-ruudukollasi voi olla vaikeaa, koska käytettävissä olevat rivikorkeudet ovat liian kaukana toisistaan ​​joillekin tekstikokoille.

Jotta jotakin kirjasinkokoa voidaan liittää tarkoituksenmukaisempaan rivikorkeuteen, on hyvä tie eteenpäin. Voit aina lyödä etäisyyttä tietyn viivan ylä- tai alapuolella 4 pikselin verran, jotta se kohdistuu suurempaan atomiristikkoon.

Sovellettaessa perusviivajärjestelmällä on kyky kohdistaa elementti spatiaalinen järjestelmä (8pt-ruudukko) typografiajärjestelmään luomaan pakottava pystysuuntainen rytmi malliin.

Verkkotyypin toteutus - todellisuudessa

On mahdollista saada arvioitu ja jäsennelty käyttöliittymä, joka kiinnittyy 8pt: n ruudukkoon, jolla on myös pitkämuotoinen lukualue.

Anna kiinteän perusviivajärjestelmän käsitellä tekstiä jäsenneltyjen komponenttiesi sisällä ja käytä modulaarista asteikkoa luomaan optimaalinen lukukokemus blogiisi tai asiakirjoihisi, jotka olet lisännyt sivustoosi.

Useimmat digitaalituoteyritykset tekevät tämän jo markkinoinnin aloitussivun, digitaalisen tuotteen ja dokumentoinnin välillä. Päätös rakentaa nämä typografiset alueet erikseen voi vapauttaa sinut kestämättömästä monimutkaisuudesta.

Sisältötyyppien sekoittaminen toisiinsa

Sudenkuoppa - Ems, rems ja pikselit oh my!

Selkeän ja johdonmukaisen järjestelmän ilmaisemiseksi typografiamittaukset on tulkittava helposti sen muodostavan tuoteryhmän toimesta.

Suhteelliset yksiköt kuten rems ja ems ymmärretään joskus väärin, ja kokemukseni mukaan tämä johtaa kestämättömään typografiajärjestelmään. Esimerkiksi 14 pikselin kirjasinkoko ja 20 kuvapisteen rivikorkeuden välistä suhdetta ei pidä kaapata suhteellisina yksiköinä, koska tämän suhteen pitäisi muuttua fontin koon kasvaessa.

1.4285714286em-rivikorkeuden määrittäminen on naurettavaa, koska useimmat ihmiset eivät voi tehdä tällaista matematiikkaa päässään. Jos kirjasinkoko kasvaa 16 pikseliin, selain näyttää rivikorkeudeksi 22,857142 pikseliä ja tällainen pikselien jakaminen on päänsärky, joka odottaa tapahtuvan. Tämä aiheuttaa sekaannusta ja on suhteellisten yksiköiden väärinkäyttö. Katso täydellinen luettelo absoluuttisista ja suhteellisista yksiköistä täältä.

Miksi niin monet suunnittelujärjestelmät perustuvat nykyään suhteellisen koon mukaan? Vastaus on ”saavutettavuus”.

Selaimet eivät kuitenkaan skaalaa peruskokoa, kun zoomaat komennolla +. On helppokäyttötyökaluja, jotka skaalaavat perusfontikokoja sitä tarvitseville käyttäjille. Suosittelen sen testaamista oikein varmistaaksesi, että se on kokemus, jonka haluat käyttäjien saavan. Valintaruudun saavutettavuus voi vahingoittaa enemmän kuin se auttaa.

Rems: n ja ems: n hyödyntäminen sivustollasi / sovelluksessasi on uskomattoman tehokasta. Useita erittäin mielenkiintoisia käyttötapauksia on, ja niiden tulisi olla tärkeä osa työkalupakkiä.

Ehdotukseni on käyttää niitä säästeliäästi, kunnes käytät niitä vakaalla tavalla. Niiden leivottaminen typografiajärjestelmän ytimeen voi avata hämmennystä ja odottamattomia käyttökokemuksia.

8pt-ruudukkojen typografia

8pt-verkkokonseptin tehokkain osa on sen kyky lisätä johdonmukaisuutta kaikissa malleissa. Sinun on arvioitava käyttäjien tarpeet ja paras tapa skaalata typografia vastaamaan näitä tarpeita.

Kannustan voimakkaasti suunnittelua ja yhteistyötä näiden standardien viimeistelyyn yritykselle / tuotteelle.

Tässä on esimerkkejä muutamasta tutusta nimestä: Google Material, Pivotal, Atlassian, Intuit.

Näytteet yksinkertaistettiin sopimaan vakiovaa'alle

Viitteet ja niihin liittyvä lukeminen

  • Priyanka Godbole: Kehys ennustettavan ja harmonisen välijärjestelmän luomiseksi nopeammalle suunnitteluprosessin vaihdolle
  • Richard Rutter: Webissä käytettyjen typografisen tyylin elementit
  • Ian Yates: Kuinka luoda modulaarinen typografinen asteikko
  • Nathan Curtis: Tila suunnittelujärjestelmissä
  • Vincent De Oliveira: Syvä sukellus CSS: fonttitiedot, viivan korkeus ja pystysuuntainen kohdistus
  • Kezz Bracey: Miksi sinun pitäisi käyttää Rem-pohjaisia ​​asetteluja

Aikaisemmat 8-pisteinen ruudukkoartikkelit:

  1. Johdanto 8-pisteiseen verkkoon
  2. 8-pisteinen ruudukko: Reunat ja asettelut
  3. 8-pisteinen ruudukko: pystysuuntainen rytmi

kysymykset:

Tätä tutkin edelleen. Onko sinulla hyvä esimerkki jaettavaksi? Onko sinulla erilainen lähestymistapa 8pt-typografiajärjestelmään?

Jos sinulla on ajatuksia, jätä kommentti tai tavoita Twitter.