Share
Als u webontwerp vanaf nul leert en uw typografische karetten aanzienlijk wilt verbeteren, dan is dit artikel voor u geschreven. We gaan in op lettertypen, lettertypen, typografische anatomie, hiërarchie en het kiezen van lettertypen. Je leert genoeg om snel gevaarlijk te worden.
Zoals gebruikelijk voor deze uitgebreide handleidingen, zullen we een aanzienlijk bedrag dekken, waaronder:
Webdesign is 95% typografie! Er is geen webontwerp zonder type. Dus waarom zou u uw webontwerpvaardigheden niet verbeteren door degelijke typografie toe te passen? Er is een rijke wereld vol met brieven om te ontdekken, een wereld die is overgeleverd door generaties creatieve mensen die met grafische en typografische ontwerpen werken. Nog een geweldig konijnenhol waarin je kunt duiken.
In de begintijd van webdesign probeerde het ideeën van grafisch ontwerp te volgen, vooral hoe boeken, tijdschriften en kranten werden opgemaakt en ontworpen. Tegenwoordig is ontwerpen voor het web volwassener geworden en volgen deze concepten niet zo nauw als het ooit deed. Responsief webdesign is een voorbeeld waar design op vele verschillende manieren duidelijk voorbij de printwereld is uitgegroeid. De keerzijde is dat dit ook leidde tot meer complexiteit - iets dat steeds groter lijkt te worden. Verre van bedreigend te zijn, dit is erg spannend en de mogelijkheden groeien niet alleen, maar de opties van vandaag zijn al enorm en cool. Het web is behoorlijk gegroeid - en de toekomst ziet er goed uit!
Type is effectiever dan iets anders bij het overbrengen van uw bericht op internet. Natuurlijk, afbeeldingen kunnen het ondersteunen en verbeteren, ook pictogrammen, maar communiceren met uw gebruikers gebeurt meestal via het geschreven woord - in tegenstelling tot de reclamewereld, waar afbeeldingen en afbeeldingen hele verhalen heel gemakkelijk kunnen overbrengen, zelfs zonder veel geschreven taal te gebruiken bij allemaal.
Op internet hebben we het over pagina's, websites, en vooral interfaces. Het omgaan met voornamelijk grafische elementen hiervoor is moeilijk gebleken, vaak ineffectief, dubbelzinnig en niet geschikt voor de massamarkt.
zonder
Dropbox metDit voorbeeld van Dropbox laat zien dat de grafische beelden alleen niet hetzelfde communicatieniveau bereiken en op zijn best dubbelzinnig zijn.
'Lettertypen' zijn verzamelingen met letters, cijfers en leestekens die sets met stijlen voor een alfabet vormen. Denk aan lettertypen als een soort familie waarvan de leden dezelfde ontwerpkeuzes hebben, maar die kunnen variëren in gewicht en stijlen. Bodoni of Gotham, zijn bijvoorbeeld letterbeelden.
U ontwerp een lettertype.
Caslon
Gotham"Lettertypen" worden beschouwd als een subset van een lettertype. Dit zijn de fysieke (of digitale) tekensets van een bepaald lettertype in een bepaald gewicht en stijl. Open Sans Light is een lettertype; een bestand dat u op uw systeem gebruikt.
U maken een lettertype.
Open SansHet onderwerp classificatie voor lettertypen is veel groter dan men op het eerste gezicht zou denken, vooral de subclassificaties. De essentie om mee te beginnen is snel om grip te krijgen, laten we eens kijken naar een paar classificaties die je absoluut moet weten.
Serif-letterbeelden zijn vernoemd naar de kleine extensies, decoratieve details, aan het einde van sommige slagen: schreven.
Van 10 Remedial Design-aanwijzers voor ontwikkelaarsSerif-letterbeelden zijn de oudste die we in dit artikel zullen bespreken. Dit is geen exacte wetenschap, maar er kunnen argumenten worden ingebracht dat ze teruggaan al in de tijd dat Romeinen brieven in stenen sneden, gebruikmakend van het Latijnse alfabet. Er is ook een interessante theorie die zegt dat ze een resultaat zijn van het gebruik van beitels bij het snijden van stenen en dat ze een artistieke keuze waren vanwege de tools die werden gebruikt om een beter eindresultaat te creëren.
MailChimp
Latinotype
PanaSerieven worden vaak gebruikt voor langere stukjes tekst, zoals body-copy. Het bewijs dat ze "gemakkelijker te lezen" zijn, is niet doorslaggevend, maar dit argument komt vaak naar voren. Ze werken goed in een oude school en een klassieke omgeving, maar kunnen net zo goed werken in een moderne omgeving als ze op de juiste manier worden gebruikt.
The New York TimesSerieven zijn niettemin een uitstekende keuze voor headers. De koppen die worden gebruikt door The Washington Post zijn een perfect voorbeeld van het gebruik van een serif om een bepaalde stijl van traditie en kwaliteit over te brengen, terwijl de sans-serif body-kopie het er modern doet uitzien terwijl het nog steeds zeer leesbaar is.
The Washington Post"Sans-serif" -lettertypen missen de serif-uitbreidingen.
Project SoliSans serifs steeg naar populariteit in de jaren 1920. Ze zijn ontworpen om er modern, industrieel en machinaal uit te zien; ideaal voor de reclamebranche en de Art Deco-beweging van die tijd.
Cool Hunting Omakase
Medium
Webflow"Halve scheldwoorden" bevatten beide kenmerken van schreefletters en schreefloze lettertypen.
Latinotype"Slabschilders" zijn vergelijkbaar met schubben, maar zijn veel dikker en meer opvallend van aard.
VitesseIn het verleden werden ze vaak gebruikt voor typemachines om te zorgen dat er voldoende contrast op de pagina werd gecreëerd. Vroeger hadden typemachines het moeilijker om altijd dezelfde letters op een pagina af te drukken; dit was afhankelijk van de druk en de frisheid van de inkt en dergelijke. Een slankere schreef was minder effectief voor het zetten van machines. De vroege reclamebranche had ook iets nieuws en opvallend nodig, dus maakte zwaar gebruik van platen.
everywhere.is
Proday
Flowhub'Script'-lettertypen emuleren vaak het uiterlijk van met de hand geschreven tekst, waarbij de dikte en vloeiendheid ervan worden nagebootst. Hun uiterlijk is informeler en informeler, en geeft vaak het gevoel van iets dat handgemaakt en persoonlijk is. Scripts zijn meestal erg decoratief en worden zelden gebruikt voor langere alinea's van de tekst (hopelijk).
Paravel
Foster Type
FemmebotZoals de naam al doet vermoeden, neemt elk letter- en interpunctiepersonage van het "monospace" -type dezelfde horizontale breedte in beslag. De andere lettertypen die we tot nu toe hebben behandeld, hebben allemaal tekens met variabele breedten; deze staan bekend als proportionele lettertypen.
Typemachines, vroege computers en terminals die veel worden gebruikt met een monospace. Hardware van de tijd paste niet in de behoefte aan de variabele breedten van andere typefamilies. De huidige teksteditors voor het schrijven van code bieden standaard nog steeds monospaced-lettertypen. Niets spreekt "hacker" duidelijker dan code geschreven in monospace. In de laatste paar jaar is het ook een stuk populairder geworden onder ontwerpers.
De volgende eeuw
CSSDALaten we nu een paar van de belangrijkste anatomische kenmerken van het type bespreken.
We maken ons hier niet al te veel zorgen over de details, het is jouw taak als ontwerper om creatief met de lettertypen zelf om te gaan, niet elk klein detail van hoe ze zijn gecomponeerd. Het draait allemaal om wat je doet, wat je bereikt als je lettertypen op 'werk' zet. Dus mijn advies is eenvoudig, begrijp en onthoud de basis, heb plezier, speel met de lettertypen en geniet ervan in de loop van de tijd. Er is niets mis met niet elk detail te kennen over type anatomie! Aan de andere kant, misschien ben ik hier te pragmatisch over. Jij beslist!
WikipediaDe basislijn is de regel waarop de meeste personages zijn geplaatst.
WikipediaDe mediaan- aan de andere kant is het plafond voor de meeste kleine letters.
De ruimte tussen de basislijn en de mediaan is wat we de x-height. Dit kan worden gezien als gelijk aan de hoogte van de kleine letter "x", vandaar de naam. Hoe groter de x-hoogte die een lettertype biedt, des te beter leesbaar deze op lagere formaten zal zijn. Het merendeel van de tekst die we in de westerse wereld lezen, bestaat uit kleine letters, en aangezien de meeste onderscheidende kenmerken die ons in staat stellen om letters en dus woorden te herkennen, in dit gebied te vinden zijn, heeft x-height een grote invloed op de leesbaarheid.
Deze extra ruimte geeft een lettertype een beetje meer kans om zijn karakter te laten schijnen. We hebben de neiging om te lezen in sprongen en letters snel en onbewust te consumeren. Dus meer x-hoogte is goed voor body-copy, omdat lange alinea's van de tekst vervelend kunnen worden als de ogen harder moeten werken om het alfabet te ontcijferen. Secties zoals titels waar je in het algemeen grotere lettertypen en kortere tekst gaat gebruiken, kunnen wegkomen met minder dan optimale x-hoogtes. Je hebt meer ruimte voor artistieke keuzes die een bepaalde sfeer of karakter impliceren zonder de leeservaring van je gebruikers te erg te beïnvloeden.
De beklimmer is dat deel dat zich uitstrekt boven de mediaan, terwijl het afdaalapparaat is het deel van een personage dat zich uitstrekt onder de basislijn:
Van The Anatomy of Web Typographytellers zijn gedeelten die gedeeltelijk of volledig omsloten zijn. Denk aan een "o" of een "a". De "a" heeft bijvoorbeeld twee tellers: een die gedeeltelijk is en een die volledig is ingesloten. Letterbeelden met grotere tellers zijn meestal ook goed voor de leesbaarheid omdat de details meer ruimte hebben om expliciet te worden getoond. Zoek dus naar lettertypen met grote x-hoogtes en grotere tellers als u geïnteresseerd bent om gebruikers een goede leeservaring te bieden.
Laten we nu een paar verschillende soorten spatiëring bekijken als het gaat om typografie.
Lijnhoogte is de ruimte tussen twee opeenvolgende basislijnen. In gedrukte vorm is het erg belangrijk om een consistent verticaal ritme te maken - het basislijnraster - een minigridssysteem voor type op een pagina. Op het web is dit soort precisie notoir moeilijk te bereiken.
Van mijn naam is MikeResponsieve omgevingen maken het toepassen van basislijngrids nog minder aantrekkelijk, dus misschien is uw tijd wellicht beter geïnvesteerd in meer pragmatische zaken.
Een goede regelhoogte voor alinea's op het web ligt meestal tussen 1,3-1,6 (wat evenredig is met de lettergrootte). Titels kunnen en moeten een beetje krapper zijn. Een goede maatstaf om in gedachten te houden is dat lezers gemakkelijk naar het begin van de volgende regel moeten kunnen springen. U wilt gebruikers niet belasten met een of andere mentale overhead, maar moet concentreren op waar ze moeten blijven lezen wanneer ze het einde van een regel tekst bereiken.
Variërende graden van lijnhoogte kunnen ook (bizar) invloed hebben op de kleur van uw tekst. Kortere lijnhoogten lijken donkerder omdat de micro-witruimte tussen regels tekst is verkleind-en omgekeerd natuurlijk. Het vinden van een balans zodat tekst die er samenhangend, licht en leesbaar uitziet, uw doel is bij het aanpassen van deze afstand. Lees de tekst, gebruik echte tekst niet dummy ipsum en zie hoe het voelt. Is het een goede leeservaring? Dit zou altijd in de voorhoede van je geest moeten staan!
Beide termen betekenen hetzelfde: het aantal tekens op één regel tekst. Een goede maat voor ontwerpen op het web ligt tussen 60-85 tekens. Lijnlengte en lijnhoogte zijn enigszins symbiotisch en afhankelijk van elkaar. Hoe meer regellengte een alinea nodig heeft, hoe meer lijnhoogte er moet worden opgenomen.
Als het er te krap of te elastisch uitziet, pas het dan aan tot het leesbaar en "voelt" goed.
kerning verwezen naar het aanpassen van de variërende micro-spatie tussen individuele letters. Dit wordt anders opgevat door elk type ontwerp, dat voldoet aan de behoeften van elke letter. Een kleine "o" kan bijvoorbeeld minder ruimte innemen dan een kleine "t". Op het internet is dit vervelend om aan te passen, terwijl de praktijk van kerning veel voorkomt in de grafische industrie.
WikipediaOp internet het is mogelijk om kerning toe te passen door te vertrouwen op de gegevens die in de lettertypen zelf zijn ingebakken. Dit is een functie die kan worden geactiveerd met de CSS text-rendering of font-feature-instellingen eigenschappen. Houd er rekening mee dat er op dit moment nog geen sprake is van ondersteuning.
Dit verwijst naar de consistente spatiëring tussen alle letters in een groep. Het is niet gericht op individuele letters zoals kerning, maar is in plaats daarvan een uniforme aanpassing die zich uitstrekt over de gehele betrokken tekstpassage, wat resulteert in meer of minder dichtheid en textuur.
Wanneer u grotere stukken tekst gebruikt, bijvoorbeeld voor titels, kan een klein beetje afstand tussen de letters een lange weg gaan. U wilt niet de indruk wekken dat de tekst uit elkaar valt. Net als met tekenspatiëring, wanneer lettertypen zijn ontworpen om te worden geconsumeerd met kleinere lettergroottes, heeft de letterafstand mogelijk deze kleine verschuivingen nodig, omdat de oorspronkelijke tekenspatiëring anders werd beschouwd.
Gebruik echte citaten. Periode!
De andere 'citaten' die vaak worden gebruikt, zijn eigenlijk rechte aanhalingstekens, die voor inches en feet moeten worden gebruikt. Apostrophes en enkele aanhalingstekens hebben ook hun echte tegenhanger. Ja, je moet een vinger-kung-fu op je toetsenbord doen om ze te krijgen, maar het eindresultaat is de moeite waard. Lees verder:
Een ellips verwijst naar de drie stippen die gemakkelijk kunnen worden aangezien als drie enkele perioden. Het verschil is dat ze meer ruimte hebben tussen elke periode. Je kunt links en rechts extra ruimte gebruiken, het is aan jou om te beslissen.
Gebruik dit als u inhoudswoorden, zinsdelen, regels, alinea's of delen van aanhalingstekens wilt weglaten. Het is een tijdelijke aanduiding om aan te geven dat je wat tekst hebt weggelaten.
Er zijn geen extra spaties rond streepjes nodig. Hun voornaamste doel is om woorden aan elkaar te koppelen, zoals beeldende kunst, 8-jarige en dergelijke.
Ze zijn ook uw enige keuze voor voorvoegsels en achtervoegsels. Je moet ze ook gebruiken als je een woord moet spellen: T-U-T-S-P-L-U-S. Spanningstijd en afstand maken ook deel uit van hun repository:
Voor deze bereiken kunt u ook de nl scheutje.
De en dash ontleent zijn naam aan de lengte van de kleine letter "n". Het is een beetje langer dan een koppelteken en wordt gebruikt voor waardenreeksen, maar ook voor implicerende relaties zoals master-student. Of voor nadruk.
De em streepje is weer een beetje langer, de grootte van de hoofdletter "m". Ze moeten worden gebruikt om een denkpauze te benadrukken en om aan te geven dat een zin niet af is. Beide streepjes kunnen een beetje dunner lijken dan een koppelteken, meestal. Gebruik alsjeblieft geen twee koppeltekens in gevallen waarin en of em-streepjes meer geschikt zijn. Geen van beide versies van streepjes vereist een extra spatie eromheen.
Ik weet het, deze interpunctie details klinken niet al te onstuimig, maar deze basiskennis van hoe ze juist te gebruiken moet belangrijk voor je zijn als je houdt van ontwerpen met goede typografie in gedachten. Het lijkt ook triviaal om drie soorten streepjes te hebben waaruit je kunt kiezen omdat ze er erg op lijken, maar aan de andere kant is er in de loop der jaren veel zorg en aandacht aan besteed en moeten we het werk respecteren van ontwerpers die kwam lang voor ons. Het is hun harde werk en baanbrekend werk waardoor het zo eenvoudig is om op te bouwen vandaag. Aandacht voor deze details is een kleine prijs om te betalen voor het staan op de schouders van reuzen.
Het is belangrijk dat u een sterke hiërarchie overbrengt binnen uw typografie. Waarom? Omdat, zoals we aan het begin van dit stuk hebben vastgesteld, het type op de pagina ongeveer 95% van uw ontwerp uitmaakt. Als je een zwakke hiërarchie hebt in je tekst, heb je geen kans op een sneeuwbal in het creëren van een sterke hiërarchie in je algehele ontwerp.
Trent Walton
TypologicTypografie biedt u meerdere manieren om uw gebruikers visuele ankers te geven om uw site te navigeren zoals u dat wilt. Door middel van nadruk kun je hen laten weten wat het belangrijkste is en waar ze eerst aandacht aan moeten besteden. Hier zijn een paar manieren om uw werk op die afdeling te versterken:
Als je niet veel kleur op een pagina hebt, vallen elementen die wel een kleur hebben echt op. Zoals altijd is minder meer. Aangezien de onderstaande voorbeelden spaarzaam gebruik maken van kleur, is het effect erg sterk, zelfs zonder de grootte of extra witruimte te vergroten.
Paravel
DropboxVerhoogde relatieve lettergrootte zal altijd de aandacht vestigen op bepaalde elementen. Wat ik leuk vind aan verschillende lettergroottes, is dat je eenvoudig visuele "ankers" kunt maken die de lezer kan gebruiken om op een pagina rond te springen. Het enige nadeel is dat je echt consistent moet zijn met het gebruik van lettergroottes voor bepaalde elementen. Je kunt het niet overal naar believen veranderen. Dat zou uw ontwerpen waarschijnlijk veel meer verzwakken dan het hebben van uniforme tekst.
Typeterrance
DropboxGeef belangrijke typografische elementen ruimte om te ademen. Als ze omringd zijn door lege ruimte, wordt dat eenvoudigweg benadrukt. Nieuwkomers lijken een beetje weg te schrikken van het gebruik van veel ruimte tussen elementen. In druk kan dit kostbaar zijn, maar op het web krijg je dit spul gratis. Speel rond, let op wat andere ontwerpers verzinnen en stelen af en toe. Geen magie en geen raketwetenschap. Slechts een kleine ervaring is alles wat je nodig hebt - uiteindelijk zul je een goede darmmaat ontwikkelen.
CSS Zen Garden
Trent WaltonEen uitgebreid letterbeeldfamilie geeft u voldoende gewichten om uit te kiezen. In veel van de bovenstaande voorbeelden ziet u verschillende gewichten voor verschillende doeleinden op het werk. Voor mij is dit niet iets waar ik direct naar begin en meestal probeer ik de andere tools eerst hiërarchie te maken. Maar dit is een kwestie van smaak, wat het beste werkt voor u en uw ontwerpen.
Latinotype
DropboxIn de screenshot van de Dropbox "about" -pagina kun je zien dat de namen een ander gewicht hebben dan hun titels. Een zeer basistechniek om de nadruk te leggen.
Cursief zijn geweldig voor secundaire of tertiaire informatie in lopende tekst (of nadruk, natuurlijk). Het onderstaande voorbeeld maakt er goed gebruik van voor het weergeven van een adres.
De Type Directors ClubWanneer u meer dan één lettertype kiest voor uw werk (het beste om te voorkomen dat u meer dan twee lettertypen kiest), is het van cruciaal belang dat deze lettertypen zelf een soort hiërarchie creëren door hun contrast. Aan de ene kant moeten ze gemakkelijk van elkaar te onderscheiden zijn en aan de andere kant niet al te ongerelateerd. Er zijn een paar goede richtlijnen voor het selecteren van lettertypen; het volgende hoofdstuk zal je daarover informeren.
Trent Walton
Stuntbox
Jason Santa Maria
Jason Santa MariaHoud er rekening mee dat alle bovenstaande regels alleen schijnen als u ze consequent gebruikt. Als je te veel verandert, wordt je hiërarchie aanzienlijk verzwakt. Als dit allemaal helemaal nieuw voor je is, ga dan naar mijn artikel over visuele ontwerpprincipes om je op de hoogte te brengen. Al het voornoemde zal daarna nog veel logischer zijn.
We hebben tegenwoordig tonnen lettertypen om uit te kiezen. En dat niet alleen, we hebben talloze services die ons daarmee willen helpen. Het kan een tijdje duren om een idee te krijgen van wat er in de praktijk is. Maar voor mij is dat absoluut een goede zaak. Webtypografie heeft een lange weg afgelegd, niet alleen in termen van het ecosysteem, maar ook in termen van wat browsers je tegenwoordig laten doen.
Bij het kiezen van de lettertypen die je wilt gebruiken, raad ik je aan om je eerst te richten op de leesbaarheid en stijl die je in je ontwerpen wilt overbrengen. De toon en de boodschap zijn ook belangrijk, want dit type heeft een enorme invloed op de verschillende kenmerken. Als je dat allemaal kunt doen, onderscheid je je aanzienlijk van de rest van de kudde.
Zorg ervoor dat u een goed contrast creëert tussen de gepaarde keuzes. Lettertypen die er ongeveer hetzelfde uitzien, kunnen er verwarrend uitzien en uw visuele hiërarchie negatief beïnvloeden. Grotere lettertypefamilies hebben ook het voordeel dat ze tonnen opties hebben om het ene voorbeeld te variëren. Op die manier kun je maar één lettertype gebruiken zonder er saai uit te zien.
Kitchen Sink StudiosAls je verder wilt gaan dan is het koppelen van een schreefloze letter met een serif-lettertype de beste plaats om te beginnen, het meest redelijke eigenlijk. Dit kan leiden tot een sterker en interessanter contrast dat u in uw voordeel kunt gebruiken - stilistisch.
Hanson WuGebruik consequent je keuzes. Vermijd het overschakelen van de lettertypen op body copy en headers overal. Bepaal welke het beste is voor de leesbaarheid en welke het beste is om een stijl over te brengen, terwijl je de aandacht van de lezers vasthoudt en je daaraan houdt.
Ben GoodyearSommige letterontwerpers hebben serif en schreefloze versies van hetzelfde lettertype gemaakt. Deze zouden netjes moeten samenwerken. Als je lettertype een bijpassende broer / zus heeft, kun je vanaf het begin een passend contrast zien op te lossen.
adayinbigdata.comAls u twee lettertypen koppelt, richt u op sterke visuele verschillen tussen beide. Houd het subtiel als je wilt, maar het moet op zijn minst merkbaar zijn, zelfs voor het snelle oog. In dat opzicht kan het lastig zijn om twee schreefzones of twee schreven te koppelen.
BlootstellingTerwijl je op zoek bent naar visuele verschillen, wil je ook opletten voor een of andere gemeenschappelijke eigenschap. Iets dat de twee verschillende lettertypen aan elkaar kan binden. Hun visuele structuur, de manier waarop hun brieven zijn ontworpen, zou gemeenschappelijke ideeën kunnen delen. Vergelijkbare items en soortgelijke skeletten van hun algemene letters, bijvoorbeeld. Dat verbindt ze nog vakkundiger. Een vergelijkbare structuur of geometrisch ontwerp helpt daar zeker bij.
Sta bij gelegenheid af! Wanneer je combinaties vindt die je leuk vindt, probeer ze dan zelf uit en kijk wat je ermee kunt doen. Leren door het imiteren van het werk van anderen is prima.
Typografie mist harde wetten om je beslissingen te sturen. Dat is voor mij een goede zaak. Typografie is in veel opzichten subjectief, maar leesbaarheid is misschien de enige constante waarop je je altijd eerst moet richten. Neem alle ideeën en concepten die we hebben behandeld met een korrel zout en zie ze als vertrekpunten voor uw eigen creatieve verkenningen.
Er is veel ruimte om het web te infuseren met betere typografie. Het is zo'n geweldig hulpmiddel om de communicatie te verbeteren en ik denk dat het cultureel waardevolle kennis is die ons is overgeleverd gedurende vele generaties hard werk en verkenning. Het is fantastisch hoe je daarmee de toon van de geschreven taal kunt beïnvloeden.
Accentsconagua