Forståelse Typografi Skrive For Web
I webdesign er temaet typografi viktig når man vurderer alle områder av brukeropplevelsen. Hvert nettsted har et behov for tekst, og det er retningslinjer du kan følge for å lage eksepsjonelt flotte oppsett. Gridlines, lettering, fonthøyde, tekstavstand, fargeskjemaer og andre lignende egenskaper bør alle tas i betraktning.
I denne artikkelen vil jeg gjerne dykke inn i rike av webtypografi. Vi ser på populære ideer bak utformingen av troverdige nettside tekster. Underveis vil jeg introdusere noen få nyttige CSS3 egenskaper hvilke designere glemmer ofte.
Jeg har forsøkt å legge mer fokus på teori og ideologier på nettet. Dette gir et bredere fokus på digital tekst generelt, og du kan webdesigneren velge hvilke stiler du skal søke om for hvilket formål. Kontekst er alltid viktig, og du må bestemme dette riktig for hvert prosjekt du arbeider med. Vurder denne veiledningen en referansepakke som er full av moderne webtrender fra typografiske innovatører over hele verden.
Mål dine avsnitt
Du trenger ikke å bytte ut gårdsplassen for denne typen måling. Faktisk refererer tiltaket i forhold til typografi til bredden (horisontalt) av et gitt avsnitt på siden din. Det er ikke et emne som alltid diskuteres, men det påvirker lesbarheten av innholdet ditt. Som en generell tommelfingerregel vil du begrense en enkelt linje rundt 75-85 tegn i lengden (ikke nødvendigvis inkludert mellomrom).
Nå kan dette virke som litt av en strekning for noen bredere oppsett. Spesielt hvis designet er flytende og ment å tilpasse seg ettersom brukeren omformaterer nettleservinduet. Du kan alltid sette en CSS max bredde eiendom på hovedinnholdet div. Kodemarginer og skriftstørrelser i skalerbare enheter (prosenter, ems) i stedet for piksler vil tillate slik fleksibilitet innen hvilken som helst layout.
Det er ingen maksimal måleenhet å være forsiktig med. Hvordan du skriver innhold og danner ord i setninger er mye viktigere enn bredden på hver linje. Men husk at lengre setninger er mye vanskeligere å lese sammenlignet med kortere, kortfattede uttalelser.
Ledende forklart
I utformingen, sammen med avsnittet ditt må du også vurdere ideen om ledende. Ordet er uttalt “ledd-ing”, slik som bly som brukes i blyanter. Dette navnet stammer fra de eldre dagene av mekanisk formatering hvor strimler av bly ble plassert mellom tekstlinjer.
Ledende er fortsatt et svært viktig konsept i webdesign og går hånd i hånd med avsnittstiltak. Når avsnittbredden øker, bør du bruke en lik økning til mengden ledende, eller mellomrom mellom tekstlinjer. Denne ekstra plass gjør lesingen mye lettere på dine øyne.
Hvis du skulle skumme gjennom veldig tett såret tekst, kan det hende du finner det vanskelig å fokusere på en enkelt linje. Hvis dette er tilfelle, prøv å øke mengden ledende med CSS linjehøyde eiendom. Du vil alltid ha mer plass mellom tekstlinjer enn mellom ord. Ellers kan tekstblokkene vises som avisutskrift, og det vil ikke være veldig brukervennlig å skumme gjennom.
En solid teknikk er å bruke mer plass enn det som opprinnelig var nødvendig, og å redusere det om nødvendig. Ikke all tekst er opprettet like, og du vil sikkert ha avsnitt med forskjellig intern formatering, for eksempel dristige ord, ankerskoblinger, understreker osv. Med litt ekstra ledelse vil disse endringene ikke føles så ubalanse i forhold til den andre teksten.
Bruk naturlige skriftstørrelser
Det er fortsatt en håndfull nettsteder som velger å holde fast med mindre enn gjennomsnittlige skriftstørrelser. 11px-12px kan synes å være mye mer av “standard profesjonell” for virksomhetsoppsett. Men disse størrelsene hjelper ikke de fleste besøkende som ser etter spesifikk informasjon.
Vanligvis nettlesere standard til 16px hvis du ikke bruker noen CSS regler. Selv dette kan betraktes som litt lite hvis du har ekstra rom i oppsettet ditt for å imøtekomme for større tekst. Større skriftstørrelser ser bare bedre ut, og er mye lettere å skumme for relative søkeord. Seriffonter er ikke ofte valgt som avsnitt, men du kan fortsatt komme unna med dem. Jeg foreslår at du bruker mye større tekststørrelser for serifbaserte fonter for å forbedre lesbarheten og trekke oppmerksomheten.
Svar på brukerens miljø
Når du prøver forskjellige skriftfamilier og -størrelser, må innholdsområdet tilpasses tilsvarende. Standardenheten jeg holder fast med er eMS som de lett kan omformes basert på ledig plass og skjermoppløsning. Dette optimaliserer ytelsen på brukerens slutt som er viktigst.
Men når du har innhold så fleksibelt gjør det ditt layout utsatt for et buggyutfall. Innhold i din sidefelt eller sidefeltområde kan ende opp med skjev eller ubalanse i noen nettlesere. Eller det kan hende du har problemer med å lagre bilder eller andre former for medier i hovedteksten. Det finnes noen andre alternativer til bruk av ems hvis du trenger en fast stiloppsett - men prøv begge løsningene for å se hvilken du liker best.
Husk at faste bredder og stykkstørrelser vil låse inn mange innstillinger i designet. Det er flott for innhold som inneholder mange stasjonære estetiske effekter - tenk bakgrunnsbilder eller mange utstyrt sidebar widgets. Det er også en enkel prosess å bygge et væskeinnholdsområde i den venstre kolonnen med faste sidebjelker til høyre.
Stil basert på kontekst
Noen andre veldig fine CSS-triks har blitt skjult for vanlig design. Spesielt er det trender kopiert fra utskriftsarbeid som kan brukes i riktig sammenheng.
Mange webdesignere har aldri brukt CSS-egenskapen for tekstinnholdet. Du oppgir en verdi for å sette inn den første linjen i et avsnitt som er målrettet mot denne regelen. Enheter følger standard tekstalternativer som piksler, poeng, ems, prosenter ... Det er absolutt ikke en trend du finner i de fleste blogger. Men det gir en fin siderytme mens du leser gjennom store tekstblokker.
Det er en annen type CSS-velger kjent som en pseudo-element. Dette kan målrette mot en bestemt del av innholdsvelgeren. CSS3: første bokstaver pseudovelger er perfekt for å skape fancy stiler på viktige avsnitt. Du kan jazz opp hvert avsnitts åpningsbrev - ligner på en ganske historiehistoriebok - ved å bruke fet, kursiv eller endret skriften. Sjekk ut dette flotte eksempelet på drop caps som inneholder noen ekstra CSS-koden du kan bruke.
Spiller med Letter Spacing
Jeg er sikker på at mange av oss har hørt termen sporing før ennå ikke skjønte det er den samme ideen som CSS letter-spacing egenskapen. Disse to konseptene er en i det samme, relatert mellom utskrift og digital typografi. Enheten gjelder mellomrom mellom bokstaver innenfor en enkelt tekstlinje. Dette er en veldig fin effekt å søke på overskrifter og til og med noen mindre innholdsblokker på nettstedet ditt.
Det er viktig å ikke forveksle betingelsene letteravstand med kerning. Begge er relatert til typografi og avstanden mellom bokstaver. Men kerning refererer spesielt til avstanden mellom 2 individuelle bokstaver i et ord. Brevavstandsegenskapen gjelder for et helt element av tekst, det være seg et ord eller et avsnitt eller en header eller ankerlink. Vær oppmerksom på dette når du spiller rundt med nye ideer til stiler.
Jeg bruker ofte noen få piksler / poeng av brevavstand i overskrifter med alle hovedstader. Dette bryter opp de enkelte tegnene med litt ekstra plass og vises også som en veldig definert “overskrift” se. Negativ brevavstand fungerer også bra i riktig sammenheng. Jeg holder vanligvis til mindre enheter, kanskje -0.03em eller -0.1em i det meste.
Kombinere og matchende skrifttyper
Designkonseptene bak webtypografi er absolutt en form for kunst, ikke så mye av vitenskapen. Det er retningslinjer du kan følge, men det er ingen faste regler som du er begrenset til. Dette betyr at du har en enorm mengde frihet til å eksperimentere med blanding og samsvarer med de forskjellige skriftene du har tilgang til.
Langt den mest populære kombinasjonen av skrifttyper inkluderer en serif / sans-serif split for toppteksten og avsnittet innhold. Jeg liker å bytte opp begge, men oftere vil jeg bruke seriffonter i overskriftsseksjonene. De ekstra merkene og strekkene på hvert brev gjør dem til å virke mer smigrende som den dominerende sideteksten.
I tillegg er sans-serif skrifttyper renere og lettere å krympe sammen i setninger. Det er ikke å si seriffonter vil ikke fungere i avsnitt. Faktisk er det mange gode eksempler! Men et lite kjent konsept kalt x-høyde er avgjørende for å skille kompleksiteten til et skrifttype. Fra å se på grunnlinjen til et par ord, vil du plukke opp hvordan slike skrifttyper vil “passe inn” med hverandre.
Det er også verdt å merke seg betydningen av plass mellom disse forskjellige elementene. Du vil sannsynligvis bruke 2 eller 3 forskjellige header-stiler, slik at hver av disse vil komme ut med en forskjell. Jeg har en tendens til å holde h2 / h3-elementene litt nærmere følgende avsnittblokk, da dette innebærer at det er en sammenheng mellom innholdet.
Denne korrelasjonen er spesielt nyttig når du bruker to helt forskjellige skrifttyper ved siden av hverandre. Jeg anbefaler ikke mer enn 3 forskjellige skriftfamilier per sett med innhold. Etter for mange tilpasninger vises ordene dine sammen og hele siden kommer ut som en hodgepodge av misforståtte skrifttyper.
Konklusjon
Det er mitt håp at disse konseptene vil kaste lys over det kompliserte emnet for digital typografi. Det kan være vanskelig å komme inn i arbeidet som designer, spesielt hvis hele emnet er fremmed for deg. Men fortsett å studere og sørg for å trene en hel haug!
Neste uke: Hold deg innstilt da vi ser på noen nyttige verktøy og ressurser for bedre webtypografi.
Mer…
Her er flere typografi relaterte innlegg:
- Showcase av webdesign med vakker typografi
- Bedre typografi for moderne nettsteder
- Hurtigguide til typografi: Lær og vær inspirert
