Af @jonathanzwhite

Typografi kan gøre eller ødelægge 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, designere kan kommunikere med brugere. Typografi kan fremstille eller ødelægge et design.

Der er en skønhed og kompleksitet ved typografi. Nogle mennesker bruger deres hele 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 opfordre 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 tilpasses typografien med dets formål. Dette skyldes, at typografi er nøglen til at indstille stemning, tone og stil i dine design.

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

Vælg en skrifttype, der passer til din illustration

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

Hvis billeder er i fokus for dit design, skal du vælge enkle skrifttyper, så billederne skiller sig ud

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 har indflydelse på dine fontindstillinger.

Når du har klarlagt 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 have indflydelse på de beslutninger, du tager for din type.

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

Sassoon Primary blev udviklet Rosemary Sassoon

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

Når du vælger type, skal du tage hensyn til dit publikum og deres behov. Kort sagt, empatisk med dine brugere.

Se efter inspiration

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

Skriftinspiration

Som fontinspiration er de 100 bedste gratis skrifttyper fra CreativeBloq en dejlig artikel, der sætter dig i det rigtige tankesæt 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 masser af kilder til inspiration der.

Typ.io sammenstiller fontinspiration fra hele internettet

Se typ.io for inspiration fra faktiske websteder. Webstedet sammenstiller fontinspiration fra hele internettet. Derudover indeholder webstedet CSS-fontdefinitioner i bunden af ​​hver inspirationseksempel.

Bortset fra at se på dedikerede websteder med fontinspiration, kan du besøge dine yndlingswebsteder og se 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 holde musen hen over dem.

Parring af inspiration

Udover kun skrifttyper, skal du også se på fontparringsinspiration. Fontparring er lige så vigtig som skrifttyperne i sig selv. God fontparring hjælper med at etablere visuelt hierarki og forbedre læsbarheden af ​​dine designs.

Fontparring er lige så vigtig som skrifttyperne i sig selv

For inspiration, start med Typewolf. Typewolf kuraterer fontparringsinspiration fra forskellige websteder. Derudover har de også skrifttypeanbefalinger og dybdegående typografihåndbøger. Det er en skattekiste for typografer.

FontPair kuraterer også fontparringsinspiration, specielt til Google-skrifttyper. Du kan sortere efter typekombinationer som sans-serif og serif eller serif og serif.

Endelig er der masser af fontparringskollektioner oprettet af designere online. For eksempel typografi: Google-skrifttypekombinationer og typografi: Google-skrifttypekombinationer Volumen 2. Søg bare efter “fontparring” på websteder som Behance og Dribbble.

Vælg dine skrifttyper

Bevæbnet med forskning og inspiration er du klar til at vælge din type. Når det drejer sig om valg af type, skal du huske følgende principper: læsbarhed, læsbarhed og formål.

Før du vælger en skrifttype, skal du undersøge dets tilsigtede formål

Vælg skrifttyper, der er konventionelle og lette at læse. Undgå yderst dekorative skrifttyper til fordel for enkle og praktiske skrifttyper. Vær også opmærksom på formålet med en skrifttype. For eksempel er nogle skrifttyper mere egnede til at være overskrifter snarere end kropstekst.

Af denne grund skal du undersøge dets formål, inden du vælger en skrifttype.

Par skrifttyper, der kontrasterer hinanden

Med hensyn til fontparring skal du holde det enkelt med maksimalt tre forskellige skrifttyper. Desuden parret skrifttyper, der kontrasterer hinanden. Det vil hjælpe dig med at lede læsernes øjne, først til overskrifter og derefter til kropstekster. Du kan også oprette visuel kontrast ved hjælp af forskellige skriftstørrelser, farver og vægte.

For webfonte kan du bruge Google-skrifttyper, Typekit og Font Squirrel. Google-skrifttyper er gratis, Typekit og Font Squirrel har gratis og betalte skrifttyper.

Bestem skriftstørrelser

Det næste trin efter afvikling af en fontkombination er at bestemme størrelsen. Et godt værktøj til dette er Modular Scale af Tim Brown, chef for typografi hos Adobe. Modular Scale er et system til at identificere historisk behagelige forhold til at skabe skalaer til at bestemme typestørrelser.

Modular Scale er et system til at identificere historisk behagelige forhold til at skabe skalaer til at bestemme typestørrelser

For eksempel kan du bruge en skala, der er baseret på det gyldne forhold. Her ville være dine første fem beregne fontstørrelsesindstillinger:

Golden Ratio (1: 1.618)
1.000 x 1.618 = 1.618
1,618 x 1,618 = 2,618
2.618 x 1.618 = 4.236
4,236 x 1,618 = 6,854
6.854 x 1.618 = 11.089

Et problem, du muligvis støder på, er, at dit forhold er for stort. Se på hvad der sker med de senere intervaller i vores skala baseret på det gyldne forhold.

Golden Ratio (1: 1.618)
...
11,089 x 1,618 = 17,942
17,942 x 1,618 = 29,03
29,030 x 1,618 = 46,971
46,971 x 1,618 = 75,999
75.999 x 1.618 = 122.966

Som du kan se, begynder intervaller mellem numre at blive for store. For de fleste grænseflader har du brug for mindre intervaller. Heldigvis har Modular Scale en række forskellige forhold baseret på geometri, natur og musik.

Mindre sekund 15:16
Major Andet 8: 9
Mindre tredje 5: 6
Major tredje 4: 5
...

Så i stedet for at bruge det gyldne forhold, kan du bruge et forhold, der giver mindre intervaller som den perfekte fjerde.

Perfekt fjerde (3: 4)
...
9,969 x 1,333 = 13,288
13,288 x 1,333 = 17,713
17,713 x 1,333 = 23,612
23,612 x 1,333 = 31,475
31.475 x 1.333 = 41,95
41,956 x 1,333 = 55,927

Når du er kommet til en skala, kan du kirsebær vælge fontstørrelser fra din liste og afrunde dem til den nærmeste decimal.

Skriftstørrelser
Header 1: 55px
Header 2: 42px
Header 3: 31px
Header 4: 24px
Header 5: 14px
Krop: 17px
Billedtekst: 14px

Modular Scale-metoden bruger matematisk præcision til at generere skriftstørrelser. Det er dog kun en guide. Brug denne metode som udgangspunkt, og juster derefter størrelser med øjet.

Opret en typografi styleguide

Det sidste trin i processen er at oprette et styleguide til din typografi for at hjælpe med at standardisere typen på tværs af dine designs.

Delte stilarter i Sketch

I programmer som Sketch kan du oprette delte tekstformater for hurtigt at indsætte tekst med stilarter, der allerede er anvendt fra din retningslinje.

Det er under dette trin i processen, at du kan finjustere og færdiggøre dine tekstattributter som farve, vægt og størrelse.

Et ord om farve: Når du vælger farve, skal du tage hensyn til din farvepalet. Vælg farver til din type, der harmonerer med din farvepalet.

Brug styleguides til at standardisere typen på tværs af dine designs

I dit styleguide skal du sørge for i det mindste at inkludere følgende ting: fontdefinitioner, skriftstørrelser, skriftfarver og eksempler på brug.

Googles retningslinjer for typografimateriale er et godt eksempel på, hvad der skal medtages i en styvy. Et par andre eksempler inkluderer typografihåndbøger fra Mailchimp, Apple og Focus Labs.

Typografi handler om eksperimentering. Det er både en videnskab og en kunst.

Jeg udfordrer dig til at bryde ud af din komfortzone og udforske typen i dit design.

Hvad er dine foretrukne skrifttyper? Efterlad en note, eller send mig en tweet på Twitter.

Hvis du nød denne artikel, kan du også nyde CSS i Javascript med Aphrodite, et bibliotek fra Khan Academy.

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

P. S. Hvis du nød denne artikel, ville det betyde meget, hvis du klikker på og deler med venner.