Jedna od najvažnijih vještina koju možete naučiti kao dizajner je kako odabrati vrstu. To je zato što je tekst jedan od primarnih načina na koji dizajneri mogu komunicirati s korisnicima. Tipografija može napraviti ili razbiti dizajn.
Tipografija ima ljepotu i složenost. Neki ljudi cijelu svoju karijeru posvećuju tipkanju. Srećom, njihov je rad dobro dokumentiran, pa imamo mnoštvo mrežnih izvora za tipografiju.
Ovaj je članak osmišljen da posluži kao polazna točka za pomoć pri učenju odabira vrste dizajna. Potaknut će vas da istražite fontove i kombinacije fontova izvan onih koji su vam poznati.
Utvrdite svoju svrhu
Prije nego što napravite bilo što drugo, prvo odredite svrhu svog dizajna. Koje podatke želite prenijeti? Koji je medij za vaš dizajn?
Dobar dizajn usklađuje tipografiju sa svrhom. To je zato što je tipografija ključna za postavljanje raspoloženja, tona i stila u vašem dizajnu.
Na primjer, ako dizajnirate čestitku tešku za ilustracije, odaberite font koji odgovara stilu vaše ilustracije. Uskladite svoj tip s ostatkom vašeg dizajna.
Ako dizajnirate slikovnu odredišnu stranicu, odaberite jednostavan font koji ne umanjuje vaše slike. Upotrijebite tip kao način da naglasite informacije kako biste priopćili značenje.
Identificirajte svoju publiku
Nakon utvrđivanja svrhe vašeg dizajna, identificirajte svoju publiku. Ovaj je korak presudan jer će dob i interes utjecati na vaše mogućnosti fonta.
Nakon što pojasnite svrhu svog dizajna, identificirajte svoju publiku. Ovaj je korak presudan jer bi podaci o vašim korisnicima kao što su dob, interesi i kulturni odgoj mogli utjecati na odluke koje donosite za svoj tip.
Primjerice, neki su fontovi prikladniji za djecu. Kada uče čitati, djeci su potrebni vrlo čitljivi fontovi s izdašnim oblicima slova. Dobar primjer za to je Sassoon Primary. Sassoon Primary razvila je Rosemary Sassoon i temelji se na njezinom istraživanju kakva su slova djeci lako čitati.
Ostali fontovi prikladniji su za starije osobe. Krstionice prilagođene starijima koriste čitljive veličine, visoko kontrastne boje i izbjegavaju skripte i ukrasne stilove.
Pri odabiru vrste uzmite u obzir svoju publiku i njihove potrebe. Jednostavno rečeno, suosjećajte sa svojim korisnicima .
Potražite inspiraciju
Pogledajte rad drugih dizajnera. Pokušajte razumjeti kako su donosili odluke za tip.
Inspiracija fonta
Za nadahnuće fontova, 100 najboljih besplatnih fontova tvrtke CreativeBloq sjajan je članak koji će vas dovesti u pravi način razmišljanja za odabir vrste. U članku CreativeBloq objašnjava motivaciju koja stoji iza svakog fonta.
Još jedan koristan resurs je 100 najboljih zbirki besplatnih fontova za 2015. godinu tvrtke Awwwards.
Invision je također sastavio ogroman repo tipografskih izvora. Tamo ćete pronaći puno izvora za nadahnuće.
Za inspiraciju sa stvarnih web stranica pogledajte Typ.io. Web stranica liječi inspiraciju za fontove s cijelog weba. Uz to, web mjesto nudi CSS definicije fontova na dnu svakog uzorka nadahnuća.
Osim pregledavanja namjenskih web mjesta za nadahnuće fontova, posjetite svoje omiljene stranice i provjerite koje fontove koriste. Dobar alat za to je WhatTheFont. WhatTheFont je Chromeovo proširenje koje vam omogućuje pregled web fontova lebdenjem iznad njih.
Uparivanje nadahnuća
Osim fontova, pogledajte i inspiraciju za uparivanje fontova. Uparivanje fontova jednako je važno kao i sami fontovi. Dobro uparivanje fontova pomaže uspostaviti vizualnu hijerarhiju i poboljšati čitljivost vašeg dizajna.
Za inspiraciju započnite s Typewolfom. Typewolf liječi inspiraciju za uparivanje fontova s različitih web lokacija. Osim toga, oni također imaju preporuke za fontove i detaljne vodiče za tipografiju. To je riznica za tipografe.
FontPair također liječi nadahnuće za uparivanje fontova, posebno za Google Fonts. Možete sortirati prema kombinacijama stilova tipa, poput sans-serifa i serifa, ili serifa i serifa.
Na kraju, postoji mnoštvo kolekcija za uparivanje fontova koje su dizajneri stvorili na mreži. Na primjerTipografija: Googleove kombinacije fontova i tipografija:Googleova kombinacija fontova Svezak 2. Jednostavno pretražite "uparivanje fontova" na web lokacijama poput Behance i Dribbble.
Odaberite fontove
Armed with research and inspiration, you are ready to choose your type. When it comes to choosing type, keep the following principles in mind: readability, legibility, and purpose.
Choose fonts that are conventional and easy to read. Avoid highly decorative fonts in favor of simple and practical fonts. Also, be mindful of the purpose of a font. For example, some fonts are more suited to be headers rather than body text.
For this reason, before choosing a font, research its intended purpose.
In terms of font pairing, keep it simple with a maximum of three different fonts. In addition, pair fonts that contrast one another. Doing so will help guide the eyes of readers, first to headers and then to body texts. You can also create visual contrast using different font sizes, colors, and weights.
For web fonts, you can use Google Fonts, Typekit, and Font Squirrel. Google Fonts is free, Typekit and Font Squirrel have free and paid fonts.
Determine font sizes
The next step after settling on a font combination is determining sizing. A great tool for this is Modular Scale by Tim Brown, the head of typography at Adobe. Modular Scale is a system for identifying historically pleasing ratios to create scales to determine type sizes.
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.089One 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.966As 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.927Once you have settled on a scale, you can cherry pick font sizes from your list and round them to the nearest decimal.
Font SizesHeader 1: 55pxHeader 2: 42pxHeader 3: 31pxHeader 4: 24pxHeader 5: 14pxBody: 17pxCaption: 14pxThe 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
This week, I want to introduce you to the concept of CSS in Javascript with Aphrodite by Khan Academy. Aphrodite lets…medium.com
You can find me on Medium where I publish every week. Or you can follow me on Twitter, where I post non-sensical ramblings about design, front-end development, and virtual reality.
P.S. If you enjoyed this article, it would mean a lot if you click the ? and share with friends.
