5 enkle måter å forbedre webtypografi

Type er en av de mest brukte elementene på nettet. Tenk på det. Med mindre du er YouTube eller Flickr, er sjansene dine besøkende på besøk for ditt tekstinnhold - ikke den fancy emballasjen som omgir den. Så hvorfor er webdesignere fortsatt å behandle tekst som et sekundært element?

God typografi bringer orden til siden og øker lesbarheten . Det gjør at folk kan behandle informasjon raskere.

Et mer skannbart, lesbart nettsted betyr lykkelige besøkende. Glade besøkende returnerer ofte, kjøper produkter, gir kommentarer og deler nettstedet med venner. Se hvorfor det kan være verdt å tenke på?

Jeg kan blather for alltid om hvor langt typografi har kommet på nettet, og hvor langt det må gå. Jeg har ofte hoppet mellom web- og utskriftsdesign. Når du går fra InDesign til TextMate, er begrensningene for webtypen krystallklar .

Men det har blitt sagt mye om hva netttypen ikke kan gjøre. Dette kommer ikke til å være en annen rant. I stedet la oss fokusere på en 5 enkle reparasjoner for de typografiske eyesores som florerer over nettet.

1. Bruk et Tilbakestill stilark

Dumt, men sant: Ingen to nettlesere bruker de samme presentasjonsstandardene. Forskjeller i polstring, marginer, overskrifter og innrykk er uheldig. Hvis du vil at sidelayoutene skal være mer konsistente over nettlesere, betaler det seg å starte med et CSS Reset-stilark.

Bruk et tilbakestilt stilark for bedre webtype.

To jeg anbefaler:

Yahoo's CSS Reset Stylesheet
Eric Meyers CSS Reset Stylesheet

2. Se på ditt mål

Mål refererer til lengden på en enkelt linje av typen. En lengre linje = et lengre mål. Studier har vist at for å få optimal lesbarhet, bør du kjøre tekstkolonner som hovedkroppen din være mellom 45 og 75 tegn (30-50 ems), inkludert mellomrom . Dette er en av grunnene til at væskedesignene (de som kolonnene ekspanderer og kontrakt for å passe til nettleserbredden) er vanskeligere på øynene.

I tillegg bør din ledende øke med lengden på målet ditt . Ledende er mengden av hvitt mellomrom mellom tekstlinjer, og styres via CSS linjehøydeegenskapen. Hvis du trenger å bruke en ekstra lang måling, må du sørge for at ledelsen åpnes.

På samme måte, hvis du har en liten kolonne som et sidebar med et kort mål, bør din ledelse være strammere. Jeg finner standardverdien de fleste nettlesere tilordner, er litt for stram. En linjehøyde på rundt 1.4em fungerer bra for det meste kroppsinnhold.

3. Tend til mellomrommet mellom

Det handler ikke bare om teksten din - det handler om plassen som omgir den. For lite plass gjør tekst vanskelig å lese, men det gjør for mye. Nøkkelen er å finne en enkel balanse som styrer øyet fra ett element til det neste.

En av de vanlige feilene nye designere gjør er å fylle hver tomme av plass. Hvit plass refererer til det tomme eller "negative" rommet rundt innholdet ditt, og det er avgjørende. Ta en titt på et godt utformet magasin som Dwell eller Good, og du vil se at selv om det koster utgiverens penger å skrive ut hver side, forlater de rikelig med hvitt mellomrom rundt teksten. Siden vil være i balanse og øyet ditt vil flytte fra rom til rom effektivt.

I tillegg til å justere linjehøyden din (som nevnt i # 1), kan du prøve å øke polstring og marginer . Med mindre du prøver å trekke av et gal visuelt trick, bør det alltid være en god mengde hvit plass rundt teksten. Ikke la den støte opp mot andre elementer, spesielt bilder. La innholdet biter (overskrifter, avsnitt, sidebars, etc.) puste.

Mark Boulton skrev en veldig informativ artikkel om White Space for en liste fra hverandre, sjekk den ut.

4. Ikke gå Font Crazy

En god tommelfingerregel for enhver designer er: bruk ikke mer enn to skrifttyper ansikter i ditt design. To font ansikter kan se veldig stilig ut. En liste fra hverandre bruker variasjoner av Georgia og Verdana for å skape et elegant og polert utseende. Men å fortsette å legge til skriftsider i grensesnittet ditt, skaper unødvendig forvirring. På samme måte unngår du å bruke for mange skriftstørrelser, farger eller behandlinger på en side eller i et avsnitt, eller de vil konkurrere med hverandre i stedet for å legge vekt på som ønsket.

Selv om font stabler og teknologier som sIFR og Typeface.js lar deg angi omtrent hvilken som helst skrift du vil ha som standard, motstå fristelsen til å gå vill med kroppskopien. Dekorative skrifttyper er best bevart til overskrifter fordi de påvirker lesbarheten. Tenk på det - når er den siste gangen du plukket opp en paperback-roman helt oppført i Comic Sans?

Når du lager fontstabler, må du være oppmerksom på størrelsen på parrene dine. Noen fonter som ser like ut, gjengir seg i svært forskjellige størrelser. Verdana og Arial er et godt eksempel på dette. Typetester er et flott verktøy for å sammenligne kjernefonter og skape en vellykket stabel. Et annet nyttig verktøy kalt Font Stack Builder viser deg hvilken prosentandel av brukere som vil se hver variant.

Uansett hvilke fonter du bestemmer deg for å bruke, må du sørge for at de ikke er teeny små. Jeg vet det er hardt ... liten tekst ser kult ut. Men tenk på de fattige, knepende brukerne! Hold kroppstekst over 10 eller 12 piksler. Hvis du insisterer på teeny lille, bruk i det minste relative størrelse for alle de IE 6.0-brukere som ellers ikke kunne gjøre det større. Lese Wilson Miner sin artikkel på skriftstørrelser for en flott ta debatten.

5) Ikke forsøm detaljene

Klienten ga innholdet. Legge til nettstedet på nettstedet handler bare om å kopiere og lime inn, ikke sant? Feil, feil, feil. Dette er en felle webdesignere faller inn altfor ofte.

Selv de av oss som flittig legger til overskrifter, formaterer hvert avsnitt og organiserer punktlister med forsiktighet, glem noen viktige typografiske detaljer. Mange (inkludert meg) savnet på formell opplæring, så du kan ikke klandre oss helt. Men djevelen er i detaljene. Dens tid vi omfavner disse grunnleggende:

Bruk smarte sitater

Hva er forskjellen mellom smarte sitater og dumme sitater? Smarte sitater (også kjent som bok eller krøllete ) er buede og har både en åpnings- og lukkestil. Dumme ( raske ) sitater er vanligvis rett opp og ned. En apostrof er typografisk bare et enkelt sitat, så det samme problemet gjelder. Et dumt sitat (også kalt prime ) bør kun brukes mellom målinger. For eksempel bruker 6'4 "dobbelt- og enkeltpremier.

Dessverre er våre tastaturer standard til prime sitater. Microsoft Word og andre tekstredigerere korrigerer dem bare for oss mens vi skriver. Å legge til smarte sitater på HTML-sider krever mer arbeid fra webutvikleren fordi du må bruke markup for å produsere åpnings- og avsluttende sitatsymboler. Jeg ser det samme problemet med em og en-strekk, ellipsis, varemerke og opphavsrettssymboler. Coders tar den enkle veien ut ved å erstatte dem med bindestreker, flere perioder, en stor TM og den beryktede (C). Bruk av de riktige symbolene gjør en forskjell visuelt. Gjør det riktig og gjør redaktører overalt smil.

Hvordan lage smarte sitater:

#8216; = Å åpne enkelt sitat
’ = lukking av enkelt sitat
“ = Åpning av dobbelt tilbud
” = lukking av dobbelt tilbud

Jeg vet - ingen ønsker å tilbringe hele dagen på jakt ned sitater. Heldigvis, verktøy som Luring og Textism kan gjøre mye av legwork for deg ved automatisk å formatere tekst som inneholder smarte anførselstegn og lignende.

Lese "Problemene med EM og EN" fra en liste fra hverandre for mer detaljer om emnet og UTF-8 tegnkoding for de fleste vanlige spesialtegn.

En advarsel - mange CMS-tekstredigerere (som det dette nettstedet bruker) vil ikke la deg implementere smarte sitater uten ekstra plugins. Trist men sant.

Slutt å sette to mellomrom etter en periode. Vær så snill! Det er ikke nødvendig og det er faktisk ganske irriterende.

På sidene dine, bruk grensebunn: 1px solid i stedet for tekstdekorasjon: understreke . Understreker kan løpe gjennom nedstignings tegnene (g, j, p, q, y) gjør dem vanskelige å lese, spesielt når de bruker mindre skriftstørrelser.

Og mens det ikke har noe å gjøre med typografi, kjører en rask stavekontroll aldri noen . Selv om alt du gjorde var å kopiere og lime inn, gjenspeiler en stavefeil som går gjennom til et nettsted, dårlig på alle involverte.

Vær oppmerksom på de 5 rettene, og designene på nettstedet ditt er sikkert å forbedre. Husk at disse bare er et utgangspunkt. God typografi er en lært ferdighet akkurat som noe annet, og det krever studier og praksis . Hold alltid øye med nettsteder som får det riktig og noter hva de gjør. Trenger du inspirasjon? Ta en titt på nettstedene nedenfor for eksempler på god webtypografi og posteksempler du synes å være inspirerende.

Inspirasjonstype:

Skrevet utelukkende for WDD av Mindy Wagner.

Hva synes du om disse enkle måtene å forbedre typografien din? Implementerer du dem på nettstedene dine? Vi vil gjerne høre fra deg!

typografi brukervennlighet webdesign font skriving