Geeft dit type mijn ontwerp vet?
Niets kan een ontwerp zoals typografie dat niet past, verpesten. Of het te groot (of te klein) is, onjuiste typeschaling is een groot probleem.
Het is een probleem voor meer ontwerpen dan je zou denken. Te vaak bezoekt u een website waar het type prachtig wordt weergegeven in een desktopbrowser, om vervolgens later opnieuw te bekijken vanaf een telefoon en het moeilijk te lezen te vinden. Het gebeurt constant.
Het probleem is dat het type niet echt is geschaald voor elk apparaat. Het is een totaal te vermijden probleem wanneer u een typografische schaal voor projecten overweegt.
Wat is een typografische schaal?
Een visuele typografische schaal kapselt de grootten, de ruimte en de verhoudingen van type-elementen in ten opzichte van elkaar in een project. Dit omvat alles, van de hoofdtekststijl tot koppen, subkoppen, bijschriften en elk ander tekstelement.
De schaal helpt de grootte en plaatsing van de tekstelementen in relatie tot elkaar te bepalen. Voor webontwerp komt de schaal van het visuele type in het bijzonder vaak overeen met tags in uw CSS (zoals h1, h2, h3, p, enzovoort).
Een typeschaal helpt je om harmonie en ritme in het ontwerp te creëren. Het voorkomt ook stilistische problemen omdat tekstelementen overeenkomen met CSS-elementen, zodat elk onderdeel van het ontwerp dezelfde elementen en consistentie gebruikt.
De schaal moet gebaseerd zijn op de grootte van de hoofdtekst. (Plaats altijd eerst een lettertype en een formaat daarvoor). Bouw vervolgens de schaal rond deze hoofdtypografie. Weet je niet waar te beginnen? Google heeft een solide aanbeveling :
- Gebruik een basislettergrootte van 16 CSS-pixels. Pas de grootte aan op basis van de eigenschappen van het lettertype dat wordt gebruikt.
- Gebruik formaten ten opzichte van de basisgrootte om de typografische schaal te definiëren.
- Tekst heeft verticale ruimte tussen karakters nodig; de algemene aanbeveling is om de standaardlijnhoogte van de browser van 1,2 em te gebruiken.
- Beperk het aantal gebruikte lettertypen en de typografische schaal.
Creëer harmonie en ritme
Een typeschaal doet meer dan alleen gebruikers helpen bij het doorlopen van de kopie, het creëert harmonie en ritme voor de tekststroom. Dit is belangrijk op elk apparaat.
Dus waar begin je?
UX Matters heeft een aantal van de beste onderzoeken beschikbaar over het minimum tekstformaten per apparaat . Houd er rekening mee dat dit minimale formaten zijn en dat de tekstgrootte van het hoofdgedeelte blijft toenemen (net als de regelafstand), maar u moet sterk overwegen grotere puntgrootten te gebruiken. Steven Hoober beveelt aan om minimaal 40 procent groter te beginnen dan de aanbevolen minima. Verder kunnen verbeterde contentstijlen tot 80 procent boven het minimum gaan, maar je moet ook voorzichtig zijn met uitzonderlijk groot type.
| Soort apparaat | Minimale grootte | 40% Aanbeveling (aangepast voor eenvoudig gebruik) | 80% Maximum (aangepast voor eenvoudig gebruik) |
| Kleine telefoon | 4 | 5.6 (6) | 7,2 (7,5) |
| Grote telefoon | 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) |
Zodra de hoofdtekstgrootte is ingesteld, kunt u bepalen hoe u ondersteunende tekstelementen moet opmeten. Daar is een fijne kunst voor en de oogtest is vaak een goede plek om te beginnen.
Er bestaat bijna niet zoiets als een kop die te groot is. Zeg wat je moet zeggen en groot om de woorden in de ruimte te schalen. Een kop met twee regels voelt groter aan dan een regel, zelfs als de tekst exact dezelfde grootte heeft.
De gemakkelijkste manier om na te denken over schaalvergroting voor krantenkoppen en andere grotere testelementen werkt in procenten op basis van de hoofdtekst. Hoewel elke ontwerper een ander beginpunt heeft, is 250 procent groter dan de hoofdtekst een goede marge voor de kop; 150 procent voor h2, 75 procent voor h3 en 50 procent voor elementen zoals blokoffertes. (Dit is geen regel, slechts een beginpunt.)
Dit is de reden waarom percentages, in plaats van ingestelde formaten, belangrijk zijn: nadat u de grootte van het lichaamstype hebt ingesteld, passen de percentages overeenkomstig de grootte aan, ongeacht de schermgrootte. Elk type element is relatief ten opzichte van het lichaamstype.
Richtlijnen voor tekens en afstanden
Er zijn enkele andere richtlijnen waar ontwerpers naar op zoek zijn als het gaat om typen op het scherm. Als het gaat om spaties, is het een van de vuistregels om per regel naar tekens te kijken om de leesbaarheid te garanderen.
- Desktop en grote apparaten: 60 tot 75 tekens per regel
- Telefoons en kleine apparaten: 35 tot 40 tekens per regel
Merk op dat leesbaarheid op kleinere schermen gebaseerd is op minder tekens (grotere tekst).
Hetzelfde idee is ook van toepassing op spacing. U hebt meer ruimte nodig tussen tekstregels wanneer de schermgrootte beperkt is, zodat gebruikers gemakkelijker inhoud kunnen lezen en scannen. Overweeg om 25 procent meer regelafstand toe te voegen op kleinere apparaten dan voor desktoptypografie.
De extra grootte en spatiëring helpen bij het verminderen van dat strakke of gecrashte gevoel dat gebruikers kunnen voelen bij het lezen op kleinere apparaten. Omdat het canvas klein is, is de leesbaarheid en leesbaarheid van de lezer essentieel om gebruikers te laten scrollen.
Tips om te beginnen
Er zijn tal van manieren om een typografische schaal te maken en ervoor te zorgen dat de tekst er niet dik uitziet. Hoe u het aanpakt, hangt waarschijnlijk af van uw comfortniveau met code en ontwikkeling naast het ontwerp.
De beste optie is om een responsief ontwerp te gebruiken met mediaquery's. Dit is de ontwerper-ontwikkelaaroptie die het grootste niveau van controle over tekstspecificaties biedt. (Ga voor meer terug naar die Google-aanbevelingen hierboven.)
Een andere route is om verschillende versies te ontwerpen. Hoewel dit een behoorlijk verouderd concept is, zijn er nog steeds plaatsen die mobiele URL's en desktop-URL's gebruiken voor hun websites. Het wordt in de meeste gevallen niet aanbevolen, maar voor sommige websites waar het ontwerp dramatisch anders is of gebruikers verschillende dingen ervaren, kan het een optie zijn.
De eenvoudige optie is om te beginnen met een thema voor uw website. Zorg ervoor dat u kiest voor een volledig responsieve optie. Wanneer u een responsief thema van hoge kwaliteit gebruikt, wordt het grootste deel van het giswerk voor u weggenomen. Het enige waaraan u echt moet denken, is de tekstgrootte van het hoofdgedeelte. Zorg ervoor dat u alles controleert om er zeker van te zijn dat de mobiele typen voldoen aan uw normen.
3 tools om een typeschaal te maken
Er zijn een aantal hulpmiddelen beschikbaar om u te helpen de exacte impact van een visuele typografieschaal te zien. Hier zijn enkele van de beste en meest gebruiksvriendelijke opties.
- Type Schaal : Voer tekst in en speel met opties zoals formaat, schaal en lettertype rechts op het scherm; grad de CSS of bewerk de code rechtstreeks vanuit de tool;
- Modulaire schaal : De schaal werkt als een regel om te helpen bij het bepalen van de grootte van het type; download dan de resultaten als een Sass- of JS-plug-in of bekijk ze op het scherm;
- Gouden ratio typografie Calculator : De tool optimaliseert de grootte, lijnhoogte, breedte en tekens per regel met behulp van de gulden snede
Conclusie
De juiste typografische schaal zorgt ervoor dat uw ontwerp er sierlijk en slank uitziet. Het is de toegevoegde harmonie die gebruikers mogelijk niet begrijpen, maar die bijdraagt aan de algehele leesbaarheid en bruikbaarheid.
Het is waarschijnlijk dat de schaal is uitgeschakeld als het ontwerp "er gewoon niet goed uitziet." Een verkeerd formaat kan moeilijk te vinden zijn, maar is vaak een plek om te kijken als iets over een ontwerp uit balans is. Speel met een paar verschillende schaalopties voordat je ergens genoegen mee neemt, en onthoud dat de trend nu is voor het type dat een beetje groter is dan in het verleden.