5 enkle måder at forbedre webtypografi på
Type er et af de mest anvendte elementer på nettet. Tænk over det. Medmindre du er YouTube eller Flickr, er chancerne for, at dine besøgende besøger dit tekstindhold - ikke den fancy emballage, der omgiver den. Så hvorfor webdesignere stadig behandler tekst som et sekundært element?
God typografi bringer ordre til siden og øger læsbarheden . Det giver folk mulighed for at behandle information hurtigere.
Et mere scannbart læsbart websted betyder lykkelige besøgende. Glade besøgende vender ofte tilbage, køber produkter, giver kommentarer og deler hjemmesiden med venner. Se hvorfor det kan være værd at tænke på?
Jeg kunne for evigt blære på, hvor langt typografi er kommet på nettet, og hvor langt det skal gå. Jeg har ofte sprang mellem web og print design. Når du går fra InDesign til TextMate, er grænserne for webtype krystalklar .
Men der er blevet sagt nok om, hvilken webtype der ikke kan gøres. Dette kommer ikke til at være en anden rant. Lad os i stedet fokusere på en 5 nemme rettelser til de typografiske øjne, der findes overalt på nettet.
1. Brug et reset stylesheet
Dumt, men sandt: Ingen to browsere bruger de samme præsentationsstandarder. Forskelle i polstring, marginer, overskrifter og indrykning er uhyre store. Hvis du ønsker, at dit layout skal være mere konsistent på tværs af browsere, betaler det at starte med et CSS Reset-stilark.
To jeg anbefaler:
Yahoo's CSS Reset Stylesheet
Eric Meyers CSS Reset Stylesheet
2. Se dit mål
Foranstaltning refererer til længden af en enkelt linje af typen. En længere linje = et længere mål. Undersøgelser har vist, at for at opnå optimal læsbarhed skal løbende tekstkolonner som din hovedkroppe kopiere et sted mellem 45 og 75 tegn (30-50 ems) inklusive mellemrum . Dette er en af grundene til, at væskedesigner (de, hvor kolonnerne udvider og sammentrækker for at passe til browsernes bredde), er sværere på øjnene.
Derudover skal din ledelse stige med længden af dit mål . Ledende er mængden af hvidt mellemrum mellem tekstlinjer og styres via CSS linjens højdeegenskab. Hvis du har brug for en ekstra lang foranstaltning, skal du sørge for at din ledende åbner op.
Ligeledes, hvis du har en lille kolonne som et sidebjælke med et kort mål, skal din ledelse være strammere. Jeg finder standardværdien de fleste browsere tildeler er lidt for stram. En linjehøjde på omkring 1.4em virker godt for det meste kropsindhold.
3. Tend til rummet mellem
Det handler ikke kun om din tekst - det handler om det rum, der omgiver det. For lidt plads gør tekst svært at læse, men det gør også for meget. Nøglen er at finde en simpel balance, der styrer øjet fra et element til det næste.
En af de fælles fejl, som nye designere gør, er at fylde hvert tomme rum. Hvidt rum henviser til det tomme eller "negative" rum omkring dit indhold, og det er afgørende. Tag et kig på et veludformet magasin som Dwell or Good, og du vil se, at selv om det koster udgiverens penge at udskrive hver side, forlader de rigelige mængder af hvidt rum rundt om teksten. Siden er i balance, og dit øje vil flytte fra rum til rum effektivt.
Ud over at justere din liniehøjde (som nævnt i # 1), skal du prøve at øge din polstring og margener . Medmindre du forsøger at trække på et vanvittigt visuel trick, skal der altid være en god mængde hvidt rum rundt om din tekst. Lad det ikke stå i stykker mod andre elementer, især billeder. Lad dine indholdsstumper (overskrifter, afsnit, sidebars osv.) Trække vejret.
Mark Boulton skrev en meget informativ artikel om Hvidt rum for en liste fra hinanden, tjek det ud.
4. Gå ikke Font Crazy
En god tommelfingerregel for enhver designer er: Brug ikke mere end to skrifttyper ansigter i dit design. To skrifttypeflader kan se meget stilfuldt ud. En liste fra hinanden bruger variationer af georgien og verdana til at skabe et elegant og poleret look. Men fortsætter med at tilføje skrifttyper til din grænseflade skaber unødvendig forvirring. På samme måde skal du undgå at bruge for mange skrifttypestørrelser, farver eller behandlinger på en side eller i et afsnit, eller de vil konkurrere med hinanden i stedet for at tilføje vægt som beregnet.
Selvom skrifttype stakke og teknologier som sIFR og Typeface.js giver dig mulighed for at angive næsten enhver skrifttype, du vil have som standard, modstå fristelsen til at gå vild med kroppens kopi. Dekorative skrifttyper holdes bedst til overskrifter, fordi de påvirker læsbarheden. Tænk over det - hvornår er sidste gang du hentede en paperback-roman helt ind i Comic Sans?
Når du laver skrifttypestabler, skal du være opmærksom på størrelsen af dine parringer. Nogle skrifttyper, der ligner hinanden, gengiver i meget forskellige størrelser. Verdana og Arial er et godt eksempel på dette. Typetester er et godt værktøj til at sammenligne kerneweb skrifttyper og skabe en succesfuld stak. Et andet nyttigt værktøj kaldes Font Stack Builder viser dig, hvilken procentdel af brugere der vil se hver variation.
Uanset hvilke skrifttyper du beslutter dig for at bruge, skal du sørge for, at de ikke er teeny små. Jeg ved det hårdt ... lille tekst ser cool ud. Men tænk på de fattige, skræmmende brugere! Hold kropstekst over 10 eller 12 pixels. Hvis du insisterer på teeny lille, skal du i det mindste bruge relative størrelser for alle de IE 6.0 brugere, som ellers ikke kunne gøre det større. Læs Wilson Miner's artikel på skrifttypestørrelser for en god tag på debatten.
5) Forsig ikke detaljerne
Klienten leverede indholdet. Tilføjelse til webstedet er bare et spørgsmål om at kopiere og indsætte, ikke? Forkert, forkert, forkert. Dette er en fælde webdesignere falder ind i alt for ofte.
Selv de af os, der flittigt tilføjer overskriftskoder, formaterer hvert afsnit og organiserer punktlister med forsigtighed glem nogle vigtige typografiske detaljer. Mange (inklusive mig) gik glip af formel uddannelse, så du kan ikke bebrejde os helt. Men djævelen er i detaljerne. Dens tid vi omfavner disse grundlæggende ting:
Brug smarte citater
Hvad er forskellen mellem smarte citater og dumme citater? Smarte citater (også kendt som bog eller krøllet ) er buede og har både en åbnings- og lukkestil. Dumme ( lige ) citater er normalt lige op og ned. En apostrof er typografisk blot et enkelt citat, så det samme problem gælder. Et dumt citat (også kaldet prime ) bør kun bruges mellem målinger. For eksempel bruger 6'4 "double og single prime citater.
Desværre er vores tastaturer standard til prime citater. Microsoft Word og andre tekstredaktører retter sig lige til dem, når vi skriver. Tilføjelse af smarte citater til HTML-sider kræver mere arbejde fra webudvikleren, fordi du skal bruge markup til at producere åbnings- og lukkekitatsymboler. Jeg ser det samme problem med em og en-streger, ellipser, varemærker og ophavsretlige symboler. Coders tager den nemme vej ud ved at erstatte dem med bindestreger, flere perioder, en stor TM og den berygtede (C). Brug af de rigtige symboler gør en forskel visuelt. Gør det rigtigt og få redaktører overalt smil.
Sådan laver du smarte citater:
#8216; = Åbning af enkelt citat
’ = lukning af enkelt citat
“ = åbning af dobbelt tilbud
” = lukker dobbelt citat
Jeg ved - ingen ønsker at bruge hele dagen på at jage citater. Heldigvis, værktøjer som SmartyPants og Textism kan gøre meget af legwork for dig ved automatisk at formatere tekst, der indeholder smarte citater og lignende.
Læs "Problemet med EM og EN" fra en liste fra hinanden for mere detaljer om emnet og UTF-8 tegnkodning for de fleste almindelige specialtegn.
En advarsel - mange CMS-tekstredaktører (som det, dette websted bruger) vil ikke lade dig gennemføre smarte citater uden ekstra plugins. Trist men sandt.
Stop med at sætte to mellemrum efter en periode. Vær venlig! Det er ikke nødvendigt, og det er faktisk ret irriterende.
På dine links skal du bruge border-bottom: 1px solid i stedet for tekst-dekoration: understrege . Understreger kan løbe gennem descender-tegnene (g, j, p, q, y), hvilket gør dem vanskelige at læse, især når der bruges mindre skriftstørrelser.
Og selvom det ikke har noget at gøre med typografi, dræbte man aldrig en hurtig stavekontrol . Selvom alt, hvad du gjorde, var kopi og indsæt, afspejler en stavefejl, der glider igennem til et livewebsted, dårligt på alle involverede.
Vær opmærksom på de 5 rettelser, og dit websted design er sikker på at forbedre. Husk at disse kun er et udgangspunkt. God typografi er en lært færdighed ligesom alt andet, og det kræver studier og praksis . Hold altid øje med websteder, der får det rigtigt og noter hvad de gør. Har du brug for inspiration? Tjek webstederne nedenfor for eksempler på stor webtypografi og posteksempler, du synes at være inspirerende.
Inspirerende type:
Skrevet udelukkende til WDD af Mindy Wagner.
Hvad synes du om disse enkle måder at forbedre din typografi på? Implementerer du dem på dine hjemmesider? Vi vil gerne høre fra dig!