A tipográfia megdöntheti vagy megtörheti a tervét: a típusválasztás folyamata

Az egyik legfontosabb készség, amelyet tervezőként elsajátíthat, az a típusválasztás. A szöveg ugyanis az egyik elsődleges módja annak, hogy a tervezők kommunikálni tudjanak a felhasználókkal. A tipográfia elkészítheti vagy megtörheti a tervet.

A tipográfia szépsége és összetettsége. Vannak, akik a teljes karrierjüket a gépelésnek szentelik. Szerencsére munkájuk jól dokumentált, így rengeteg online forrás áll rendelkezésünkre a tipográfia számára.

Ez a cikk arra szolgál, hogy kiindulópontként szolgáljon a tervek típusának kiválasztásában. Arra ösztönzi Önt, hogy fedezze fel a betűtípusokat és a betűkombinációkat az Ön ismeretén kívül.

Határozza meg célját

Mielőtt bármi mást tenne, először határozza meg a tervezés célját. Milyen információt akar átadni? Mi a közeg a tervezéséhez?

A jó tervezés összehangolja tipográfiáját a céljával. Ez azért van, mert a tipográfia kulcsfontosságú a hangulat, a hangnem és a stílus kialakításához.

Például, ha olyan üdvözlőkártyát tervez, amely nehéz illusztráció, válasszon egy betűtípust, amely illeszkedik az illusztráció stílusához. Harmonizálja típusát a többi dizájnnal.

Ha képalapú céloldalt tervez, válasszon egy egyszerű betűtípust, amely nem rontja a képeket. Használja a típust az információk hangsúlyozásának módjaként a jelentés közléséhez.

Azonosítsa a közönségét

Miután meghatározta a tervezés célját, azonosítsa közönségét. Ez a lépés kulcsfontosságú, mert az életkor és az érdeklődés befolyásolja a betűkészlet beállításait.

Miután tisztázta a tervezés célját, azonosítsa közönségét. Ez a lépés kulcsfontosságú, mert a felhasználóiról szóló információk, például az életkor, az érdeklődési kör és a kulturális nevelés befolyásolhatják az Ön típusára vonatkozó döntéseket.

Például néhány betűtípus megfelelőbb a gyermekek számára. Az olvasás megtanulásakor a gyerekeknek jól olvasható betűkre van szükségük nagyvonalú betűformákkal. Jó példa erre a Sassoon Primary. A Sassoon Primary-t Rosemary Sassoon fejlesztette ki, és annak kutatása alapján, hogy a gyerekek milyen leveleket találtak könnyen olvashatónak.

Más betűtípusok jobban megfelelnek az időseknek. A szeniorbarát betűtípusok olvasható méreteket, nagy kontrasztú színeket használnak, és kerülik a szkripteket és a díszítő stílusokat.

A típus kiválasztásakor vegye figyelembe a közönségét és igényeit. Egyszerűen fogalmazva, érezzen együtt a felhasználóival .

Keressen ihletet

Nézd meg más tervezők munkáját. Próbáld megérteni, hogyan hozták meg a típusukat.

Betűtípus inspiráció

A betűtípusok inspirálásához a CreativeBloq The 100 Best Free Fonts nagyszerű cikk, amely megfelelő gondolkodásmódot kínál a típusválasztáshoz. A cikkben a CreativeBloq elmagyarázza az egyes betűtípusok mögött meghúzódó motivációkat.

Egy másik hasznos forrás az Awwwards 100 legnagyobb ingyenes betűtípus-gyűjteménye 2015-re.

Az Invision összeállította a tipográfiai források óriási tárházát is. Rengeteg forrást talál inspirációra.

A tényleges webhelyek inspirációját a Typ.io oldalon találja. A webhely betűtípus-inspirációt készít az internetről. Ezenkívül a webhely CSS betűkészlet-definíciókat biztosít az egyes inspirációs minták alján.

A dedikált betűtípus-inspiráló weboldalakon kívül látogasson el kedvenc webhelyeire, és nézze meg, milyen betűtípusokat használnak. Jó eszköz erre a WhatTheFont. A WhatTheFont egy Chrome kiterjesztés, amely lehetővé teszi az internetes betűtípusok ellenőrzését az egérrel való lebegéssel.

Inspiráció párosítása

A betűtípusokon túl nézze meg a betűtípus párosítás inspirációját is. A betűkészlet párosítása ugyanolyan fontos, mint maguk a betűtípusok. A jó betűkészlet-párosítás segít létrehozni a vizuális hierarchiát és javítani a tervek olvashatóságát.

Inspirációért kezdje a Typewolf-tal. A Typewolf a betűtípus párosításával inspirálja a különböző webhelyeket. Ezen túl vannak betűtípus-ajánlásaik és mélyreható tipográfiai útmutatóik is. Ez egy kincs a tipográfusok számára.

A FontPair a betűkészlet-párosítási inspirációt is kurálja, kifejezetten a Google Fonts számára. Rendezhet típusú stíluskombinációk szerint, például sans-serif és serif, vagy serif és serif.

Végül rengeteg betűkészlet-párosítási gyűjtemény található, amelyeket a tervezők online hoztak létre. PéldáulTipográfia: Google betűtípus-kombinációk és tipográfia:Google betűtípus-kombinációk 2. kötet. Csak keressen rá a „betűkészlet párosítására” olyan webhelyeken, mint a Behance és a Dribbble.

Válassza ki a betűtípusokat

Kutatással és inspirációval felvértezve készen áll a típus kiválasztására. A típus kiválasztásakor tartsa szem előtt a következő elveket: olvashatóság, olvashatóság és cél .

Válasszon betűtípusokat, amelyek hagyományosak és könnyen olvashatók. Kerülje a rendkívül dekoratív betűtípusokat az egyszerű és praktikus betűtípusok helyett. Vegye figyelembe a betűtípus célját is. Például egyes betűtípusok inkább fejlécek, mint törzsszövegek.

Ezért, mielőtt betűtípust választana, tanulmányozza annak rendeltetését.

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.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

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.