Typografi kan skabe eller bryde dit design: en proces til valg af type

En af de vigtigste færdigheder, du kan lære som designer, er, hvordan man vælger type. Dette skyldes, at tekst er en af ​​de primære måder, som designere kan kommunikere med brugerne på. Typografi kan skabe eller bryde et design.

Typografien har en skønhed og kompleksitet. Nogle mennesker bruger hele deres karriere til at skrive. Heldigvis er deres arbejde veldokumenteret, så vi har masser af online ressourcer til typografi.

Denne artikel er designet til at fungere som et udgangspunkt for at hjælpe dig med at lære, hvordan du vælger type til dine designs. Det vil tilskynde dig til at udforske skrifttyper og skrifttypekombinationer ud over dem, du er bekendt med.

Identificer dit formål

Før du gør noget andet, skal du først identificere formålet med dit design. Hvilke oplysninger vil du formidle? Hvad er mediet til dit design?

Godt design tilpasser typografien efter sit formål. Dette skyldes, at typografi er nøglen til at indstille stemning, tone og stil i dine designs.

For eksempel, hvis du designer et lykønskningskort, der er illustrationstungt, skal du vælge en skrifttype, der passer til stilen på din illustration. Harmoniser din type med resten af ​​dit design.

Hvis du designer en billedstyret destinationsside, skal du vælge en simpel skrifttype, der ikke forringer dine billeder. Brug typen som en måde at fremhæve information for at kommunikere mening.

Identificer dit publikum

Når du har bestemt formålet med dit design, skal du identificere dit publikum. Dette trin er afgørende, fordi alder og interesse vil påvirke dine skrifttypemuligheder.

Når du har afklaret formålet med dit design, skal du identificere dit publikum. Dette trin er afgørende, fordi oplysninger om dine brugere som alder, interesser og kulturel opdragelse kan påvirke de beslutninger, du tager for din type.

For eksempel er nogle skrifttyper mere passende for børn. Når børn lærer at læse, har børn brug for meget læselige skrifttyper med generøse bogstavformer. Et godt eksempel på dette er Sassoon Primary. Sassoon Primary blev udviklet af Rosemary Sassoon og baseret på hendes forskning i, hvilke slags breve børn havde let at læse.

Andre skrifttyper er mere passende for seniorer. Seniorvenlige skrifttyper bruger læsbare størrelser, høje kontrastfarver og undgår scripts og dekorative stilarter.

Når du vælger type, skal du tage højde for dit publikum og deres behov. Kort sagt, empati med dine brugere .

Se efter inspiration

Se på andre designers arbejde. Prøv at forstå, hvordan de tog deres beslutninger efter type.

Skriftinspiration

For fontinspiration er De 100 bedste gratis skrifttyper af CreativeBloq en god artikel, der sætter dig i den rigtige tankegang til valg af type. I artiklen forklarer CreativeBloq motivationen bag hver skrifttype.

En anden nyttig ressource er 100 Greatest Free Fonts Collection for 2015 af Awwwards.

Invision udarbejdede også en kæmpe repo af typografiressourcer. Du finder mange kilder til inspiration der.

For inspiration fra faktiske websteder, se Typ.io. Webstedet kuraterer fontinspiration fra hele internettet. Derudover indeholder webstedet CSS-skrifttypedefinitioner i bunden af ​​hver inspirationseksempel.

Bortset fra at se på dedikerede skrifttypeinspirationswebsteder, skal du besøge dine yndlingssider og tjekke, hvilke skrifttyper de bruger. Et godt værktøj til dette er WhatTheFont. WhatTheFont er en Chrome-udvidelse, der giver dig mulighed for at inspicere webskrifttyper ved at svæve over dem.

Parringsinspiration

Ud over bare skrifttyper skal du også se på inspiration til fontparring. Parring af skrifttyper er lige så vigtigt som selve skrifttyperne. God skrifttypeparring hjælper med at etablere visuelt hierarki og forbedre læsbarheden af ​​dine designs.

For inspiration, start with Typewolf. Typewolf curates font pairing inspiration from different sites. Beyond that, they also have font recommendations and in-depth typography guides. It’s a treasure trove for typographers.

FontPair also curates font pairing inspiration, specifically for Google Fonts. You can sort by type style combinations such as sans-serif and serif, or serif and serif.

Lastly, there are tons of font pairing collections created by designers online. For exampleTypography: Google Fonts Combinations and Typography:Google Fonts Combinations Volume 2. Just search “font pairing” on sites like Behance and Dribbble.

Choose your fonts

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

Denne uge vil jeg introducere dig til begrebet CSS i Javascript med Aphrodite af Khan Academy. Aphrodite lader ... medium.com

Du kan finde mig på Medium, hvor jeg udgiver hver uge. Eller du kan følge mig på Twitter, hvor jeg sender ikke-sensiske spøgelser om design, front-end-udvikling og virtual reality.

PS Hvis du kunne lide denne artikel, ville det betyde meget, hvis du klikker på? og del med venner.