Hvordan bruke typografi i Websites

Typografi --- eller, enkelt sagt, noe som gjør teksten ser bra --- er en av de viktigste fasetter av web design, men det er også en av de mest oversett. Å gjøre innholdet tydelige og lesbare hjelpemidler ikke bare design, det ubevisst gjør innholdet på nettstedet ditt mer fornøyelig og vil holde leserne kommer tilbake for mer. Det er ikke vanskelig, enten: Hvis du vet hvilke regler og elementer for å legge til websidene dine 'stilark, kan du langt bedre utseendet på tekst i fem minutter.

Bruksanvisning

1 Bestem hva skriftene du vil bruke før du berører ditt nettsted kode. Nettet har et begrenset antall skrift familier som alle nettlesere kan gjenkjenne; se Resources nedenfor for en liste over web-safe fonter. Det er også nyttig å forstå forskjellen mellom serif og sans-serif fonter. Serif skrifter, for eksempel Times New Roman, ser ut som tradisjonelle avis- eller magasin fonter --- bokstaver har små haler på kantene. Sans serif skrifter, for eksempel Arial, ikke gjør det, og se Blockier. Kombinere en serif og en sans serif font --- for eksempel ved hjelp av en serif font for overskriften på nettstedet og en sans serif for artikkelen organer --- vanligvis gir en estetisk tiltalende typografisk stil.

2 Legg skrift stabler til nettstedets stilark (vanligvis en CSS-fil). Skrift stabler er lister over skrifter som fungerer som instruksjoner til nettlesere. Hvis nettleseren maskinen gjenkjenner den første skrift, bruke det; Hvis den ikke gjør det, kan du bruke andre font, og så videre. Å erklære en universell sett av fonter i <body> -delen av HTML-sider, vil syntaks se slik ut:
kropp {
font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
}
Den stilarket forteller første nettleseren for å bruke Lucida Sans Unicode. Hvis den ikke er klar over at skriften --- for eksempel Mac ikke har det installert som standard --- det går videre til lignende skrift Lucida Grande (som Mac gjenkjenner). Hvis en eller annen grunn virker det ikke igjen noen av dem, som på enkelte Linux-oppsett, bruker den datamaskinens standard sans serif font.

3 Erklærer line-høyde og font-size elementer for din tekst også. På de fleste nettlesere, er standard linjehøyden for trangt. På den annen side, kan du tenke standard skriftstørrelse er for stor. Men sørg for ikke å sette den til noe mindre enn 11 piksler. Ikke alles øyne er så god som deg, og noen mennesker liker å lene seg tilbake når de leser.

4 Hvordan bruke typografi i Websites


Endre standard fargen på fontene. Hvis du bruker en mørk bakgrunn, vil du ønsker å gjøre skriften lettere, men ikke bare la skriften svart. Høy kontrast kan være en effektiv stil når det gjøres riktig, men som regel vil du finne at teksten blir lettere å lese når det er en nyanse av grått i motsetning til helt svart eller hvitt.
Det følgende er et sett med stilregler du kan plassere på din stilark som bruker alle disse elementene sammen:
kropp {
font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
font-size: 12px;
line-height: 1.8em;
color: # 555555;
}
h1 {
font-family: Georgia, serif;
}
På venstre side av bildet, kan du se hva en artikkel ville se ut uten formatering. Til høyre kan du se hvordan den samme teksten ser ut med de ovennevnte stil regler.