Onko tämäntyyppinen tee minun suunnittelu näyttää rasvaa?

Mitään ei voi pilata sellaista muotoilua kuin typografia, joka ei sovi. Olipa kyse liian suuresta (tai liian pienestä), epäasianmukainen skaalaus on suuri ongelma.

Se on ongelma malleja enemmän kuin voisi ajatella. Liian tavallisesti vierailet verkkosivustolla, jossa tyyppi on kauniisti työpöydän selaimella, vain myöhemmin uudelleen puhelimesta ja sen on vaikea lukea. Se tapahtuu koko ajan.

Ongelmana on, että tyyppiä ei ole todellisuudessa skaalattu jokaiselle laitteelle. Tämä on täysin vältettävissä oleva ongelma, kun harkitset projektityypin painotusta.

Mikä on tyypillinen asteikko?

Visuaalinen typografinen mittakaava ympäröi projektityön koon, tilan ja mittasuhteet suhteessa toisiinsa. Tämä sisältää kaiken päätekstitystyylien otsikoihin, alikäyttöohjelmiin, kuvateksteihin ja mihin tahansa muuhun tekstiin.

Mittakaava auttaa määrittämään tekstin elementtien koon ja sijoituksen suhteessa toisiinsa. Erityisesti visuaalisen tyypin mittakaavassa web-suunnitteluun liittyy usein CSS: n tunnisteita (kuten h1, h2, h3, p ja niin edelleen).

Tyypin asteikko auttaa luomaan harmoniaa ja rytmiä suunnittelussa. Se myös poistaa sinut tyylitieteellisestä ongelmasta, koska tekstisisältö vastaa CSS-elementtejä, joten jokaisen suunnittelun osa käyttää samoja elementtejä ja johdonmukaisuutta.

Laajuuden tulisi perustua kehon tekstin kokoon. (Aseta aina kirjasintyyppi ja koko ensimmäinen). Sitten rakenna asteikko tämän tärkeän typografian ympärille. Etkö ole varma mistä aloittaa? Google on a vankka suositus :

1. Käytä 16 CSS-pikselin peruskirjasikokoa. Säädä koko käytettävän fontin ominaisuuksien mukaan.
2. Käytä kokoja suhteessa peruskoon määrittämään typografinen asteikko.
3. Teksti tarvitsee pystysuoraa tilaa merkkien välillä; yleinen suositus on käyttää selaimen oletusviivan korkeutta 1.2 em.
4. Rajoita käytettävien kirjasinten ja typografisen mittakaavan määrä.

Luo harmoniaa ja rytmiä

Tyypin mittakaava ei ainoastaan ​​auttaisi käyttäjiä siirtymään kopion läpi, vaan se luo harmoniaa ja rytmiä tekstin kulkua varten. Tämä on tärkeää kaikissa laitteissa.

Mistä sitten aloitat?

UX Mattersilla on joitain parhaita tutkimuksia, jotka ovat saatavilla vähimmäistasolla tekstin koot laitteittain . Huomaa, että nämä ovat vähimmäiskokoja ja kehon tekstikoot jatkuvasti kasvavat (samoin kuin rivien välinen etäisyys). Steven Hoober suosittelee, että aloittaisi vähintään 40 prosenttia suurempi kuin suositellut vähimmäisarvot. Lisäksi parannetut sisältötyylit voivat nousta jopa 80 prosenttiin vähimmäisarvosta, mutta sinun on oltava varovainen myös poikkeuksellisen suurella tavalla.

Kun kehon tekstin koko on määritetty, voit määrittää, miten kootut tekstielementit kootaan. Siellä on hieno taide ja silmätesti on usein hyvä paikka aloittaa.

Ei ole miltei sellaista otsikkoa, joka on liian iso. Sano, mitä sinun tarvitsee sanoa ja koota skaalata sanat avaruudessa. Kahden rivin otsikko tuntuu suuremmalta kuin yhden rivin, vaikka teksti olisi täsmälleen sama koko.

Helpoin tapa miettiä otsikoiden ja muiden suurempien testien elementtien suurentamista on prosenttiosuus kehon tekstin perusteella. Jokaisella suunnittelijalla on erilainen lähtökohta, 250 prosenttia suurempi kuin kehon teksti on hyvä otsikkopallopallo; 150 prosenttia h2: lle, 75 prosenttia h3: lle ja 50 prosenttia elementtejä, kuten estokertoja. (Tämä ei ole sääntö, vain lähtökohtana.)

Tässä on syy siihen, miksi prosenttiosuudet pikemminkin kuin asetetut koot ovat tärkeitä: Kun olet määrittänyt kehon koon, prosenttiluvut säätävät koot vastaavasti näytön koosta riippumatta. Jokainen tyyppinen elementti on suhteessa kehon tyyppiin.

Merkki- ja välimatkaohjeet

Muotoilijat näyttävät myös muille ohjeille, kun ne kirjoitetaan näyttöön. Kun on kyse välimatkaa, yksi peukalosäännöistä on ollut tarkastella merkkejä riviä kohti luettavuuden varmistamiseksi.

• Työpöydän ja suuret laitteet: 60-75 merkkiä riviä kohden
• Puhelimet ja pienet laitteet: 35-40 merkkiä riviä kohden

Huomaa, että pienillä näytöillä luettavuus perustuu siihen, että niissä on vähemmän merkkejä (suurempi teksti).

Sama ajatus koskee myös välilyöntiä. Tekstin viivoja tarvitaan enemmän, kun näytön koko on rajoitettu, jotta käyttäjät voivat helpommin lukea ja skannata sisältöä. Harkitse, että pienempiin laitteisiin lisätään 25 prosenttia enemmän riviväliä kuin työpöydän typografia.

Lisäkoko ja välilyönti helpottavat sitä tiukkaa tai murskattua tunnetta, jota käyttäjät voivat tuntea yrittäessään lukea pienemmillä laitteilla. Koska kangas on pieni, lukijan virtaus ja luettavuus ovat elintärkeitä, jotta käyttäjät pysyvät vierittämällä.

Vinkkejä aloittaaksesi

On paljon tapoja luoda typografinen mittakaava ja varmistaa, että teksti ei tee suunnittelustasi rasvaa. Näin menetät sen todennäköisesti riippuen mukavuustasosta koodin ja kehityksen lisäksi suunnittelun lisäksi.

Paras vaihtoehto on käyttää herkkää muotoilua mediakyselyissä. Tämä on suunnittelija-kehittäjä, joka tarjoaa parhaan mahdollisen määräysvallan tekstin eritelmissä. (Lisätietoja on edellä mainituista Googlen suosituksista.)

Toinen reitti on suunnitella erilaisia ​​versioita. Vaikka tämä on melko vanhentunut käsite, siellä on vielä joitain paikkoja, joissa käytetään verkkosivustojen mobiilisivut ja työpöydän URL-osoitteet. Useimmissa tapauksissa sitä ei suositella, mutta joillakin verkkosivustoilla, joissa malli on dramaattisesti erilainen tai käyttäjät kokevat erilaisia ​​asioita, se voi olla vaihtoehto.

Helppo vaihtoehto on aloittaa sivustosi teema. Varmista vain, että valitset täysin vastaavan vaihtoehdon. Kun käytät laadukasta reagoivaa teemaa, suurin osa arvailuista on otettu pois sinulle. Sinun tarvitsee vain ajatella kehon tekstin kokoa. Varmista vain tarkistaa kaiken varmistaaksesi, että mobiilikokot täyttävät normit.

3 työkalua tyypin mittakaavan luomiseen

Saatavilla on useita työkaluja, joiden avulla näet visuaalisen typografian mittakaavan tarkan vaikutuksen. Seuraavassa on muutamia parhaita ja käyttäjäystävällisimpiä vaihtoehtoja.

• Tyyppi-asteikko : Syötä tekstin ja pelata sellaisilla vaihtoehdoilla, kuten koko, asteikko ja kirjasin oikealla näytöllä. Grad CSS tai muokata koodia suoraan työkalusta;
• Modulaarinen asteikko : Mitta-asteikko toimii sääntöä noudattaen määrittämään koot tyyppiä varten. sitten lataa tulokset Sass- tai JS-pluginina tai katsele niitä näytöllä;
• Golden Ratio Typografia Laskin : Työkalu optimoi koon, viivan korkeuden, leveyden ja merkkien rivin käyttämällä kultaista suhdetta

johtopäätös

Oikea typografinen mittakaava pitää suunnittelusi näyttävän trimmaisena ja siveltävänä. Se on lisätty harmonia, jota käyttäjät eivät välttämättä ymmärrä, mutta jotka edistävät yleistä luettavuutta ja käytettävyyttä.

On todennäköistä, että mittakaava on pois päältä, jos malli "ei näytä oikealta." Epätasainen koko voi olla vaikea määrittää, mutta on usein paikka, jossa näyttää jotain suunnittelusta tasapainossa. Toista muutamia eri mittakaavakeinoja ennen kuin pääset asumaan johonkin, ja muista, että trendi on tällä hetkellä sellainen tyyppi, joka on hieman suurempi kuin aiemmin.

• ← Tapaa mies takana Comic Sans
• WeTransfer paljastaa uuden tuotemerkin identiteetin ja käyttöliittymän →