Share
Typografie op het web is allesbehalve eenvoudig en voor velen is het een verontrustend mysterie. Vandaag gaan we zes manieren bekijken waarop webontwerpers en -ontwikkelaars de typografie van de sites die ze maken kunnen verbeteren.
Typografie is de kunst van het ontwerpen van letters, woorden, alinea's en hoe ze met elkaar omgaan. Veel ontwerpers en ontwikkelaars stellen typografie vaak gelijk aan het kiezen van een lettertype of lettertype, terwijl anderen gewoon vergeten dat 95% van het webontwerp typografie is en de neiging heeft het te vergeten. Het is duidelijk dat als typografie echt 95% van het webontwerp is, dit in de voorhoede van elke ontwerper en ontwikkelaar zou moeten staan. Hier zijn Zes manieren om uw webtypografie te verbeteren.
De basisbeginselen van typografie zijn belangrijk voor alle ontwerpers, ongeacht of ze ontwerpen voor het web.
Typografische definities
Hieronder staan enkele standaard typografische definities die elke ontwerper / ontwikkelaar zou moeten begrijpen bij het omgaan met typografie. Deze lijst is absoluut niet volledig. Zie de aanbevolen literatuur aan het einde van dit artikel voor uitgebreidere woordenlijsten.
Om een effectieve typografische schaal te maken, is de beste methode die ik heb gevonden om de eenheid voor maatmeting "em" te gebruiken, omdat deze de grootte instelt ten opzichte van de basis van een bepaald document. In het onderstaande voorbeeld is de lettergrootte 12 pixels, wat de standaardlettergrootte voor alinea's op 15 pixels zou instellen.
body font-size: 12px; h1 font-size: 5.0em; h2 font-size: 4.0em; h3 font-size: 3.0em; h4 font-size: 2.0em; blockquote font-size: 1.5em; p font-size: 1.25em; invoer font-size: 1.0em; klein font-size: 0.75em;
Het verticale ritme van regelafstand die zorgt voor de optimale afstand voor het te volgen oog. Om dit ritme te creëren, is het het beste om een basislijnraster te volgen. Uit mijn ervaring is het online verticale ritme het beste ingesteld op of dichtbij 1,5em. NETTUTS +, bijvoorbeeld, gebruikt een verticaal ritme van 1.6em, wat ongeveer overeenkomt met een 17.6px lijnhoogte (gebaseerd op een 11px lettergrootte).
Hieronder staat een standaard verticaal ritme dat ik gebruik op veel van mijn websites die zijn gebouwd op het 960-rastersysteem. Om op de juiste manier een verticaal ritme te verkrijgen, moet elke alinea een marge of opvulling hebben die lager is dan de standaard basislijnrasterlijnhoogte.
body font-size: 12px; regelhoogte: 15px; p margin-bottom: 15px;
Zoals de meeste ontwerpers en ontwikkelaars weten, geven websites verschillend weer in verschillende browsers. Dit geldt met name voor het renderen van lettertypen. Hieronder is een vergelijking van hoe vijf populaire browsers dezelfde tekst anders weergeven:
Afbeeldingsbron: FontTech.Info Bij het bouwen van een typografische lay-out of een site die content-rijk is (zoals een tijdschrift of een blogsite), is het een belangrijke zegen om de verschillen tussen de typografie in elk van de verschillende browsers en besturingssystemen te kunnen zien. Ontwerpen in de browser is niets nieuws (zelfs al in 1997 toen ik mijn eerste website maakte, heb ik hem volledig in de browser ontworpen). Hoewel niet elke site een kandidaat is om te ontwerpen in een browser, zijn degenen die het meest bezig zijn met typografie perfect om in een browser te ontwerpen.
Afbeeldingsbron: voor een mooi web Andy Clarke, populair ontwerper / auteur, sprak onlangs in An Event Apart Boston met een presentatie genaamd Walls Come Tumbling Down waarin hij om verschillende redenen pleitte voor ontwerpen in de browser. De afbeelding hierboven, afkomstig uit zijn presentatie, toont het gebruik van een gestandaardiseerd raster voor beide kolommen en verticaal ritme.
De beste manier om in een browser te ontwerpen, is door een raster zoals dit te gebruiken. In het bronpakket heb ik twee verschillende kolomvormige rasters opgenomen, elk met drie varianten van verticaal ritme. De onderstaande CSS toont de eenvoudigste methode om een van deze testgrids in te zetten door de achtergrondafbeelding of afbeeldingen in de hoofdtekst van de HTML-pagina te vervangen door een klasse die specifiek is voor het raster dat u kiest. Voeg de opgegeven klasse toe aan de body-tag of content-container-DIV-tag en u bent klaar om te ontwerpen in uw browser.
.grid960base15 width: 960px; regelhoogte: 15px; achtergrond: url (images / grid960base15.png) repeat-y; .grid960base18 width: 960px; regelhoogte: 18px; achtergrond: url (images / grid960base18.png) repeat-y; .grid960base30 width: 960px; regelhoogte: 30px; achtergrond: url (images / grid960base30.png) repeat-y; .grid600base12 width: 600px; regelhoogte: 12px; achtergrond: url (images / grid600base12.png) repeat-y; .grid600base16 width: 600px; regelhoogte: 16px; achtergrond: url (images / grid600base16.png) repeat-y; .grid600base18 width: 600px; regelhoogte: 18px; achtergrond: url (images / grid600base18.png) repeat-y;
Opgemerkt moet worden dat voor een goed verticaal ritme, granulaire controle over de lijnhoogte nodig is om het juiste verticale ritme te bereiken. Bovendien kunt u deze raster makende bladwijzer gebruiken om een website over een aangepast raster te leggen. Ik vind dit handig als je de achtergrondafbeelding niet kunt vervangen door een van de rasters.
Het vervangen van tekst door afbeeldingen is sinds de jaren 90 een standaardpraktijk in webontwerp. Met de invoering van CSS in de belangrijkste browsers ontstonden technieken voor het vervangen van afbeeldingen, die niet alleen bestaan uit het maken van een afbeelding en het plaatsen ervan op de plaats van de tekst. De eerste algemeen aanvaarde versie hiervan was Fahrner Image Replacement (FIR), maar toen mensen met CSS Image Replacement speelden, beseften ze dat deze techniek niet toegankelijk was. De Phark Image Replacement-techniek is oorspronkelijk ontworpen als een toegankelijke vervanging voor de klassieke FIR-techniek. Eerste voorgesteld door Mike Rundle van 9regels in 2003, Phark Image Replacement vertrouwt op het gebruik van de CSS-eigenschappen voor tekst-inspringing en achtergrondafbeelding om de tekst voor de gebruiker te verbergen, maar blijft toegankelijk voor schermlezers en zoekmachines.
Als u Phark Image Replacement wilt gebruiken, stelt u het containerelement (in dit geval de DIV's) in met een gedefinieerde hoogte en breedte. Stel vervolgens een achtergrondafbeelding in. Stel ten slotte de eigenschap text-indent in op -9999px. De eigenschap text-indent duwt in wezen de start van de tekst naar links 9999 pixels, maar dit vergroot het schuifbare gebied niet, waardoor de tekst feitelijk verdwijnt.
Hoewel Phark momenteel de meest voorkomende CSS-only Image Replacement-techniek is, zijn er nog vele andere met verschillende voor- en nadelen. Phark laat bijvoorbeeld niets zien aan de gebruiker als afbeeldingen zijn uitgeschakeld maar CSS is ingeschakeld, een relatief klein nadeel. Bovendien is CSS Image Replacement niet echt bedoeld voor grootschalige typografie (dat wil zeggen artikelen), maar het beste voor knoppen, kopjes en andere kleine hoeveelheden tekst. Om meer te weten te komen over andere CSS-gebaseerde beeldvervangingstechnieken, schreef CSS-Tricks een goede samenvatting van alle beschikbare CSS-gebaseerde beeldvervangingstechnieken genaamd Nine Techniques voor CSS Image Replacement.
Standaard beeldvervanging is ideaal voor zeer decoratieve situaties en kleinere hoeveelheden tekst. Wat doe je als je tekst wilt vervangen voor een hele tekst van een artikel? Hoe zit het met het vervangen van koppen en het selectief houden van de tekst? Het antwoord is hier een van de geavanceerde technieken voor het vervangen van afbeeldingen. Voor alle intensieve doeleinden zijn er op dit moment drie verschillende geavanceerde beeldvervangingen beschikbaar (als je nog meer weet, laat ze dan achter in de reacties): Flash-gebaseerd, Javascript-gebaseerd en PHP-gebaseerd.
De eerste van de geavanceerde technieken voor beeldvervanging die op de scène verschenen, was Scalable Inman Flash Replacement (sIFR), oorspronkelijk ontworpen door Shaun Inman als IFR en vervolgens doorgeschoven naar de sIFR-aanduiding door Mike Davidson en Mark Wubben, die momenteel het project onderhouden.
Pluspunten:
- Meest heldere lettertype-weergave vanwege anti-aliasing
- Behoudt originele semantische en toegankelijke tekst
- Degradeert sierlijk in de originele tekst
- Tekst is selecteerbaar (gedeeltelijk)
- Onopvallend script
Nadelen:
- Niet geschikt voor grote hoeveelheden tekst
- Setup kan ingewikkeld en lastig zijn
- Vereist Flash en Javascript
- Laadtijden kunnen traag zijn
- Afdrukken is problematisch
Als u wilt leren hoe u voorbeelden van sIFR implementeert en ziet, heeft NETTUTS + een geweldige tutorial over het gebruik van sIFR of bezoekt u de officiële site voor sIFR2 of de officiële site voor sIFR3, de meest recente versie.
De meest populaire geavanceerde techniek voor het vervangen van afbeeldingen wordt cufón genoemd, naar verluidt een samentrekkingwoord van "aangepast" en "lettertype" volgens sommigen. Het "beoogt een waardig alternatief te worden voor sIFR, dat ondanks zijn verdiensten toch pijnlijk lastig blijft om op te zetten en te gebruiken" volgens de cufón wiki.
Pluspunten:
- Snelste geavanceerde techniek voor het vervangen van afbeeldingen
- Behoudt originele semantische tekstinhoud
- Degradeert sierlijk in de originele tekst
- Vereist geen plug-ins (zoals Flash)
- Onopvallend script
- Eenvoudige installatie
Nadelen:
- Tekst kan niet worden gekopieerd en geplakt (tekst kan niet worden geselecteerd)
- Lettertype-licenties zijn wazig met betrekking tot cufón
- Tekstverantwoording en effecten werken niet
- : hover state heeft veel eigenaardigheden
- Vereist Javascript
Als je wilt leren hoe je voorbeelden van cufón kunt implementeren en zien, dan heeft NETTUTS + een geweldige screencast en een tutorial over hoe je cufón kunt gebruiken of de officiële site van cufón kunt bezoeken.
De Facelift Image Replacement (FLIR) -techniek is anders dan de twee eerder genoemde in die zin dat het gebruik maakt van server-side scripting met PHP en de GD Image Library. Het is ontwikkeld door Cory Mawhorter om een automatische server-side fontvervangingstechniek te bieden.
Pluspunten:
- Behoudt originele semantische tekstinhoud
- Vereist geen plug-ins (zoals Flash)
- Problemen met lettertype-licenties zijn onwaarschijnlijk, of nooit
Nadelen:
- Tekst kan niet worden gekopieerd en geplakt (tekst kan niet worden geselecteerd)
- Het renderen van lettertypen is slecht in vergelijking met andere alternatieven
- Vereist een webserver met PHP en GD
- Vereist meer serverbronnen
- Kan moeilijk zijn om in te stellen
Als je wilt leren implementeren en voorbeelden van FLIR wilt zien, heeft Divito Design een goede tutorial over hoe FLIR te gebruiken of de officiële site van FLIR te bezoeken
CSS3 is relatief nieuw in het landschap van het web en is nog niet wijdverspreid gebruikt. Een van de meest opwindende functies van CSS3 is de regel @ font-face. Er zijn nu twee grote obstakels voor het gebruik van @ font-face. Ten eerste ondersteunen niet veel lettertype gieterijen en lettertypen @ embedding van lettertypen. Sommige licenties zijn vaag en hebben geen betrekking op web-embedding, terwijl sommige expliciet verbieden @ font-face embedding. Voor een lijst met lettertypen die @ font-face embedding ondersteunen, kan webfonts.info een geweldige lijst hebben. De tweede hindernis is dat niet alle browsers de @ font-face-regel ondersteunen, zoals te zien is in de onderstaande tabel met browsertools.
Afbeeldingsbron: Wikipedia De regel @ font-face maakt nu insluiten van lettertypen in IE6, IE7, IE8, FireFox 3.5+ (pc en Mac) en Safari (pc en Mac) met ondersteuning in Opera 10 en Chrome beschikbaar. Dit betekent dat webfonts, in welke vorm of op welke manier dan ook, beschikbaar zijn voor naar schatting 90% + gebruikers.
Idealiter zou deze eerste @ font-face-declaratie deel uitmaken van een CSS-bestand dat via voorwaardelijke opmerkingen wordt aangeboden aan alleen IE met de EOT-versie van het lettertype. De tweede lettertype-declaratie moet een OTF- of TTF-lettertypebestand zijn. Vanwege browserbeveiligingsbeperkingen moet de bron-URL voor declaraties ook relatief zijn (hoewel sommige browsers wel absolute URL's ondersteunen).
Accentsconagua
@ font-face font-family: "Anivers"; src: url ("Anivers.eot"); @ font-face font-family: "Anivers"; src: url ("Anivers.otf"); Yep. Dat is alles wat er is.
lichaam font-family: Anivers, "Helvetica Neue", Helvetica, Arial, sans-serif;
Nadat aangiften zijn gedaan, kan de gedeclareerde lettertypefamilie worden gebruikt zoals elk ander lettertype dat beschikbaar zou zijn op het systeem van een gebruiker. Dit is een opwindend nieuw gebied voor webontwerpers en -ontwikkelaars dat de komende maanden belangrijk zal zijn om te volgen.
Aankomende @ font-face delivery-projecten zoals Typekit en Typotheque willen aanzienlijke hulp bieden bij het onderhandelen over webinbeddingslicenties met de grote lettergieterijen. Bovendien, met alle vragen over het huren van lettertypen voor webinbedding, kan het moeilijk zijn om sommige (of alle) lettertypen die u gaat gebruiken in een webontwerp te gebruiken voor gebruik in uw beeldbewerkingssoftware. Hier zijn twee oplossingen voor: 1) ontwerp in de browser zoals hierboven aanbevolen, of 2) gebruik soortgelijke letterbeelden om de statische paginaontwerpen te ontwerpen.
Typografie op het web staat nog in de kinderschoenen vergeleken met typografie in drukwerk, uitzending en film. Bekijk andere vormen van media voor inventief typografiegebruik. De volgende keer dat je in de bioscoop bent, bekijk dan alle filmposters en let goed op de typografie die wordt gebruikt in previews en trailers. Bekijk de typografie zowel binnen als op de omslag van boeken in uw plaatselijke boekhandel. Bekijk je dvd-verzameling of je favoriete tijdschriften voor inspiratie.
Online, volg toonaangevende online typografische experts zoals For a Beautiful Web, ik hou van Typography, TypeInspire of webfonts.info. Hieronder vindt u een lijst met aanbevolen leeskoppelingen voor meer informatie over webtypografie naast NETTUTS + en de eerder genoemde.
Hopelijk helpen deze zes tips je de volgende keer dat je aan typografie werkt voor het web. Het is een opwindende tijd om typofiel te zijn op internet.
