Beste praktyke vir webtipografieë vir ‘n moderne webwerf

‘N Handleiding vir responsiewe webtipografie oor al die beste praktyke & reëls vir lettertipe-stylering om te verseker dat die inhoud van u webwerf leesbaar is & ‘n vreugde om te aanskou.

Tipografie beste praktyke

Skilders het hul borsels. Beeldhouers het hul klei. Webontwerpers het hul … lettertipes? Soos Oliver Richenstein nou gedoen het beroemd geskryf: “95% van die inligting op die web is geskrewe taal.” Na al die sorgvuldige oorweging wat u geskenk het aan u werf se aangepaste grafika, ikone, mooi spyskaarte en skoon koppelvlakke – sou dit ‘n sin wees om dan die belangrike komponent van webtipografie te verken.

Moenie bekommerd wees nie; jy hoef nie ‘n meesterontwerper te wees om ‘n gladde en effektiewe teks te ontwerp nie. Deur te hou by ‘n paar betroubare riglyne en beginsels, sal u webtipografie die inligting oordra wat gebruikers verlang op ‘n maklik leesbare en deurdagte ontwerp.

Vestig ‘n visuele hiërargie

Die belangrikste doelwit van goeie webtipografie is om ‘n hiërargie inhoud wat visueel van een element na die volgende vloei. Die regte onderskeid tussen u opskrifte, subopskrifte en teks, ‘n verskeidenheid fontgewigte en style, en genoeg wit spasie tussen blokke teks is alles faktore wat ‘n moeitevolle leeservaring bevorder.

Voorbeeld van tipiese visuele hiërargie

Die bou van ‘n sterk liggaam

U eerste bestelling is om die belangrikste van u werf af te spyker liggaam teks, want dit is wat u besoekers die meeste van hul tyd sal spandeer om te lees. U doel is om teks te skep wat natuurlik oor groot paragrawe vloei, wat ‘n gesonde ritme kan inspireer vir lang leesstukke.

  • Die algemeenste lettergrootte vir liggaams-teks is 16px—Of beter nog, 1em (meer hieroor later).
  • Vermy dat die teks in lyn gebring word, want die ongelyke rande aan beide kante sal ‘n onaangename gesig skep. Stel eerder links en regs marge van die houer van die teks na motor om ‘n meer wenslike effek te verkry.
  • Geregverdigde teks werk uitstekend vir koerante, nie webblaaie nie. Die aard van vloeibare uitlegte kan onvoorspelbare gapings tussen woorde skep.
  • kies lae-kontras lettertipes oor hoë letters. Lettertipes soos Didot werk mooi vir jumbo-opskrifte of vir drukformaat in groot formaat, maar die hoë kontras tussen dik en dun streeplyne sorg vir moeilike leeswerk in klein groottes op webwerwe.
  • Wees bedag op leesbaarheid. In baie lettertipes met sans-serif lyk die hoofletter “ek” en kleinletters presies dieselfde, wat onnodige verwarring kan veroorsaak.
  • Die optimale lyn hoogte van die teks in die paragraaf is tussen 1,25–1,5 × die lettergrootte. Pas dit aan volgens die gekose lettertipe.

Opskrifte vir sukses

Vir beter of slegter sal die meeste lesers waarskynlik deur u bladsy blaai opskrifte sonder om eens te pla met die hoofteks. Daarom is dit van kritieke belang om hul aandag te trek en verder te lees deur te verseker dat die tipografie van u nuusopskrifte merkwaardig is.

  • Die gemiddelde lettergrootte vir opskrifteks is êrens heen 36px—Of beter nog, rond 2.25em (ons gaan hieraan kom).
  • Daar moet altyd aandag geskenk word aan die opskrif voor die liggaam. Sorg dat u opskrifteks nie oorval word deur ‘n te dik skrifgewig in die liggaam nie.
  • Sorg dat u nuusopskrifte aan die lesers se verwagtinge voldoen. ‘N Aansienlike groter teks met ‘n ruim afstand tussen sy kinderparagraaf dui op ‘n verandering in die onderwerp, terwyl kleiner opskrifte baie nader aan paragrawe impliseer dat die inhoud verwant is.
  • As u kop na die volgende reël moet draai, moet u weet dat die beste is lyn hoogte vir opskrifte is minder dan wat dit vir Liggaams-teks is.

Die ruimte tussen

Die hoeveelheid ruimte wat u bladsy se elemente skei, sê baie oor hul verhouding met mekaar, en dit is ‘n ontwerpbeginsel wat nie miskyk kan word nie. Oorheersende hoofde omring deur ‘n oseaan van wit bied ‘n baie ander konteks as kleiner kopstukke wat nou aan paragrawe geheg is (onthou dat ons ‘n visuele hiërargie).

Oor die algemeen is dit beter om te dwaal as jy te veel wit spasie het as nie genoeg nie. Op die moderne web word die voorkeur gegee aan skoon uitlegte met ‘n ruim wit ruimte.

Val in lyn

Stel jou voor dat jy teks lees op jou 27-duim-skerm met ‘n hoë resolusie wat oor albei kante van die skerm strek. Na net een paragraaf word u oë moeg!

Dit is belangrik om elke reël van u hoofteks te beperk tot ‘n sekere aantal karakters, sodat die oë op ‘n sentrale punt gefokus bly. Die gewilde konsensus is dat hierdie magiese maatstaf vir desktops is 60–75 karakters lank. vir mobiele skerms, waar ons oë wil vermy en té gekondenseerde teks, sit hierdie nommer rond 35–40 karakters per reël.

Tipping the Scale

Daar is baie geskryf oor die grootte van grootte tussen Body en Heading-grootte. Wat is die perfekte H2-grootte as u Body-teks, byvoorbeeld, 1em is? Die bepaling van die mees esteties aangenaamste verhoudings tussen Liggaams-teks en H1 – H6-opskrifte is gelukkig iets wat baie typograwe al gedekodeer het. Boonop moet hierdie wiskundige verhoudings ook aanpas volgens die skermgrootte van die gebruiker.

Ontwerper Jason Pamental voorsien ‘n nuttige grafiek vir wat hy meen die beste fontgroottes op verskillende media-toestelle is – en ek is geneig om met hom saam te stem. In wese, selfs al is die ideale H1-grootte op ‘n tafelblad 3 x die liggaamsgrootte, sal dit op ‘n mobiele skerm te oordrewe lyk; dit moet dus afgeskaal word om die kleiner besigtigingsarea te akkommodeer.

Grafiek met optimale lettergroottes oor verskillende mediatoestelle

VINNIGE OPMERKING: Hoe kan u sien of u ‘n goeie visuele hiërargie het?? Dink na jou skerm totdat al die teks vaag word. As die uitleg verskyn as ‘n amorfe kleur sonder ‘n onderskeid tussen gedeeltes, sal u hierargie moontlik misluk. As u egter maklik skeidings tussen blokke teks, opskrifte kan onderskei en duidelik weet waarheen die oë moet beweeg, dan is u in ‘n goeie vorm!

Hou teks responsief

Responsiewe webontwerp is deesdae ‘n noodsaaklike praktyk – veral omdat al hoe meer mense mobiele toestelle as hul primêre middele gebruik om op die internet te blaai. Alhoewel die ontwerp met persentasies eerder as pixels die manier waarop beelde en marges by vloeibare breedtes aanpas, ‘n omwenteling gemaak het, is die responsiewe webtipografie ongelukkig ‘n taai eier om te kraak.

Die optimalisering van lettergroottes op verskillende toestelle kan oorweldigend raak, want u moet deur verskeie mediavrae navigeer om al die teks op u webwerf te teiken. Met ‘n vinnige aanpassing aan u keuse-eenheid, sal u die regte lettergroottes makliker vind om vir enige soort skerm te gebruik.

Ems oor pixels

Om die tipografie van u webwerf te vereenvoudig, gooi die pixel uit en begin gebruik EBW. Ems maak dit moontlik om die skalering tussen die lettergroottes van u webwerf makliker te verstaan, en hul kleiner eenhede is meer hanteerbaar as die dubbelsyferpiksels.

Belangriker nog, met ems is alles relatief tot die ouerhouer. As u die lyn hoogte van ‘n houer na 1,5 em, dan sal die lynhoogte op die regte verhouding bly, selfs al sou u die lettergrootte van die houer verander. Met pixels, moet u die houer se lynhoogte-eienskap voortdurend aanpas vir elke enkele verandering in die lettergrootte om visuele konsekwentheid te behou.

Hierdie beginsel geld ook marge, padding, brief-spasiëring, en veral enige ander styl wat u op die teks van u webwerf toepas. U hoef nie meer te dink aan pixels op die inhoud van u inhoud vir elke mediavraag nie – stel slegs die aanvanklike toestand in ems en dit sal outomaties aanpas by die oorspronklike verhoudings!

Met behulp van Ems

Die eerste ding om te doen is om die basisverwysing vir die lettergrootte van u webwerf in te stel. In u stylblad, voer dit in:

liggaam {
lettergrootte: 100%;
}

Dit bepaal ‘n relatiewe lettergrootte van die inhoud van u webwerf 1em, wat die meeste blaaiers interpreteer as 16px. Al u opskrifgroottes – 2,25 em, 1,5 em, ensovoorts – is direkte veelvoude van die basislyn 1em.

BELANGRIKE NOTA: Ems is waterval—Betekenis van hul grootte is relatief tot die vasgestelde waarde van die ouer. Byvoorbeeld: As u die skrifgrootte van u liggaam op 1,25 em stel en die lettergrootte van ‘n kinderhouer dan op 1,25 em, dan is die twee lettertipes nie dieselfde nie! In plaas daarvan, sal die teks van die kinderhouer 1,25 × die oorspronklike ouerformaat van 1,25 em wees.

Meer wenke vir wonderlike webtipografie

Hier is nog ‘n paar wenke vir uitstekende webtipografie:

Moenie dit oordoen nie

U moet die tipografie van u webwerf beperk tot 2–3 lettertipes hoogstens. Dit is tipies ‘n lettertipe vir u opskrifte, ‘n lettertipe vir u hoofteks en miskien ‘n lettertipe vir onderopskrifte indien nodig. As u te veel lettertipes gebruik, kan dit ‘n morsige en ongefokusde uitleg skep. Die laaityd van u werf kan ook beïnvloed word, soos die volgende punt verduidelik.

Bed slegs wat u nodig het in

Oorweeg slegs die belangrikste vir u webwerf en laat die res uit. As u weet dat u dit gaan benodig gereelde, vet en italic ontwerp vir ‘n gegewe lettertipe, sluit slegs die keuses in en sluit die dun, lig en swart style. As u meer style laai as wat nodig is, kan u hulpbronne van u webwerf ‘n groot sukses kry, aangesien elke individuele styl ‘n aparte bedienerversoek is.

As u nie u kreatiwiteit in die ontwerpfase wil beperk nie, gaan voort en sluit alles in; onthou net om die oortollige style te verwyder voordat u webwerf weer begin.

As u dit nie kan lees nie, gebruik dit dan nie

Hierdie is ‘n biggie. Terwyl die blomme handgeskrewe lettertipe mag dit aanloklik wees om te gebruik, as daar selfs die geringste verwarring is of dit ‘n ‘g’ of ‘n ‘y’ is, gebruik dit dan nie! Niks is vir die leser meer frustrerend as om te sukkel om ‘n onleesbare lettertipe te ontsyfer nie.

Gee regte teks bo ‘Lorem Ipsum’

Elke ontwerper maak staat op lorem ipsum dom teks om leë inhoudsareas te vul wanneer u ‘n projekuitleg beplan. U kan egter verbaas wees hoeveel die impak van die werklike inhoud op die voorkoms en gevoel van u tipografie kan wees. ‘Lorem ipsum’ is heeltemal emosieloos en intellektueel hol; dit gee nie ‘n goeie idee hoe u woorde en persoonlikheid deur lettertipes uitgespreek word nie. Probeer dus die werklike inhoud so gou as moontlik by u werf in voordat u die ontwerp van u webwerf finaliseer.

Kontras met agtergronde

‘N Donker lettertipe teen ‘n duidelike wit agtergrond sal altyd die beste leesbaarheid bied. Wit teks teen ‘n donker of vaag beeld word deesdae ook gewild. Let daarop dat u agtergrond nie te ingewikkeld of gedetailleerd is nie, wat die teks op die voorgrond sal oorskry.

Swak tipografie-voorbeeld van teks oor teksagtergrond‘N Voorbeeld van ‘n slegte tipografie-praktyk met behulp van ‘n teks oor teks-agtergrond.

Om lettertipes saam te pas – soos aantreklik soos

As jy lettertipes met heeltemal verskillende persoonlikhede saambind, sal dit deurmekaar seine ontstaan. Die twee kan stilisties kontrasterend wees, maar emosioneel moet hulle dieselfde boodskap lewer.

Om lettertipes saam te werk – hou dit in die gesin

Die eenvoudigste oplossing is dikwels die beste. Soms is die beste parings afkomstig van die gebruik van variasies (serif, alternatiewe gewig, plaat) binne dieselfde Font-Family.

hiperskakels

Algemene en verwagte oefening is om onderstreep skakels en verwyder die onderstreep van hovergebeurtenisse. Maak seker dat u beklemtoonde teks gekursiveer is as u hierdie roete volg vetdruk eerder as onderstreep om verwarring te voorkom.

Deesdae word die geankerde teks egter meestal gekleur, met ‘n oorgangseffek wat toegepas word wanneer dit aangehou word. Vanuit ‘n ontwerpsperspektief is dit ongetwyfeld die beter opsie – maar onthou om dit konsekwent te hou!

Sommige CSS om te weet

Dit beïnvloed die afstand tussen letters. Nuttig om hoofopskrifte te beklemtoon.

letter-spasiëring: x.xxem;

Dit beïnvloed die afstand tussen woorde:

woordspasiëring: x.xxem;

Dit bied ‘n alternatief vir alle doppe om te beklemtoon. Nuttig ook vir afkortings.

lettertjie-variant: kleinkoppies;

Dit sal AL U TEKS KAPITALISEER.

teks-transform: hoofletters;

Dit sal die eerste letterletter gebruik.

teks-transform: kapitaliseer;

Dit sal ‘n deurlopende teks plaas.

teksversiering: deurlyn;

Dit verbeter die vertoon van lettertipes in moderne blaaiers:

teksweergawe: optimaliseerbaarheid

Om lettertipes te verstaan

Dit is ‘n goeie idee om verskeie lêertipes in te sluit om te verseker dat die lettertipes korrek in ‘n wye reeks blaaiers gelaai word. Dit is die dinge waaroor u die meeste moet let:

True

TTF is die algemeenste formaat vir Mac en Windows, en dit word ondersteun in alle groot blaaiers.

OpenType

OTF word ook wyd ondersteun, en dit maak voorsiening vir byvoegings soos kleinkapiertjies en alternatiewe karakters sonder om ‘n aparte lettertipe in te lê.

Geïntegreerde oop tipe

EOT word slegs ondersteun deur Internet Explorer — en tensy u bekommerd is oor gebruikers oor ou weergawes van IE, is dit waarskynlik die beste om hierdie een uit te laat..

Web-oop letterformaat

WOFF — en sy opvolger, WOFF2 — is die nuwe konings in die stad. Hul ondersteuning in die belangrikste blaaiers en die vermoë om saamgepers te word, maak dit die moderne lêertipe van u keuse.

Moet ‘n lêertipe omskakel?

U sal waarskynlik in ‘n situasie kom waar u net een tipe lettertipe-lêer het en dit op een of ander manier na ‘n ander moet omskakel. FontSquirrel en Font2Web bied aanlynhulpmiddels aan wat presies dit sal doen.

Afsluiting

U het dit al geweet inhoud is die belangrikste aspek van u webwerf. Goed vervaardigde inhoud verdien goed vervaardigde tipografie; moenie besoekers aan die werf teleurstel met teks wat moeilik is om te lees of in die struktuur verwarrend is nie. Met ‘n noukeurig beplande visuele hiërargie wat voldoen aan tipografiese beste praktyke, kan u kreatiewe gedagtes ook kreatief aangebied word. Gelukkige tik!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me