Share
Typografie is een van de meest-zo niet de belangrijkste aspecten van webdesign. Sommigen beweren dat het tot 95% van het webontwerp kost, dus waarom verwaarlozen we het belang ervan vaak? De lezers die naar uw site komen, zullen vaak beslissen om al dan niet te blijven in overeenstemming met uw typografische keuzes. Ze kwamen tenslotte hierheen lezen in de eerste plaats. Denk er eens over na: als inhoud echt koning is, moet logisch gezien typografie worden behandeld als de koningin.
In feite suggereren zelfs sommige lettertypenamen die classificatie; Futura, Optima, Times New Roman (OK, dat is waarschijnlijk een kerel), Verdana, Lucida, Georgia, Helvetica ... Er is geen twijfel mogelijk, typografie is de koningin. Daarom moet ze ook goed gekleed zijn voordat ze naar buiten gaat: ze moet wat tekenspatiëring en tracking aanbrengen, misschien een andere lettertype-variant, en ze ziet er al uit als een echte dame.
Weet je niet zeker waar ik het over heb? Nou, lees verder.
Alvorens verder te gaan met dit artikel, en vooral als je niet veel contact hebt met typografie, raad ik aan de lacunes in je typografische kennis uit Typedia op te vullen, waarbij je speciale aandacht besteedt aan letterbeeldclassificaties en de anatomie van een lettertype, dat je goed van dienst zal zijn bij het maken van uw eigen lettertypestapels en het koppelen van lettertypen.
Nadat je klaar bent met het lezen van de twee artikelen op Typedia, kom hier terug zodat we je nieuw opgerichte typografische kennis kunnen aanhalen en voorbereiden voor de volgende hoofdstukken van dit artikel.
Lettertypen hebben dynamische relaties en kunnen er samen goed of slecht uitzien, afhankelijk van met wie ze zijn vermengd en hun verschillen. Als we technisch willen worden, zijn er in feite drie manieren waarop lettertypen betrekking kunnen hebben:
Een concordante relatie is de relatie zonder spanning, waarbij twee lettertypen qua karakteristieken sterk op elkaar lijken. Het kan ook een enkel lettertype zijn in meerdere stijlen en / of formaten.
Wanneer lettertypen behoorlijk van elkaar verschillen, wordt het contrast weergegeven. Het is meestal goed om te streven naar contrast, bijvoorbeeld tussen een schreefloos en schreefloos lettertype.
Twee (of meer) lettertypen met verschillende kenmerken die nog steeds vergelijkbaar genoeg zijn om problemen op een pagina te veroorzaken, zijn in conflict. Meestal moet je dit soort relaties vermijden.
Letterbeelden kunnen variëren. Of het nu gaat om gewicht, hoogte, breedte of iets anders, elk lettertype heeft een kenmerk dat het onderscheidt. Je zou moeten leren om deze subtiliteiten te herkennen en aan te passen aan hun invloed. En denk niet dat het niet uitmaakt, want zelfs verschillende iteraties van dezelfde lettertypen kunnen soms aanzienlijk ongelijk zijn.
Dit heeft specifiek betrekking op het web, waar de kunst van het maken en toepassen van lettertypestapels erg belangrijk is. Je hoeft niet exact dezelfde lettertypen te kiezen voor een fallback, maar het is alleen maar fair om te zeggen dat een oldstyle lettertype zoals Garamond ondersteund moet worden door een ander ouderwets lettertype met redelijk vergelijkbare kenmerken (Caslon, Baskerville, Times, bijvoorbeeld).
Hoewel ze allemaal serifs zijn, zien Georgia, Garamond en Adobe Garamond Pro (200 puntgrootte in het bovenstaande voorbeeld) er heel anders uit.
Een modern lettertype, zoals Bodoni Condensed of Bodoni Bold, is een uitstekende keuze voor headlines, terwijl het waarschijnlijk een slecht lettertype is voor uitgebreide regels van body-copy, waarbij het de lezer alleen maar van de inhoud zou afleiden. Een oude stijl zoals Garamond (I ♥ Garamond) is een veel betere keuze voor deze situaties.
Niet-ontwerpers nemen vaak slechte beslissingen bij het kiezen van lettertypen voor verschillende gelegenheden, en hoewel ik de Comic Sans-lezing ga overslaan, moet je je bewust zijn van het feit dat het niet altijd geschikt is om bijvoorbeeld Georgia te gebruiken voor het kopiëren van je lichaam. Het is ook niet altijd slecht om Arial als uw favoriete lettertype te gebruiken; maar overweeg welke boodschap je probeert over te brengen, via je typografie.
Dit artikel is niet in de eerste plaats een showcase, maar het is altijd interessant om te zien wat andere getalenteerde ontwerpers hebben gedaan om hun (klanten) websites een genot te maken om naar te kijken. We gaan kijken wat er gedaan kan worden met een zorgvuldige afweging van lettertype-decoratie, evenals solide font-stapels en slimme typografische keuzes.
(P.S.) Als je andere voorbeelden van leuke typografie online wilt bekijken, blader door de archieven van Typesites. Er is niet al te veel inhoud, maar er zijn wel heel goede sites behandeld.)
Is Verdana het saaiste letterbeeld dat je kunt gebruiken? Niet als je het aan Jason Santa Maria vraagt. Hij was slim in het gebruik van de kracht van Verdana (X-hoogte) om de body-kopie vrij klein te maken voor een waardige, elegante look die Een lijst uit elkaar verdient. Het kleine formaat maakt het ook prettig om te lezen op de lange termijn.
Georgia wordt meestal gebruikt om de nadruk te leggen op bepaalde pagina-elementen en als een displayletter. Van andere merkbare ontwerpbeslissingen, hoofdletters zijn klein van formaat en positieve letter-uit elkaar geplaatst voor een betere leesbaarheid en een beter uiterlijk.
Jon Tan, zoals Khoi Vin en Daniel Mall, volgt ook de cultus van zwart-wit minimalistisch design met zorgvuldig geplaatste oranje spatten. Hoewel er een gebrek aan opwinding is in de kleurkeuze, zou je kunnen zeggen dat Jon dit goedmaakt door extra zorg te dragen voor zijn typografische keuzes. Het CSS-bestand van Jontangerine.com bevat meer dan 250 verschillende verklaringen voor alle micro-typografie!
De kopie van het hoofdgedeelte bevindt zich in het mooie Georgia, terwijl gecentreerde koppen verschijnen in een op Times gebaseerde lettertypestapel met Baskerville en Palatino:
font-family: baskerville, 'palatino linotype', 'times new roman', serif;
In andere gebieden wordt typografische "kleur" bereikt door gebruik te maken van verschillende lettertype-varianten, verschillende zwarttinten en uitstekende lettertypen. Absoluut een van de beste op typografie gerichte sites die er zijn!
U heeft waarschijnlijk de afgelopen maanden veel gehoord over het embedden met @ font-face met CSS. Hoewel Internet Explorer al sinds de vierde iteratie een vergelijkbare techniek heeft gehad (we schamen ons hiervoor), alleen in 2009 - toen alle vijf grote browsers @ font-face (de juiste manier) implementeerden - zijn we intensief gaan praten over het online gebruiken van niet-kern webfonts.
Er zijn, zoals je misschien weet, een paar aanzienlijke nadelen aan deze techniek (voornamelijk auteursrechtelijke kwesties), maar als je een geschikt lettertype vindt voor je behoeften, heb je alle kans om de manier te verbeteren waarop lezers je site ervaren. D. Bnonn Tennant (Information Highwayman) besloot om Justus te gebruiken voor body-copy, dat vrij goed contrasteert met het achtergrondloze element sans-serif (het "overtuigende magnum") en helpt bij het bereiken van het "versleten" effect op de site.
Elliot gebruikt graag Slab-Serif-letterbeelden, een voorbeeld van zijn uitstekende 8 gezichten tijdschrift over typografie (zeer aan te bevelen), met FF Unit Slab en zijn eigen website, waar FF Tisa Web Pro is ingebed met behulp van de font embedding-service van Typekit.
Er is niet zoveel typografische styling op de site als, bijvoorbeeld, Jon Tan heeft; Hij heeft het echter goed gedaan met uitlijning en kleur, die ook nooit over het hoofd mag worden gezien en belangrijke ingrediënten zijn in een goede typografie.
Hoewel ze snel 'oude' vervangingstechnieken worden, zijn Flash- en afbeeldingvervangende tekst (zowel Cufón als handmatig ingevoegde afbeeldingen) in plaats van gewone tekst belangrijk voor compatibiliteit tussen browsers in sites waarvan bezoekers niet overwegend moderne browsers gebruiken, zoals en in gevallen waarin het bepaalde lettertype niet beschikbaar is vanwege de een of de andere reden (bijvoorbeeld auteursrechten).
Squared Eye legt de nadruk op verschillende niveaus van koppen met sIFR, evenals met handmatig ingevoegde afbeeldingen. Hij gebruikt een prachtige slab-serif Archer in harmonie met een op Lucida gebaseerde lettertypestapel voor een moderne, maar toch elegante look.
Hoewel ik enkele lettertypestapels zal aanbieden die je in je ontwerpen kunt gebruiken, beschouw je het volgende meer als een "training" voor het maken van je eigen lettertypestapels. Er zijn al veel andere sites die veel kant-en-klare oplossingen bieden voor zowel display- als body copy-tekst.
Zoals het gezegde luidt: "Geef een man een vis en je geeft hem een dag te eten. Leer een man vissen en je voed hem een leven lang."
Voordat u begint met het maken van lettertypestapels, moet u uw primaire doelgroep kennen en bepalen welke software en besturingssystemen zij gebruiken. Op die manier kunt u voorspellen welke lettertypen ze mogelijk hebben geïnstalleerd en hoeveel typografische flexibiliteit u daarvoor heeft.
Bijvoorbeeld; Matthew Smith (Squared Eye) voorspelde waarschijnlijk (terecht) dat de meeste van zijn kijkers geen lettertype zoals Archer op hun computer zullen hebben geïnstalleerd en besloten om het in te bedden met Flash font replacement (in vergelijking met Archer, ~ 97% van de gebruikers hebben Flash geïnstalleerd).
Ontwerp altijd eerst met kernwebfonts en verbeter deze vervolgens geleidelijk met lettertypestapels)
Voor meer informatie over lettertypen die met verschillende software zijn meegeleverd, bladert u door 24 Ways 'Font Matrix, Fluid Web Type en Apaddedcell. Mogelijk vindt u ook de uitgebreide documentatie van Microsoft over lettertypen die bij hun producten worden geleverd, evenals inzicht in hun typografische afdeling, een nuttige leesmethode..
Als het gaat om het bouwen van lettertypestapels, moet u enkele variabelen overwegen om te bepalen welke lettertypen van elkaar verschillen (onthoud de vergelijking Georgia-Garamond-Garamond hierboven?). Dit komt opnieuw neer op je ervaring en bekendheid met verschillende lettertype-categorieën. Je moet leren om niet alleen op te merken hoe serifs worden gepresenteerd (zijn ze scheef of recht? Of bestaan ze niet?), Maar ook de kleine (re) verschillen tussen twee vergelijkbare lettertypen.
Overweeg hoe ze met elkaar communiceren, hun x-hoogte en leesbaarheid op kleine formaten, evenals hun vorm en richting. Zelfs als dit op dit moment misschien intimiderend klinkt, onthoud dan hoe de praktijk perfect wordt.
Voorbeeld: Ibis Display en Archer, hoewel beide schuine reeksen per categorie, zouden waarschijnlijk geen goed paar vormen vanwege het aanzienlijke verschil in de manier waarop hun schreef wordt gepresenteerd en de merkbare dikke / dunne overgangen op Ibis versus een monoweight Archer.
Ik heb al gezegd dat ik van Garamond hou. Dus ik ga een lettertypestapel baseren op Times New Roman, het webveilige lettertype dat het meest lijkt op het bovengenoemde ouderwetse lettertype.
Ik wil graag vermelden dat Garamond, vanwege zijn lage X-hoogte, waarschijnlijk niet de beste keuze is bij het ontwerpen voor uitstekende leesbaarheid op het scherm (het was tenslotte niet gemaakt voor de schermpresentatie), maar het is prima als gebruikt in lettertypegroottes die hoog genoeg zijn (naar mijn mening is 16-17 pixel / 1em Garamond optimaal).
Bij optisch schalen, zoals het wordt genoemd, hebben kleinere tekstafmetingen meestal grotere x-hoogten, bredere stambreedtes en minder typografisch stengelcontrast en grotere weergavegrootten hebben kleinere x-hoogten met meer variatie in stambreedten.
- MSDN-blogs
Volgens 24 Ways 'Font Matrix wordt Garamond geleverd met Office Word 2007 voor Windows en Word 2004 voor Mac, wat betekent dat het beschikbaar is voor een groot percentage bezoekers. Voor degenen die het niet hebben geïnstalleerd, heb ik een back-up in de vorm van Caslon, Garamond en Minion Pro-lettertypen van Adobe verstrekt die bij de Creative Suite worden geleverd (let op dat al deze lettertypen ook beschikbaar zijn voor individuele gebruikers). download; ik noem de programma's die ze verzenden omdat ik veronderstel dat veel van jullie ze hebben gekocht met de software van Adobe).
Ik heb ook besloten om Crimson-tekst uit de Webfont-opslagplaats van Google te gebruiken om een goede terugval voor Times te bieden. De uiteindelijke lettertypestapel ziet er als volgt uit:
font-family: Garamond, Adobe Garamond Pro, Minion Pro, Adobe Caslon Pro, Crimson Text, Times, serif;
Deze lettertypestapel mag uitsluitend op hogere lettertypen worden gebruikt, vooral omdat Windows berucht is vanwege de slechte weergave van lettertypen.
Chrome met standaardinstellingen (links) en Safari met fontvereffening ingesteld op Gemiddeld (rechts). Kan in het begin subtiel lijken, maar het heeft een grote impact op de leesbaarheid in kleinere formaten.
Als je op zoek was naar een buitengewoon goede leesbaarheid op het scherm, zullen de high-x-height-gezegende Georgia en Verdana (beide lettertypen zijn uit de jaren negentig, speciaal gemaakt voor schermweergave) voor aangenamere resultaten zorgen in lettertypestapels.
We zouden bijvoorbeeld kunnen profiteren van de gelijkenis tussen de Lucida-serifs (Fax en Bright, die ook met MS Word worden meegeleverd) en Droid serif van de Google Webfont-repository om een zeer leesbare lettertypestack met een grote x-hoogte te maken:
font-family: Lucida Bright, Lucida Fax, Droid serif, Georgia, Serif;
Opnieuw komen de webfonts van Google in actie vóór een generieke oplossing, voornamelijk omdat Droid serif veel lijkt op Lucida dan Georgia en Times, respectievelijk.
Een zeer vergelijkbare Verdana-gebaseerde stapel zou ook de drie bijna gelijke Lucida sans-serifs bevatten (Grande - schepen met Mac, Sans, Sans Unicode):
lettertype: Lucida Sans, Lucida Sans Unicode, Lucida Grande, Verdana, Sans-serif;
Merk op hoe de vervangende lettertypen vergelijkbare kenmerken hebben, met name hoe het g letter is vrijwel hetzelfde voor lettertypen, en hoe de O lijkt eerder op een cirkel dan op een ellips. Zoals met de meeste schreefloze schreefjes, zijn ze van een klein formaat en hebben ze geen dikke / dunne overgangen (Optima bijvoorbeeld, is niet éénoogje - dat maakt het moeilijker om met andere lettertypen te combineren).
Het is belangrijk om verstandige lettertypestacks te maken, om uitstekende typografie te bieden, moet je de "extra tien procent" doen en typografisch contrast bieden met verschillende lettertypevarianten, gewichten, richting en zorg voor alle micro-typografische methoden..
Jon Tan pakt micro-typografie met extra zorg aan.
Jon Tan gebruikt bijvoorbeeld enkele CSS3-selectors om een geweldige visuele impact te creëren.
.entry-content p: first-line, .entry-content img + p: eerstelijns font-variant: small-caps; font-gewicht: 900; tekst-inspringing: 0px;
Hij gebruikt gecentreerde en cursieve titels binnen een blogpost in een op Times gebaseerde lettertypestapel. Dit, in combinatie met gerechtvaardigde tekst en zijn minimalistische ontwerp, zorgt voor een zeer aangename leeservaring. Onthoud: kleine dingen doen ertoe.
Het combineren van dingen met een vet lettertype, hoofdletters en positieve letterafstand voor kleinere koppen zullen vele malen een veel betere ervaring en contrast opleveren, evenals een duidelijkere scheiding van de body copy, dan alleen een ander lettertype. Samantha Warren heeft Typografische hiërarchie heel goed behandeld en ik raad aan om haar artikel te lezen voor een breder begrip van het onderwerp.
Een zeventien pixel Garamond voor body-copy en 15px Lucida Sans voor subkop 4 (h4) zien er in de bovenste twee situaties behoorlijk anders uit, alleen door een paar kleine veranderingen in onze CSS:
body font: 17px / 1.4 Garamond, Adobe Garamond Pro, / * ... (kijk naar de Garamond-gebaseerde stack hierboven) * / serif; kleur: # 333; text-align: rechtvaardigen; h4 # hoofdletter text-transform: hoofdletter; lettertype: vet 14px / 1 Lucida Grande, Lucida Sans, Verdana, schreefloos; margin-top: 15px; letter-spacing: 1px; h4 # normalcase text-transform: none; font-gewicht: normaal; letter-spacing: 0;
De cursieve ampersands zijn een andere van die technieken die bewijzen hoe "kleine dingen ertoe doen" (merk echter op dat niet alle lettertypen "speciale" ampersands hebben):
.versterker font-family: Adobe Caslon Pro, Garamond, Palatino Linotype, Bell MT, Minion Pro, Garamond, Constantia, Goudy Old Style, High Tower-tekst, schreef; / * De lettertypestapel hierboven bevat enkele lettertypefamilies met leuke ampersands. Kies een paar dat het beste bij u past op een bepaalde website in plaats van alles te gebruiken. Caslon, Palatino en Baskerville doen bijvoorbeeld het grootste deel van de tijd goed werk. * / font-style: italic; regelhoogte: 0;
Als je het gebruik van fancy ampersands wilt automatiseren (deze bijsluiten in de juiste klassen, en een aantal geavanceerde typografische hulp hebt), raad ik aan de WP-typografie-plug-in voor Wordpress op te zoeken.
We kunnen de gebruikerservaring verder verbeteren door de site te verbeteren met enkele eenvoudige JavaScript-codes om te testen of ze een bepaald lettertype heeft geïnstalleerd op haar systeem. Het is dan gewoon een kwestie van een geschikt fallback-lettertype kiezen, als het lettertype niet beschikbaar is (dat wil zeggen, de lettergrootte vergroten om een ander lettertype leesbaarder te maken, beeldvervanging gebruiken, extra lettertypen laden, enz.).
Houd er rekening mee dat u nog steeds rekening moet houden met het feit dat een klein percentage van de gebruikers op internet browst met JavaScript uitgeschakeld.
U kunt misschien een klasse met een noscript aan de body toevoegen als JavaScript is uitgeschakeld en dienovereenkomstig een of andere redelijke typografie voorbereiden.
Dat gezegd hebbende, zijn er enkele, in wezen gelijke, technieken om te ontdekken of een bepaald lettertype op het systeem van de gebruiker is geïnstalleerd. Ik ga een enigszins aangepaste versie van Lucas Smith's code gebruiken:
Accentsconagua
function testFont (naam) name = name.replace (/ ['"<>] / g,"); var body = document.body, test = document.createElement ('div'), installed = false, template = 'mmmmmwwwww'+'mmmmmwwwww', ab; if (naam) test.innerHTML = template.replace (/ X / g, naam); test.style.cssText = 'positie: absoluut; zichtbaarheid: verborgen; display: block! important '; body.insertBefore (test, body.firstChild); ab = test.getElementsByTagName ('b'); installed = ab [0] .offsetWidth === ab [1] .offsetWidth; body.removeChild (test); terugkeer geïnstalleerd; Nadat u de code in uw JavaScript-bestand hebt geplakt, kunt u eenvoudig testen of een bepaald lettertype op de computer van de gebruiker is geïnstalleerd met behulp van voorwaardelijke instructies:
if (testFont ("FontName")) // Dingen doen als het lettertype anders is geïnstalleerd // Doe dingen als het lettertype niet is geïnstalleerd, bijv. Cufón-vervanging Een van de interessantere toepassingen van deze techniek is mogelijk een link naar een bestand voor het laden van lettertypen (@ font-face, Google Webfonts ...), voor het geval onze voorkeurstypen niet beschikbaar zijn op het systeem van de gebruiker. Op die manier verbeteren we de prestaties en dwingen we de gebruiker niet om extra ~ 30kb te downloaden zonder reden:
if (! testFont ("Lucida Fax") &&! testFont ("Lucida Bright") &&! testFont ("Droid serif")) var head = document.getElementsByTagName ("head") [0]; var webfontLink = document.createElement ('link'); webfontLink.rel = 'stylesheet'; webfontLink.href = 'http://fonts.googleapis.com/css?family=Droid+serif'; // nu hebben we head.appendChild (webfontLink); ♣ ♠ ♣ ♠ ♣ ♣ ♠ ♣
Ik hoop dat je nu een beter begrip hebt van typografie op internet. Er is absoluut meer aan de hand, en ik vind het leuk om te horen wat je erover te zeggen hebt in de comments!
