Innhold
Vi kan alle være enige om at innebygde nettfonter er en av de største fremskrittene for design på nettet siden oppstarten, spesielt i en tid med responsiv webdesign. Med så mange elementer som beveger seg og endres fra en skjermstørrelse til den neste, er flott typografi og forskjellige skrifttyper en av de eneste konstantene som fungerer like bra på alle enheter (unntatt enheter som bruker Mini Mini-nettleseren).
Bare å legge til webskrifter er bare en del av historien. Ord kan ha betydning, men bokstaver har følelser. OpenType (OT) er et plattformformat på tvers av plattformer utviklet av Adobe og Microsoft. Funksjonene gir større dybde og variasjon ved å utvide tegnsettene med OT-aktiverte skrifttyper til å omfatte slike typografiske gleder som ligaturer, swashes, stilistiske alternativer og til og med ekte kerning. Utvid ditt følelsesmessige ordforråd ved å utforske alle disse fantastiske funksjonene; det er ingen grunn til å stoppe med bare skrifttypen.
Se en eksklusiv filmvisning av denne opplæringen:
Akkurat hva er alle disse typografiske skjønnhetene? Vel, til å begynne med er det ligaturer (inkludert standard, skjønnsmessige og kontekstuelle varianter). Dette er kombinasjoner av tegn som historisk har en tendens til å blande seg når de tegnes eller klippes, som ff, ffl, fi eller fj. Teknisk sett er dette når 'hetten' på f kombineres med 'tittelen' i små bokstaver i eller j, men du kan se hvordan det kan bli vanskelig å holde et rett ansikt når du diskuterer emnet.
En av mine personlige favoritter er den mindre vanlige ligaturen for ct og st som blant annet Adobe Caslon Pro. Så er det swashes, som de som finnes i Fairbank (vist i bruk fra Fonts.com): nydelige swoops og utsmykninger som gir en virkelig tydelig karakter når de blir brukt godt.
Andre vanlige funksjoner inkluderer stilistiske veksler og forskjellige alternativer for tall, inkludert tabellfigurer (jevnt fordelt og perfekt for økonomiske tabeller), brøker, gamle stilfigurer (med både stigende og nedstigende for å passe godt med store og små bokstaver) og selvfølgelig kerning bord. (Det alene kan være verdt inngangsprisen, ettersom jeg alltid har følt at nettlesere har en tendens til å gjøre en ganske middels jobb med avstandstype på skjermen.)
- Last ned en eksempelside som inneholder mange tips og triks du kan prøve i dine egne prosjekter.
Litt bakhistorie
Disse karakterene og funksjonene har eksistert i århundrer, men bare nylig har de blitt brukbare på nettet. Ligaturer ble først sett i sumeriske manuskripter og mange påfølgende former for skriving og kalligrafi. Med fremveksten av bevegelig type ble ligaturer brukt for å forbedre bokstaver for å tillate avstand strammere enn ellers separate blokker av typen ville tillate. Mange av disse funksjonene falt i favør med fremveksten av foto- og deretter datamaskinbasert setting. Det er bare de siste årene at bedre skriftformater har gjort dem tilgjengelige igjen, og bruken av dem har økt.
Med ankomsten av OpenType (eller riktigere Open Font Format) på skrivebordet og dets avledede Web Open Font Format (WOFF), for bruk på nettet, eksisterer det endelig et par skriftformater som kan brukes nesten universelt. Betydningen her er at disse formatene støtter et mye bredere utvalg av tegn og funksjoner for finere typografisk kontroll enn noen gang før. Som på alle nettsteder støttes bruk av disse funksjonene på forskjellige nivåer i alle de store nettleserne, men det er utbredt nok nå til å være verdt å vurdere og bruke.
Den nødvendige CSS har eksistert i noen år, og er en del av CSS3-modulen. Dessverre har det vært langsom fremgang for å få bred nok støtte til WOFF-formatet, så det følger at nettleserimplementering og støtte har utviklet seg sakte også. Det er imidlertid verdt å merke seg at hver større fraktleser støtter OpenType-funksjoner (med unntak av Opera Mini). Du kan sjekke hvor langt tilbake den støtten strekker seg lett på Kan jeg bruke.
Heldigvis, selv om støtte og syntaks varierer, kan verktøy som Sass bidra til å gjøre det mer praktisk å prøve, og hvis syntaksen ikke fungerer eller funksjonen ikke støttes, ender det bare med normal tekst. Selvfølgelig er det alltid en fangst; Aktivering av OpenType-funksjoner øker filstørrelsen, men med forsiktighet og hurtigbufring trenger det ikke å være en ytelsesmorder.
Så hvorfor bry seg?
Design handler om kommunikasjon og mennesker tar vurderinger om brukervennlighet basert på estetikk.Så det er vår plikt å ta en stopper for hvordan vi kommuniserer med typografiske valg. Videre må du huske at vi leste ved å skanne grupper av former, ikke enkeltbokstaver. Så jevnere flyt, og jo lettere det er å forstå grupper av bokstaver og forstå dem som ord og uttrykk, jo raskere vil brukeren forstå budskapet du prøver å komme over, og du vil gjøre det med stil.
Detaljene, takk
Når du har en skrift inkludert på nettstedet ditt som har OpenType-funksjoner aktivert, er det ganske greit å bruke dem i CSS. Den offisielle CSS3-syntaksen ser slik ut:
p {font-feature-settings: "liga" 1, "frac" 1; }
Denne koden vil slå på både standard ligaturer og brøker, hvis disse funksjonene er tilgjengelige. På grunn av syntaksvariasjoner, vil den faktiske tryggere måten å inkludere dem se mer slik ut:
p {-moz-font-feature-settings: "liga = 1", "frac = 1"; -moz-font-feature-settings: "liga" 1, "frac" 1; -webkit-font-feature-settings: "liga" 1, "frac" 1; -ms-font-feature-settings: "liga = 1", "frac = 1"; -o-font-feature-settings: "liga" 1, "frac" 1; font-feature-settings: "liga" 1, "frac" 1; }
Ja, Firefox er her to ganger. Det skyldes en syntaksendring et sted rundt Firefox 14. Her er en mer fullstendig liste over hvilke funksjoner som finnes og hvordan du refererer til dem:
- "c2sc": små caps fra caps
- "calt": kontekstuelle alternativ
- "clig": kontekstuelle ligaturer
- "dlig": skjønnsmessige ligaturer
- "hist": historiske karakteralternativer
- "hlig": historiske ligaturer
- "kern": aktiver bruk av innebygd kerningtabell
- "liga": vanlige ligaturer
- "nalt": alternativ kommentar
- "salt": stilistiske alternativer
- "smcp": små bokstaver
- "ss01": alternativt stilsett 1
- "ss02": alternativ stilistisk sett 2
- "ss03": alternativ stilistisk sett 3
- "ss04": alternativ stilistisk sett 4
- "ss05": alternativ stilistisk sett 5
- "swsh": swashes
- "null": kuttet-null
Følgende alternativer krever en slags betinget logikk (i det minste i ditt eget sinn), da du egentlig bare kan aktivere ett av disse parene om gangen:
- Antall tilfelle: "lnum": lining numbers eller "onum": oldstyle numbers
- Antallavstand: "pnum": proporsjonal eller "tnum": tabellform (for å stille opp rader med tall som økonomi)
- Brøker: "frac": normale brøker eller "afrc": alternative brøker
Vil du ikke huske alt det? Hvis du bruker Sass, har jeg en Mixin til deg. Den gir listen over og gjør all kodeskriving for deg. For en mer uttømmende liste, prøv Adobe.
En begrunnet tilnærming
Hvert element i designet ditt må være der av en grunn, men det er viktig å huske at noen ganger er en god grunn rett og slett for større skjønnhet. Og det er OK. Det fine med OpenType-funksjonene er at de faller tilbake til vanlig type helt alene, så de er ganske trygge å legge til i designet ditt, og poleringsnivået de legger til kan være ganske merkbart. Med større vekt på lesbarhet, økt pikseltetthet og skjermkvalitet, leser stadig flere brukere lengre innhold på nettet. Det betyr at fordelene med lesbarhet fra bedre typografi raskt kan oversette til økt lojalitet, større opplevd brukervennlighet og til og med parader av enhjørninger og valper (OK, så kanskje den siste er en overdrivelse).
Ord: Jason Pamental
Denne artikkelen dukket opprinnelig opp i nettmagasinutgave 253.
