Share
Goede typografie kan een hoeksteen zijn van een succesvol webontwerp. Omdat zoveel webontwerp uit tekst bestaat, is het slaan van de juiste markering voor uw typografie een sleutelfactor in het algehele succes van uw site. De subtiliteiten van fijne typografie kunnen moeilijk zijn voor beginners om te begrijpen? maar vandaag hebben we 8 tips die u kunnen helpen uw algehele ontwerpen te verbeteren.
Zoals ik al eerder zei, kan goede typografie een cruciale rol spelen in het succes van een webontwerp. Het kan helpen bij het genereren van een visuele hiërarchie. Het kan tekst leesbaarder maken. Zoals de quote uit Steve Jobs 'Stanford-beginadres hieronder vermeldt, is typografie niet zomaar een willekeurig momentoplossend besluit, er zijn veel factoren en waarden die beschouwd moeten worden als goed gegenereerde typografie te genereren die er niet alleen goed uitziet, maar ook functioneel voordeel biedt gemakkelijker leesbaar zijn en waarde wegnemen.
Ik besloot om een kalligrafieles te nemen om te leren [kalligrafie leren]. Ik leerde over serif en sans-serif-lettertypen, over het variëren van de ruimte tussen verschillende lettercombinaties, over wat geweldige typografie geweldig maakt. Het was prachtig. Historisch. Artistiek subtiel op een manier die de wetenschap niet kan vastleggen. En ik vond het fascinerend. Niets van dit alles hoopte op enige praktische toepassing in mijn leven. Maar 10 jaar later, toen we de eerste Macintosh-computer aan het ontwerpen waren, kwam het allemaal bij mij terug. En we hebben het allemaal in de Mac ontworpen. Het was de eerste computer met prachtige typografie. Als ik nooit op die ene cursus op de universiteit had gezeten, had de Mac nooit meerdere lettertypen of proportioneel gespreide lettertypen. En aangezien Windows zojuist de Mac heeft gekopieerd, is het waarschijnlijk dat geen enkele computer deze zou hebben.
We gaan in op het classificeren van lettertypen en hoe ze in een minuut kunnen kiezen? maar ik wil dat je bedenkt wat lettertype echt voor jou betekent (of het project waar je op dit moment aan werkt). Natuurlijk kun je bijna elk lettertype gebruiken om een woord te maken - maar wat zegt dat lettertype eigenlijk over het woord? Meer dan elke andere ontwerpbeslissing die u maakt, geven de typeselecties die u maakt uw sitekarakter en context. Kies ze zorgvuldig en ze helpen je te communiceren met kijkers of leiden ze af.
Bekijk als snel voorbeeld de volgende twee varianten van het woord "zou kunnen" (hieronder). Niets verandert aanzienlijk in termen van kleur of grootte, maar de impliciete betekenis die u misschien (har har) meeneemt, verandert drastisch eenvoudig met het lettertype en de behuizing.
Er zijn verschillende hoofdklassen lettertypen, maar er zijn er slechts twee die voornamelijk op het web worden gebruikt (schreefloos en schreefloos). De eerste is een lettertype met schreef, kleine extra details aan de randen van elke letter, terwijl de laatste schreefloos is (vertaald zonder de schreef, voor degenen onder ons die het Latijn niet begrijpen).
Meer dan elke andere ontwerpbeslissing die u maakt, geven de typeselecties die u maakt uw sitekarakter en context.
Beide lettertypen kunnen goed werken, hetzij in een schema van voornamelijk die of in sommige omstandigheden als een combinatie. Als u het echter fout doet, kan uw webontwerp het volledig verkeerde gevoel en de verkeerde indruk wekken, of er gewoon slecht uitzien. Beschouw de volgende voorbeelden en de toon naar elk ontwerp gebracht door de gebruikte letterbeelden:
Overweeg ook enkele andere aspecten, zoals of uw tekst leesbaar is in een serif-lettertype dan in een schreefloos lettertype. Kleinere tekst wordt meestal beter weergegeven in een schreefloos lettertype, zolang je maar netjes speelt met een aantal andere factoren die ik vandaag noem.
Het is ook vermeldenswaard dat de komst van Google Fonts, Typekit, CSS @ font-face-services en andere technologieën voor het vervangen van lettertypen een nieuwe golf van lettertypen heeft geïntroduceerd die mogelijk niet in de categorieën van alleen maar serif of sans-serif vallen. Beschouw de volgende voorbeelden:
Een site die lukraak veel verschillende lettertypen gebruikt, is als een persoon die veel verschillende stemmen gebruikt in hetzelfde gesprek? het lijkt misschien een goed idee, maar de kans is groot dat je uiteindelijk als een gek persoon klinkt voor iemand die langskomen
Algemene kennis adviseerde webontwerpers om een enkel lettertype te kiezen en erbij te blijven, maar het kan vaak veel visueel interessanter zijn om 2 of 3 lettertypen te kiezen en deze (consistent en uniform!) Te gebruiken in zorgvuldig gemaakte combinaties. Dit is waar het mengen van schreefloze en schreefloze lettertypen echt interessant kan worden. Overweeg de volgende voorbeelden en hoe de diversiteit van het type de ontwerpen tot leven brengt:
Merk op dat hoewel er meer dan één lettertype wordt gebruikt in elk ontwerp, ze op de juiste manier worden gebruikt (zie tip 1) en consequent op elke site staan.
Het aantal verschillende lettertypen kan echter de leesbaarheid en andere algemene ontwerpproblemen veroorzaken, dus dit betekent niet dat u het alleen zou moeten doen omdat u 100 verschillende lettertypen kunt gebruiken. In sommige gevallen werken veel gebruikte lettertypen tegelijk goed als een artistieke verklaring, maar het is over het algemeen een goede vuistregel dat u het aantal lettertypen tot een minimum beperkt.
Waarom? Een eenvoudig antwoord is dat een site die veel verschillende lettertypen lukraak gebruikt is als een persoon die veel verschillende stemmen gebruikt in hetzelfde gesprek? het lijkt misschien een goed idee, maar de kans is groot dat je uiteindelijk als een gek persoon klinkt voor iemand die langskomen. Als u het aantal lettertypen op een site beperkt, kunt u de hiërarchie en toon instellen zonder deze te overdrijven.
Natuurlijk, het kiezen van de juiste lettertypen in deze selectie is ook belangrijk. Bepaalde lettertypen werken goed met andere specifieke lettertypen, met name lettertypen die in soortgelijke categorieën voorkomen, zoals schreef / schreefloos. Een plaatlettertype komt mogelijk niet overeen met het ultradunne lettertype dat u naast het lettertype hebt geplaatst. Probeer verschillende combinaties uit tot u de juiste 2 of 3 vindt die voor u werken.
Regelafstanden kunnen een grote struikelblok zijn voor een goed schema van typografie. Regelafstand is precies dat, de afstand tussen de regels van uw tekst. Verplaats ze verder uit elkaar, en het wordt over het algemeen een stuk leesbaarder en gemakkelijker voor het oog. Uw regelafstand moet in de regel ongeveer 0,3 tot 0,5 millimeter groter zijn dan uw lettertype, hoewel dit afhankelijk van uw ontwerp kan verschillen. Hoewel dat een vuistregel is, moet u erkennen dat de leidraad moet verschillen afhankelijk van uw lettertype, aangezien voor andere lettertypen meer of minder duidelijkheid nodig is.
Om te begrijpen waarom genereuze regelafstand een must is in de meeste ontwerpen, raadpleegt u de onderstaande afbeelding om een basiskennis te krijgen. Op dit niveau zijn ze allebei redelijk leesbaar, maar de gespreide is steeds meer omdat elk woord meer ruimte heeft om te onderscheiden en te scheiden van de rest.
Het concept van een visuele hiërarchie is waar de elementen die u wilt dat uw lezer eerst ziet en waarnemen, het meest prominent zijn, of dat nu is gemaakt door kleur, grootte, lettertype of iets heel anders. Typografie kan een rol spelen in de algehele hiërarchie van uw site, maar het kan ook een eigen hiërarchie hebben. Het gemakkelijkste voorbeeld om dit uit te leggen is tekst op een blog bekijken en zien hoe de titel over het algemeen het grotere voorbeeld van tekst is.
U kunt verschillende factoren gebruiken om uw hiërarchie te maken. Kleur is een voorbeeld en dat speelt mooi in contrast, waarbij de elementen die je als eerste wilt lezen, de gemakkelijkste zijn. Grootte is misschien wel het grootste voorbeeld, want je zult ongetwijfeld een enorme 10-uige reeks tekst opmerken boven je standaard alineaformaat op 1em.
Macintude maakt gebruik van het Black Sakura-thema van ThemeForest. U gaat waarschijnlijk door en leest de titel voordat u zich verdiept in de inhoud, nee? Zie Brandon's artikel over dat onderwerp voor meer informatie over de visuele hiërarchie in webdesign.
Meten is ook een belangrijk aspect. De maat is de breedte van uw tekst en een factor die kan bepalen of uw tekst te breed of te smal is. Meten werkt meestal samen met regelafstand om de tekst leesbaar te maken voor de eindgebruiker, door inhoud aan te passen aan het bereik dat het menselijk oog comfortabel aflegt op zijn reis over de pagina.
Tenzij uw sjabloon specifiek een smal of breed ontwerp is, wilt u uw tekst waarschijnlijk op een constante breedte plaatsen die voldoet aan deze eenvoudige wiskundesom: 30 x tekstgrootte. Gebruik dat als basislijn naast je padding en je gebruik van de gulden snede (mocht je besluiten dat te gebruiken) om een breedte te creëren die gemakkelijk genoeg is om te lezen. Verlies het niet allemaal door uw regelafstand te verkleinen of uw tekst te klein te maken.
Het is een beetje moeilijker om te definiëren wat een goede maatregel is, omdat het heel verschillend kan verschillen tussen verschillende ontwerpen. Bredere tekst kan beter bij een specifiek ontwerp passen.
Tekstuitlijning is ook een belangrijke factor. Er zijn over het algemeen vier soorten die je zou kunnen gebruiken: links, midden, rechts en gerechtvaardigd. De gouden regel voor typografie is om het leesbaar te maken, en u heeft daar niet zoveel controle over als u kiest voor een uitgevulde tekstuitlijning. Uitgevulde tekst is in feite de tekst die is geoptimaliseerd om de hele breedte van uw element te vullen en de perfecte rechthoek van tekst te creëren. Dat is misschien goed in kranten en drukwerk, maar op het web werkt het gewoon niet zo goed. De ene regel is misschien veel meer opgepropt dan een andere regel, maar dat is niet iets dat je specifiek kunt regelen.
Natuurlijk, je hebt je typografie misschien geperfectioneerd op een schaal van 100%, maar sommige gebruikers zouden kunnen kijken met hun browservenster ingezoomd of uitzoomen. Daarom moet je typografie goed kunnen schalen wanneer de gebruiker een zoomlens gebruikt of uitzoomt. Dit is heel eenvoudig te testen en te manipuleren, puur door uw browser te schalen.
Let op uw bezoekers met toegankelijkheidseisen, zowel in als buiten de typografie. Natuurlijk kan scaling door iedereen worden gebruikt en vaak zelfs per ongeluk. In de netbook van mijn broer is het Chrome-venster geregeld veel te ver ingezoomd, puur per ongeluk vanwege het gebaar op het trackpad.
Natuurlijk is het type staggared zoomen dat mogelijk is in de meeste browsers slechts één type. Mac OS X Lion introduceert een prachtige iOS-achtige pinch-to-zoom die inzoomt op een pagina alsof het een afbeelding is. Men zou ook moeten overwegen dat type zoom, en hoe hun tekst er uitziet wanneer deze binnen dezelfde lay-out wordt bekeken, alleen op een veel dichterbij bekeken manier.
In een notendop, het gewicht van een lettertype is hoe dik het is. Een lettertype kan in veel gewichten voorkomen, van de ultralichte haarlijn tot de ultrazwarte plaat. Het wijzigen van het gewicht van sommige tekst wordt meestal gebruikt om een subtiele definitie toe te voegen om het belang te bepalen, zoals het markeren van trefwoorden of een openingsparagraaf, wanneer deze in een alinea wordt gebruikt.
Het lettertypegewicht kan in veel verschillende scenario's worden gebruikt. U kunt het bijvoorbeeld binnen een post gebruiken om sleutelwoorden of zinsdelen te kiezen. Onderscheid maken met het gewicht van het lettertype betekent dat er minder behoefte is aan meerdere lettertypen of dat er andere factoren worden geïntroduceerd die de leesbaarheid kunnen verminderen.
Typografie is een echt integraal onderdeel van design. Wanneer u naar een blog kijkt, zult u merken hoeveel tekst er op de pagina staat en hoeveel invloed het heeft op het ontwerp als geheel. Deze acht factoren zijn het belangrijkst als het gaat om typografie en kunnen de esthetiek van het ontwerp drastisch veranderen.
Kiezen of je lettertypen schreven gebruiken is een belangrijke beslissing, en hoe je ze kunt mixen, is nog belangrijker. Het aantal lettertypen, de ruimte tussen de tekstregels, de maat, de uitlijning en het gewicht zijn ook allemaal belangrijke kenmerken. Kortom, uw typografie is iets dat goed moet worden doordacht en niet zomaar willekeurig moet worden samengegooid.
Accentsconagua