Typografia voi tehdä tai rikkoa suunnittelusi: prosessi tyypin valitsemiseksi

Yksi tärkeimmistä taidoista, jotka voit oppia suunnittelijana, on kuinka valita tyyppi. Tämä johtuu siitä, että teksti on yksi tärkeimmistä tavoista, joilla suunnittelijat voivat kommunikoida käyttäjien kanssa. Typografia voi tehdä tai rikkoa mallin.

Typografiassa on kauneutta ja monimutkaisuutta. Jotkut ihmiset omistavat koko uransa kirjoittamiseen. Onneksi heidän työnsä on hyvin dokumentoitu, joten meillä on paljon online-resursseja typografiaan.

Tämä artikkeli on suunniteltu toimimaan lähtökohtana, joka auttaa sinua oppimaan kuinka valita malli malleillesi. Se kannustaa sinua tutkimaan fontteja ja fonttiyhdistelmiä, jotka ovat sinulle tutumpia.

Tunnista tarkoituksesi

Ennen kuin teet mitään muuta, tunnista ensin suunnittelusi tarkoitus. Mitä tietoja haluat välittää? Mikä on suunnittelusi väline?

Hyvä muotoilu mukauttaa typografian tarkoitukseensa. Tämä johtuu siitä, että typografia on avain mielialan, sävyn ja tyylin asettamiseen malleissasi.

Jos esimerkiksi suunnittelet onnittelukorttia, joka on painava kuva, valitse fontti, joka sopii kuvasi tyyliin. Yhdistä tyyppisi muulla mallilla.

Jos suunnittelet kuvaohjattua aloitussivua, valitse yksinkertainen fontti, joka ei vähennä kuviasi. Käytä tyyppiä tapana korostaa tietoja viestimään merkityksestä.

Tunnista yleisösi

Kun olet määrittänyt suunnittelusi tarkoituksen, tunnista yleisösi. Tämä vaihe on ratkaiseva, koska ikä ja kiinnostus vaikuttavat kirjasinvaihtoehtoihisi.

Kun olet selvittänyt suunnittelusi tarkoituksen, tunnista yleisösi. Tämä vaihe on ratkaiseva, koska käyttäjiäsi koskevat tiedot, kuten ikä, kiinnostuksen kohteet ja kulttuurikasvatus, voivat vaikuttaa tyypinne tekemiin päätöksiin.

Esimerkiksi jotkut fontit sopivat paremmin lapsille. Oppia lukemaan lapset tarvitsevat helposti luettavia fontteja, joissa on antelias kirjain. Hyvä esimerkki tästä on Sassoon Primary. Sassoon Primary -kehityksen on kehittänyt Rosemary Sassoon, ja hänen tutkimuksensa pohjalta, millaisia ​​kirjeitä lasten oli helppo lukea.

Muut fontit sopivat paremmin eläkeläisille. Vanhemmille ystäville tarkoitetut fontit käyttävät luettavia kokoja, voimakkaita kontrastivärejä ja välttävät skriptejä ja koristeellisia tyylejä.

Kun valitset tyyppiä, ota huomioon yleisösi ja heidän tarpeensa. Yksinkertaisesti sanottuna empatiaa käyttäjiisi .

Etsi inspiraatiota

Katso muiden suunnittelijoiden työtä. Yritä ymmärtää, miten he tekivät päätöksensä tyypistä.

Fontin inspiraatio

Fonttien inspiroimiseksi CreativeBloqin 100 parasta ilmaista kirjasinta on hieno artikkeli, joka vie sinut oikeaan ajattelutapaan tyypin valitsemiseksi. Artikkelissa CreativeBloq selittää kunkin fontin takana olevat motivaatiot.

Toinen hyödyllinen resurssi on Awwwardsin 100 parhaan ilmaisen fontin kokoelma vuodelle 2015.

Invision kokosi myös suuren joukon typografiaresursseja. Sieltä löydät paljon inspiraation lähteitä.

Inspiraatiota todellisilta verkkosivustoilta on osoitteessa Typ.io. Sivusto kuratoi fonttien inspiraatiota verkosta. Lisäksi sivusto tarjoaa CSS-fonttien määrittelyt kunkin inspiraationäytteen alaosassa.

Sen lisäksi, että katsot omistettuja fonttien inspiraation verkkosivustoja, vieraile suosikkisivustoissasi ja tarkista, mitä fontteja he käyttävät. Hyvä työkalu tähän on WhatTheFont. WhatTheFont on Chrome-laajennus, jonka avulla voit tarkistaa verkkofontit viemällä hiiren osoitin niiden päälle.

Inspiraation pariliitos

Tarkastele fonttien lisäksi inspiraatiota myös fonttien yhdistämisestä. Kirjasinten yhdistäminen on yhtä tärkeää kuin itse kirjasimet. Hyvä kirjasinten yhdistäminen auttaa luomaan visuaalisen hierarkian ja parantamaan kuviesi luettavuutta.

Inspiraatiota varten aloita Typewolfista. Typewolf kuratoi kirjasinten yhdistämisen inspiraatiota eri sivustoista. Sen lisäksi heillä on myös kirjasinsuosituksia ja perusteellisia typografiaoppaita. Se on aarteita typografeille.

FontPair myös kuratoi inspiraation kirjasinten pariliitoksesta, erityisesti Google Fontsille. Voit lajitella tyyliyhdistelmien mukaan, kuten sans-serif ja serif tai serif ja serif.

Viimeisenä, suunnittelijoiden online-tilassa on tonnia fonttien yhdistämiskokoelmia. EsimerkiksiTypografia: Google-fonttien yhdistelmät ja typografia:Google-fonttien yhdistelmät, nide 2. Hae vain fonttien yhdistämistä sellaisilta sivustoilta kuin Behance ja Dribbble.

Valitse fontit

Tutkimuksen ja inspiraation avulla olet valmis valitsemaan tyypin. Tyypin valinnassa on pidettävä mielessä seuraavat periaatteet: luettavuus, luettavuus ja tarkoitus .

Valitse fontit, jotka ovat tavanomaisia ​​ja helposti luettavia. Vältä erittäin koristeellisia fontteja yksinkertaisten ja käytännöllisten fonttien hyväksi. Ole myös tietoinen fontin tarkoituksesta. Jotkut fontit sopivat esimerkiksi paremmin otsikoiksi kuin tekstiksi.

Tästä syystä, ennen kuin valitset fontin, tutki sen tarkoitus.

Kirjasinten pariliitoksen suhteen pidä se yksinkertaisena enintään kolmella eri fontilla. Lisäksi pariliitä fontit, jotka erottavat toisiaan. Se auttaa ohjaamaan lukijoiden katseet ensin otsikoihin ja sitten tekstiin. Voit myös luoda visuaalisen kontrastin käyttämällä eri kirjasinkokoja, värejä ja painoja.

Verkkofontteja varten voit käyttää Google-fontteja, Typekitiä ja Font Oravaa. Google Fonts on ilmainen, Typekit ja Font Squirrel ovat ilmaisia ​​ja maksettuja fontteja.

Määritä kirjasinkoko

Seuraava vaihe fonttien yhdistelmään asettamisen jälkeen on koon määrittäminen. Erinomainen työkalu tähän on Modular Scale, jonka on kirjoittanut Tim Brown, Adoben typografiajohtaja. Modulaarinen asteikko on järjestelmä historiallisesti miellyttävien suhteiden tunnistamiseksi, jotta voidaan luoda asteikot tyypin koon määrittämiseksi.

For example, you might use a scale based on the golden ratio. Here would be your first five computed font size options:

Golden Ratio (1:1.618)
1.000 x 1.618 = 1.6181.618 x 1.618 = 2.6182.618 x 1.618 = 4.2364.236 x 1.618 = 6.8546.854 x 1.618 = 11.089

One issue that you might encounter is that your ratio is too large. Take a look at what happens to the later intervals of our scale based on the golden ratio.

Golden Ratio (1:1.618)
...11.089 x 1.618 = 17.94217.942 x 1.618 = 29.0329.030 x 1.618 = 46.97146.971 x 1.618 = 75.99975.999 x 1.618 = 122.966

As you can see, the intervals between numbers start to become too large. For most interfaces, you need smaller intervals. Thankfully, Modular Scale has a variety of ratios based on geometry, nature, and music.

Minor Second 15:16 Major Second 8:9Minor Third 5:6Major Third 4:5...

So instead of using the golden ratio, you can use a ratios that yield smaller intervals like the Perfect Fourth.

Perfect Fourth (3:4)
...9.969 x 1.333 = 13.28813.288 x 1.333 = 17.71317.713 x 1.333 = 23.61223.612 x 1.333 = 31.47531.475 x 1.333 = 41.95641.956 x 1.333 = 55.927

Once you have settled on a scale, you can cherry pick font sizes from your list and round them to the nearest decimal.

Font Sizes
Header 1: 55pxHeader 2: 42pxHeader 3: 31pxHeader 4: 24pxHeader 5: 14px
Body: 17pxCaption: 14px

The Modular Scale method uses mathematical precision in order to generate font sizes. However, it’s only a guide. Use this method as a starting point and then adjust sizes with your eye.

Create a typography styleguide

The last step of the process is to create a styleguide for your typography to help standardize type across your designs.

In programs like Sketch, you can create shared text styles to quickly insert text with styles already applied from your guideline.

It’s during this step of the process that you can tweak and finalize your text attributes such as color, weight, and size.

A word on color: when choosing color, take into account your color palette. Choose colors for your type that harmonize with your color palette.

In your styleguide, make sure to at least include the following things: font definitions, font sizes, font colors, and example usages.

Google’s Material Design typography guidelines is a good example of what to include in a styleguide. A couple of other examples includes the typography guides of Mailchimp, Apple, and Focus Labs.

Typography is all about experimentation. It’s both a science and an art.

I challenge you to break out of your comfort zone and explore type in your design.

What are your favorite fonts? Leave me a note or send me a tweet on Twitter.

If you enjoyed this article, you might also enjoy CSS in Javascript with Aphrodite, a library by Khan Academy.

CSS in Javascript: The future of component based styling

Tällä viikolla haluan esitellä sinulle CSS: n käsitteen Javascriptin kanssa Khan Akatemian Aphroditen kanssa. Aphrodite antaa… medium.com

Löydät minut Mediumista, josta julkaisen joka viikko. Tai voit seurata minua Twitterissä, johon lähetän ei-aistillisia hämmennyksiä suunnittelusta, käyttöliittymän kehittämisestä ja virtuaalitodellisuudesta.

PS Jos pidit tästä artikkelista, se merkitsisi paljon, jos napsautat? ja jakaa ystävien kanssa.