Web-typografi bedste praksis for et moderne websted

En guide til responsiv webtypografi, der dækker alle bedste praksis & regler for fontstylingstørrelse for at sikre, at dit websteds indhold er læsbart & en glæde at se.


Typografi bedste praksis

Malere har deres børster. Billedhuggere har deres ler. Webdesignere har deres … skrifttyper? Som Oliver Richenstein har nu berømt skrevet: “95% af informationen på nettet er skriftsprog.” Efter al den omhyggelige overvejelse, du har taget hensyn til dit websteds tilpassede grafik, ikoner, smukke menuer og rene grænseflader – ville det være synd at derefter glans over den vitale komponent i webtypografi.

Bare rolig – du behøver ikke at være en mesterdesigner for at skabe slank og effektiv tekst. Ved at overholde nogle pålidelige retningslinjer og principper vil din webtypografi formidle de oplysninger, brugere beder om på en måde, der er let læselig og gennemtænkt designet.

Oprettelse af et visuelt hierarki

Det vigtigste mål med god webtypografi er at skabe en hierarki af indhold, der visuelt flyder fra det ene element til det næste. Korrekt skelnen mellem dine overskrifter, underoverskrifter og kropstekst, en række fontvægte og stilarter og det at have nok hvidt mellemrum mellem tekstblokke er alle faktorer, der fremmer en ubesværet læseoplevelse.

Typografisk visuelt hierarkieksempel

Opbygning af en stærk krop

Din første forretningsorden er at negle dit websteds vigtigste Legeme tekst, da det er det, dine besøgende vil bruge det meste af deres tid på at læse. Dit mål er at skabe tekst, der flyder naturligt over store afsnit, der inspirerer til en sund rytme til lange strækninger af læsning.

  • Den mest almindelige skriftstørrelse for brødtekst er 16px—Eller bedre endnu, 1em (mere om dette senere).
  • Undgå midtliniejustering af din tekst, da de ujævne kanter på begge sider giver et uappellerende syn. Indstil i stedet venstre og højre margen af tekstens container til auto for at opnå en mere ønskelig effekt.
  • Berettiget tekst fungerer godt til aviser, ikke websider. Arten af ​​flydende layouts kan skabe uforudsigelige huller i afstand mellem ord.
  • Vælge lav kontrast skrifttyper over høje skrifttyper. Skrifttyper som Didot fungerer pænt til jumbooverskrifter eller til storformatudskrivning, men dets høje kontrast mellem tykke og tynde stregelinjer gør det vanskeligt at læse i små størrelser på websteder.
  • Vær opmærksom på læsbarhed. I mange sans-serif-skrifttyper ser bogstaverne “jeg” og små bogstaver “l” nøjagtigt de samme, hvilket kan skabe unødvendig forvirring.
  • Den optimale linjehøjde af afsnitstekst er mellem 1,25–1,5 × skrifttype-størrelse. Juster derefter baseret på dit valgte skrifttype.

Overskrifter til succes

For bedre eller værre vil de fleste læsere sandsynligvis bladre gennem din sides Overskrifter uden selv at bryde med hovedteksten. Derfor er det vigtigt at fange deres opmærksomhed og opfordre til yderligere læsning ved at sikre, at typografien på dine overskrifter er bemærkelsesværdig.

  • Den gennemsnitlige skriftstørrelse for overskriftstekst er et sted rundt 36px—Eller bedre endnu, omkring 2.25em (vi kommer til dette).
  • Opmærksomheden skal altid gå til overskriften før kroppen. Sørg for, at din overskriftstekst ikke bliver overmandet af en for tyk fontvægt i kroppen.
  • Sørg for, at dine overskrifter lever op til læsernes forventninger. Betydeligt større tekst med rigelig afstand mellem dets underordnede afsnit betyder en ændring i emnet, mens mindre overskrifter langt tættere på afsnit indebærer, at indholdet er relateret.
  • I tilfælde af at din overskrift skal vikle til den næste linje, skal du være opmærksom på, at det optimale linjehøjde for overskrifter er mindre end hvad det er for kropstekst.

Mellemrummet

Mængden af ​​plads, der adskiller din sides elementer, siger meget om deres forhold til hinanden, og det er et designprincip, som ikke kan overses. Dominante overskrifter omgivet af et hvidt hav giver en meget anden kontekst end mindre overskrifter, der er tæt knyttet til afsnit (husk, at vi bygger en visuelt hierarki).

Generelt er det bedre at fejle ved siden af ​​at have for meget hvid plads end ikke nok. Rene layouts med generøs hvid plads er det, der foretrækkes på det moderne web.

Fald i linje

Forestil dig at læse tekst på din 27-tommer skærm med høj opløsning, der strækker sig hele vejen over begge kanter på skærmen. Dine øjne ville blive trætte efter blot et afsnit!

Det er vigtigt at holde hver linje i din hovedtekst begrænset til et vist antal tegn, så øjnene forbliver fokuseret på et centralt punkt. Den populære konsensus er, at denne magiske mål for desktops er 60–75 tegn lange. Til mobile skærme, hvor vi ønsker at undgå skvisende øjne og overdrevent kondenseret tekst, sidder dette nummer rundt 35–40 tegn pr. Linje.

Tipper skalaen

Meget er skrevet om emnet skalering mellem skriftstørrelse på krop og overskrift. Hvad er den perfekte H2-størrelse, hvis din kropstekst er, siger du, 1em? At bestemme de mest æstetiske behagelige forhold mellem kropstekst og H1 – H6-overskrifter er heldigvis noget, som mange typografer allerede har afkodet. Derudover skal disse matematiske proportioner også tilpasse sig baseret på brugerens skærmstørrelse.

Designer Jason Pamental leverer et nyttigt diagram for hvad han mener er de mest optimale skriftstørrelser på tværs af forskellige medieenheder – og jeg er tilbøjelig til at være enig med ham. Grundlæggende, selvom den ideelle H1-størrelse på et skrivebord kan være 3 × kropsstørrelsen, vil en mobilskærm på en mobilskærm være for overdrevet – så den skal skaleres ned for at imødekomme det mindre visningsområde.

Kort over optimale skrifttypestørrelser på tværs af forskellige medieenheder

Hurtig note: Hvordan kan du se, om du har et godt visuelt hierarki? Skub på din skærm indtil al teksten bliver sløret. Hvis layoutet vises som en amorf klatring uden nogen sondring mellem sektioner, kan dit hierarki muligvis mislykkes. Hvis du dog let kan skelne adskillelser mellem tekstblokke, overskrifter og klart vide, hvor øjnene skal rejse, er du i god form!

At holde teksten lydhør

Responsiv webdesign er en vigtig praksis i disse dage – især da flere og flere mennesker bruger mobile enheder som deres primære middel til at surfe på Internettet. Mens design med procenter i stedet for pixels har revolutioneret den måde, billeder og margener tilpasser sig væskebredder, har responsiv webtypografi desværre forblevet et hårdere æg at knække.

Optimering af fontstørrelser på tværs af flere enheder kan blive overvældende, da du skal navigere gennem flere medieforespørgsler for at målrette mod al teksten på dit websted. Men med en hurtig justering af din valgte enhed, vil du lettere finde de rigtige skrifttypestørrelser, du kan bruge til enhver type skærm.

Ems Over Pixels

For at forenkle dit websteds typografi skal du skubbe pixlen og begynde at bruge ems. Ems muliggør en lettere forståelse af skalering mellem dit websteds skrifttypestørrelser, og deres mindre enheder er mere håndterbare end det dobbeltcifrede antal pixels.

Vigtigere er det, at ems alt er i forhold til den overordnede beholder. Hvis du indstiller linjehøjde af en container til 1,5 em, så selv hvis du skulle ændre den containers skrifttype, forbliver liniehøjden i den rigtige andel. Med pixels skal du konstant justere beholderens liniehøjdeegenskab for hver enkelt ændring i dens fontstørrelse for at opretholde visuel konsistens.

Dette princip gælder for margen, polstring, Spatiering, og mest enhver anden stil, du anvender på dit websteds tekst. Du behøver ikke flere ting at piksle med pixels på dit indholds polstring for hver medieforespørgsel – bare indstil dens oprindelige tilstand i ems, og den justeres automatisk med de originale proportioner!

Brug af Ems

Den første ting, du skal gøre, er at indstille basisreferencen til dit websteds skriftstørrelse. I din stilark, indtast dette:

krop {
skriftstørrelse: 100%;
}

Dette fastlægger en relativ skriftstørrelse på dit websteds indhold til 1em, som de fleste browsere fortolker som 16px. Nu er alle dine overskriftsstørrelser – 2,25 em, 1,5 em osv. Direkte multipler af basislinjen 1em.

VIGTIG NOTE: Ems er cascading—Betydning af deres størrelse er i forhold til den forældre, der er fastlagt. For eksempel: Hvis du indstiller din krops skrifttypestørrelse til 1,25 em og derefter en underbeholders fontstørrelse til 1,25 em, vil de to skrifttyper ikke have samme størrelse! Snarere vil teksten til børnebeholderen være 1,25 × den oprindelige størrelse på 1,25 em.

Flere tip til god webtypografi

Her er et par flere tip til god webtypografi:

Overdriv det ikke

Du skal begrænse dit websteds typografi til 2–3 skrifttyper højst. Dette ville typisk være en skrifttype til dine overskrifter, en skrifttype til din hovedtekst og måske en underoverskriftstype om nødvendigt. Brug af for mange skrifttyper kan skabe et rodet og ikke-fokuseret layout. Dit websteds indlæsningstid kan også påvirkes, som forklaret af det næste punkt.

Integrer kun det, du har brug for

Overvej kun det, der er mest nødvendigt for dit websted, og lad resten være ude. Hvis du ved, du har brug for det fast, fremhævet og kursiv styling for en given skrifttype, integreres derefter kun disse valg og udelukker tynd, lys og sort stilarter. Indlæsning af flere stilarter end nødvendigt kan få et stort hit på dit websteds ressourcer, da hver enkelt stil er en separat serveranmodning.

Hvis du ikke ønsker at begrænse din kreativitet i designfasen, skal du gå videre og integrere alt; bare husk at fjerne de overskydende stilarter, før dit websted bliver live.

Hvis du ikke kan læse det, skal du ikke bruge det

Denne er en biggie. Mens den blomstrende håndskrevet font kan være fristende at bruge, hvis der endda er den mindste forvirring, om det er et “g” eller et “y”, så brug det ikke! Intet er mere frustrerende for en læser end at kæmpe for at dechiffrere en ulæselig skrifttype.

Foretrækker ægte tekst frem for ‘Lorem Ipsum’

Hver designer stoler på Lorem ipsum dummy-tekst for at udfylde tomme indholdsområder, når du planlægger et projekt. Du kan dog blive overrasket over, hvor meget en indflydelse det faktiske indhold kan bruge på udseendet og følelsen af ​​din typografi. ‘Lorem ipsum’ er fuldstændig følelsesløs og intellektuelt hul; det giver ingen reel anelse om, hvordan dine ord og din personlighed vil blive udtrykt gennem skrifttype. Tilslut derfor det faktiske indhold til dit websted så hurtigt som muligt, før du afslutter dit websteds design.

Kontrast med baggrunde

En mørk skrifttype på en almindelig hvid baggrund giver altid den bedste læsbarhed. Hvid tekst mod et mørkt eller sløret billede bliver også populært i disse dage. Vær bare opmærksom på, at din baggrund ikke er for indviklet eller detaljeret, hvilket vil overmanne forgrundsteksten.

Eksempel på dårlig typografi af tekst over tekstbaggrundEt eksempel på en dårlig typografipraksis ved brug af en “tekst over tekst” baggrund.

Parring af skrifttyper – som tiltrækker som

Parring af skrifttyper med helt forskellige personligheder fremkalder forvirrede signaler. De to kan være stilistisk kontrasterende, men følelsesmæssigt skal de tjene den samme besked.

Parring af skrifttyper – Opbevar det i familien

Den enkleste løsning er ofte den bedste. Undertiden kommer de bedste sammenkoblinger fra at bruge variationer (serif, alternativ vægt, plade) inden for den samme Font-Family.

Hyperlinks

Almindelig og forventet praksis er at understrege forbinder og fjern understregningen på svævhændelser. Når du går denne rute, skal du sørge for, at din fremhævede tekst er kursiveret eller fed skrift snarere end understreget for at undgå forvirring.

I disse dage er imidlertid forankret tekst generelt farvet i stedet for med en overgangseffekt, der anvendes, når den er svævet. Fra et designperspektiv er dette unægteligt den bedre mulighed – men husk at holde det konsistent!

Nogle CSS at vide

Dette påvirker afstanden mellem bogstaver. Nyttig til at understrege overskrifter.

brevafstand: x.xxem;

Dette påvirker afstanden mellem ord:

word-afstand: x.xxem;

Dette giver et alternativ til all-caps til vægt. Nyttigt også til forkortelser.

font-variant: small-caps;

Dette vil kapitalisere al din tekst.

tekst-transformation: store bogstaver;

Dette aktiverer det første tekstbrev.

tekst-transformation: aktivere;

Dette lægger en gennemskåret tekst.

tekstdekoration: line-through;

Dette forbedrer visningen af ​​skrifttyper i moderne browsere:

tekst gengivelse: optimer Legibility

Forstå skrifttyper

Det er en god ide at integrere flere filtyper for at sikre, at skrifttyperne indlæses korrekt i en lang række browsere. Dette er dem, du skal være mest optaget af:

TrueType

TTF er det mest almindelige format til Mac og Windows, og det understøttes i alle større browsere.

OpenType

OTF understøttes også bredt, og det giver mulighed for tilføjelser som small caps og alternative tegn uden behov for at indlejre en separat skrifttype.

Indbygget åben type

EOT understøttes kun af Internet Explorer – og medmindre du er bekymret for brugere på gamle versioner af IE, er det sandsynligvis bedst bare at lade denne være ude.

Web Open Font Format

WOFF – og dens efterfølger, WOFF2 – er de nye konger i byen. Deres support i store browsere og evnen til at blive komprimeret gør dem til den moderne filtype, du vælger.

Brug for at konvertere en filtype?

Du løber sandsynligvis i en situation, hvor du kun har en type fontfil og på en eller anden måde skal konvertere den til en anden. FontSquirrel og Font2Web tilbyde online-værktøjer, der vil gøre netop det.

Konklusion

Det vidste du allerede indhold er det vigtigste aspekt af dit websted. Veludviklet indhold fortjener veludformet typografi; skuffe ikke besøgende på webstedet med tekst, der er vanskelig at læse eller forvirrende i strukturen. Med et omhyggeligt planlagt visuelt hierarki, der overholder typografiske bedste praksis, kan dine kreative tanker også præsenteres kreativt. Glad skrivning!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map