Har denne type fået mit design til at se fedt?
Intet kan ødelægge et design som typografi, der ikke passer. Uanset om det er for stort (eller for lille), er ukorrekt type skalering et stort problem.
Det er et problem for flere designs, end du måske tror. Alt for ofte besøger du et websted, hvor typen gør smukt på en stationær browser, kun for at se senere fra en telefon og få svært ved at læse. Det sker hele tiden.
Problemet er, at typen ikke blev virkelig skaleret for hver enhed. Det er et helt undgåeligt problem, når du overvejer en typografisk skala for projekter.
Hvad er en typografisk skala?
En visuel typografisk skala indkapsler størrelser, rum og proportioner af typeelementer i forhold til hinanden i et projekt. Dette omfatter alt fra hovedtekstets tekststil til overskrifter, undertekster, billedtekster og ethvert andet tekstelement.
Skalaen hjælper med at bestemme størrelse og placering af tekstelementerne i forhold til hinanden. Til webdesign svarer den visuelle type skala ofte til tags i din CSS (såsom h1, h2, h3, p osv.).
En type skala hjælper dig med at skabe harmoni og rytme i designet. Det holder dig også ud af stilistiske problemer, fordi tekstelementer svarer til CSS-elementer, så alle dele af designet bruger de samme elementer og konsistens.
Skalaen skal baseres på størrelsen på krops tekst. (Indstil altid et skrifttype og størrelse for det første). Byg derefter skalaen omkring denne hovedtypografi. Ikke sikker på hvor du skal starte? Google har en solid anbefaling :
- Brug en basis skrifttypestørrelse på 16 CSS pixels. Juster størrelse baseret på egenskaber for den skrifttype, der bruges.
- Brug størrelser i forhold til basisstørrelsen til at definere den typografiske skala.
- Tekst kræver lodret mellemrum mellem tegn; Den generelle anbefaling er at bruge browserens standardlinjehøjde på 1,2 em.
- Begræns antallet af anvendte skrifttyper og den typografiske skala.
Lav harmoni og rytme
En type skala gør det mere end blot at hjælpe brugerne med at bevæge sig gennem kopien, det skaber harmoni og rytme for strømmen af tekst. Dette er vigtigt på enhver enhed.
Så hvor starter du?
UX Matters har nogle af de bedste undersøgelser til rådighed på minimum tekststørrelser efter enhed . Bemærk, at disse er mindste størrelser, og da kroppstastestørrelser fortsætter med at stige (ligesom linieafstand), bør du stærkt overveje større punktstørrelser. Steven Hoober anbefaler at starte mindst 40 procent større end de anbefalede minimumsforhold. Yderligere kan forbedrede indholdsstile gå op til 80 procent over minimumet, men du bør også være forsigtig med en usædvanlig stor type.
| Enhedstype | Mindste størrelse | 40% Anbefaling (justeret til nem brug) | 80% Maksimal (justeret til nem brug) |
| Lille telefon | 4 | 5,6 (6) | 7,2 (7,5) |
| Stor telefon | 6 | 8,4 (8,5) | 10,8 (11) |
| phablet | 7 | 9,8 (10) | 12,6 (13) |
| Tablet | 8 | 11,2 (11,5) | 14,4 (14,5) |
| Laptop / desktop | 10 | 14 (14) | 18 (18) |
Når kroppens tekststørrelse er indstillet, kan du bestemme, hvordan du kan formatere understøttende tekstelementer. Der er en fin kunst til det, og øjenprøven er ofte et godt sted at starte.
Der er næsten ikke noget som en overskrift, der er for stor. Sig hvad du skal sige og størrelse for at skala ordene i rummet. En to-linjers overskrift vil føle sig større end en linje, selvom teksten er den samme størrelse.
Den nemmeste måde at tænke på opskalere til overskrifter og andre større testelementer virker i procent baseret på kroppens tekst. Mens hver designer har et andet udgangspunkt, er 250 procent større end kropsteksten en god kugleplads for overskriften; 150 procent for h2, 75 procent for h3 og 50 procent for elementer som blok citater. (Dette er ikke en regel, bare et udgangspunkt.)
Her er grunden til, at procentpoint, snarere end størrelser, er vigtige: Når du har indstillet størrelsen på kropstypen, tilpasser procentene størrelserne i overensstemmelse hermed uanset skærmens størrelse. Hvert type element er i forhold til kropstypen.
Karakter og afstand retningslinjer
Der er nogle andre retningslinjer, som designere også ser på, når det kommer til at skrive på skærmen. Når det kommer til afstand, har en af tommelfingerreglerne været at se på tegn pr. Linje for at sikre læsbarhed.
- Skrivebord og store enheder: 60 til 75 tegn pr. Linje
- Telefoner og små enheder: 35 til 40 tegn pr. Linje
Bemærk, at læsbarhed på mindre skærme er baseret på at have færre tegn (større tekst).
Den samme idé gælder også afstanden. Du har brug for mere plads mellem tekstlinjer, når skærmens størrelse er begrænset til at gøre det lettere for brugerne at læse og scanne indhold. Overvej at tilføje 25 procent mere linieafstand på mindre enheder end til desktop typografi.
Den ekstra størrelse og mellemrum hjælper med at lette den stramme eller knuste følelse, som brugerne kan føle, når de forsøger at læse på mindre enheder. Fordi lærredet er lille, er læserens strømning og læsbarhed afgørende for, at brugerne kan rulle.
Tips til at komme i gang
Der er mange måder at oprette en typografisk skala på og sørge for, at teksten ikke gør dit design ser fedt ud. Hvordan du går om det, afhænger sandsynligvis af dit komfortniveau med kode og udvikling ud over designet.
Den bedste mulighed er at bruge et responsivt design med medieforespørgsler. Dette er indstillingen designer-developer, der giver størst kontrol over tekstspecifikationerne. (For mere gå tilbage til disse Google-anbefalinger ovenfor.)
En anden rute er at designe forskellige versioner. Selv om dette er et smukt forældet koncept, er der stadig nogle steder ved hjælp af mobile webadresser og stationære webadresser til deres websites. Det anbefales ikke i de fleste tilfælde, men for nogle hjemmesider, hvor designet er dramatisk anderledes eller brugerne oplever forskellige ting, kan det være en mulighed.
Den nemme mulighed er at starte med et tema til dit websted. Bare sørg for at vælge en fuldt følsom løsning. Når du bruger et højkvalitets responsivt tema, tages det meste af gættet ud af det for dig. Alt hvad du virkelig skal tænke på, er teksttekststørrelsen. Bare sørg for at kontrollere alt for at sikre, at mobiltyperne opfylder dine standarder.
3 værktøjer til at skabe en type skala
Der er en række værktøjer til rådighed til at hjælpe dig med at se den eksakte virkning af en visuel typografi skala. Her er et par af de bedste og mest brugervenlige muligheder.
- Type Skala : Indtast tekst og spil med muligheder som størrelse, skala og skrifttype lige på skærmen; grad CSS eller rediger koden lige fra værktøjet;
- Modulær skala : Skalaen fungerer som en regel til at bestemme størrelser for type; download derefter resultaterne som et Sass- eller JS-plugin eller se dem på skærmen;
- Golden Ratio Typography Calculator : Værktøjet optimerer størrelse, linjens højde, bredde og tegn pr. Linje ved hjælp af det gyldne forhold
Konklusion
Den rigtige typografiske skala vil holde dit design udseende trim og svelte. Det er den ekstra harmoni, som brugerne måske ikke forstår, men bidrager til overordnet læsbarhed og brugervenlighed.
Det er sandsynligt, at skalaen er slukket, hvis designet "bare ikke ser rigtigt ud." Forkert størrelse kan være svært at bestemme, men er ofte et sted at se, når noget om et design er ude af balance. Spil med et par forskellige muligheder for målestok før du sætter dig på noget, og husk at trenden lige nu er for typen, der er lidt større end tidligere.