Sådan får du tekst til at gengive perfekt

At vælge et smukt skrifttype er ubrugeligt, hvis det ser grimt ud på din skærm. For at undgå afskyelig - eller værre - ulæselig tekst, skal du altid teste, om skrifttypen fungerer godt på de enheder, dine besøgende bruger. Du bliver måske overrasket; de fleste af dine besøgende bruger sandsynligvis ikke den samme enhed, som du bruger til at designe og udvikle. Faktisk bruger langt de fleste mennesker, der surfer på internettet, Android- og Windows-maskiner.

Verdensomspændende operativsystembrug i henhold til StatCounter Global Stats (april 2017). Apples enheder repræsenterer en lille brøkdel af global brug, mens Android og Windows dominerer.



Verdensomspændende operativsystembrug i henhold til StatCounter Global Stats (april 2017). Apples enheder repræsenterer en lille brøkdel af global brug, mens Android og Windows dominerer.

Den bedste måde at teste, hvordan en skrifttype opfører sig, er at indstille en eksempeltekst i skrifttypen og prøve den på alle enheder, du målretter mod. Dårlig gengivelse er især mærkbar på tynde vægte.



For eksempel kan en skrifttype, der gengives godt på macOS, virke skrøbelig på Windows (se billedet nedenfor). Det er vigtigt at bruge rigtige enheder, fordi online browser-testværktøjer og virtuelle maskiner ofte er unøjagtige (mere om det senere).

hvordan man ændrer størrelsen på en lagmaske i Photoshop

Jubilat Thin på Windows 7 (venstre) og macOS (højre). Bemærk, at på macOS ser teksten



Jubilat Thin på Windows 7 (venstre) og macOS (højre). Bemærk, at på macOS ser teksten 'tungere' ud end på Windows 7.

Hvis du ikke har dit websteds indhold endnu (tsk!), Skal du give Tim Brown's Webskrifttype et spin. Det indstiller indhold i flere tekststørrelser og med forskellige baggrundsfarver. Det er ikke erstatning for ægte indhold, men det gør det med en knivspids.

Nogle gange bliver du heldig, og den skrifttype, du har valgt, er designet eksplicit til skærme: Hoefler & Co's ScreenSmart, Monotype's eText og Font Bureau's Reading Edge er eksempler på samlinger, der er specielt designet med skærme i tankerne og skal se smukke ud overalt. Selvfølgelig lønner det sig at dobbelttjekke tekstgengivelsen uanset skrifttypens oprindelse.

Men nøjagtigt hvorfor ser teksten anderledes ud fra en browser til den næste? For at besvare dette spørgsmål bliver vi nødt til at tage en hurtig omvej ind i de skøre detaljer i tekstgengivelsen.



Rasterisering og antialiasing

Processen med at omdanne skrifttypeskitser til pixels kaldes rasterisering. Operativsystemets tekstgengivelsesmotor placerer omridset (dvs. formen) for hvert tegn i den ønskede skriftstørrelse på et pixelgitter. Derefter farver den alle de pixels, hvis centrum er inden for konturen (se billedet nedenfor).

hvordan man får dit websted bemærket

Fra Bézier-kurve til pixels. Til venstre er omridset af tegnet

Fra Bézier-kurve til pixels. Til venstre er omridset af tegnet 'a'. I midten er konturen overlejret på et pixelgitter; enhver pixel, hvis centrum er inden for konturen, er tændt. Til højre er den resulterende rasterisering.

I dette eksempel er en pixel enten til eller fra, uanset hvor meget af omridset der er til stede i pixlen. Denne tilnærmelse af matematisk perfekte konturer kaldes aliasing; antialiasing forsøger at afbøde de grove trapper-lignende udseende forårsaget af den begrænsede opløsning af skærme.

Ideen bag antialiasing er at finde ud af, hvor meget af omridset der er til stede i hver pixel og repræsentere det med en gråtoneværdi. Med andre ord, hvis omridset dækker 50 procent af en pixel, bruger den 50 procent sort til at farve den pixel. Hvis pixlen er helt inden for omridset, bruges 100 procent sort osv. Dette fører til en antialistisk gengivelse, der reducerer aliasingen (se billedet nedenfor). Du vil ofte se udtrykket 'gråtoneantialiasing' brugt til at beskrive denne effekt.

Antialiasing ved hjælp af gråtoneværdier til at repræsentere omridsdækningen for hver pixel giver bedre resultater.

Antialiasing ved hjælp af gråtoneværdier til at repræsentere omridsdækningen for hver pixel giver bedre resultater.

Mens antialiasing forbedrer kvaliteten af ​​tekstgengivelse, er det muligt at forbedre resultatet yderligere ved hjælp af subpixel antialiasing. Underpixel-antialiasing gør brug af skærmens egenskaber til at øge opløsningen af ​​rasteriseret tekst. Hver pixel i en skærm består af tre aflange underpixler: rød, grøn og blå (andre konfigurationer findes, men de samme principper gælder). Operativsystemet kan styre disse subpixels individuelt; antialiasing af subpixel udnytter det ved at anvende dækningsberegningen på hver subpixel (se billedet nedenfor).

Ved at målrette mod individuelle subpixels øger subpixel antialiasing effektivt opløsningen af ​​gengivet tekst. Farverne med det blotte øje (venstre) er resultatet af at indstille individuelle dækningsværdier for hver subpixel (højre); underpixlerne til rød, grøn og blå kombineres for at danne en enkelt mærkbar farve.

Ved at målrette mod individuelle subpixels øger subpixel antialiasing effektivt opløsningen af ​​gengivet tekst. Farverne med det blotte øje (venstre) er resultatet af at indstille individuelle dækningsværdier for hver subpixel (højre); underpixlerne til rød, grøn og blå kombineres for at danne en enkelt mærkbar farve.

Forskellen mellem disse tekstgengivelsesindstillinger bliver tydelig, når du begynder at arbejde i mindre tekststørrelser. Uden antialiasing mister tegn hurtigt deres karakteristiske konturer. Antialiasing i gråskala gør tegn slørede, men bevarer deres form. Antialiasing af subpixel gengiver skarpe tegn, men introducerer også nogle farvefrynser rundt om karakterens kanter.

Tips til antialiasing

Du kan ændre indstillinger for antialiasing via ikke-standard -webkit-font-udjævning og -moz-osx-font-udjævning CSS egenskaber. Desværre bruger mange CSS-rammer og biblioteker antialistisk og gråtoner værdier for at gøre teksten lysere på macOS. De fleste udviklere og designere er imidlertid ikke klar over, at dette deaktiverer antialiasing af subpixel og får tekst til at blive slørere og derved skade læsbarheden.

At ændre en andens foretrukne tekstgengivelse til at være mindre læselig er meget ubetydeligt. Hvis du skal have lettere tekst, skal du bruge en lettere vægt i stedet for at deaktivere gengivelse af subpixel.

Tekstgengivende motorer

De fleste operativsystemer bruger deres egen beskyttede tekst-gengivelsesmotor, mens andre bruger den samme open source-motor (dog ikke nødvendigvis med den samme konfiguration). Imidlertid understøtter alle dem antialiasing og subpixel antialiasing, men adskiller sig lidt i deres implementering. I mange operativsystemer kan valget af antialiasing-metode vælges af brugeren. I Windows kaldes f.eks. Subpixel antialiasing ClearType; på macOS kaldes det LCD Font Smoothing.

Der er i øjeblikket fire store tekstgengivelsesmotorer: Interface til grafisk enhed (også kendt som GDI) og DirectWrite på Windows; Kernegrafik på macOS og iOS; og open source FreeType på Linux, Chrome OS og Android.

Generelt bruger en browser den tekstgengivelsesmotor, der er hjemmehørende i det operativsystem, den kører på. Chrome bruger for eksempel DirectWrite på Windows, Core Graphics på macOS og FreeType på Android. Windows er unik, fordi den tilbyder to tekstgengivelsesmotorer: GDI og den nyere DirectWrite.

Alle moderne browsere bruger DirectWrite, så du behøver ikke bekymre dig om GDI-gemning for en undtagelse: nogle browsere falder tilbage på den ringere GDI-gengivelse, hvis maskinen ikke har nogen dedikeret grafikhardware. Online browser-testværktøjer og virtuelle maskiner har ofte ikke dedikeret grafikhardware, så tekstgengivelse på disse værktøjer er ikke nøjagtig.

Ideelt set gengives al tekst ved hjælp af subpixel-antialiasing, fordi den skaber den mest læsbare tekst. Desværre er det ikke altid muligt - for eksempel er subpixel antialiasing ofte deaktiveret på enheder, der kan roteres, såsom tablets og telefoner. Når du drejer skærmen på disse enheder, er subpixelerne ikke længere arrangeret i det mønster, der forventes af rasterizer, og vil medføre, at antipassering af subpixel ser grim ud.

Yderligere læsning: fra valg til optimering, Webfont-håndbogen viser dig, hvordan webfonts kan gøre internettet til et mere visuelt forskelligartet, effektivt og læsbart miljø.

peg og skyde kamera med manuelle kontroller
Yderligere læsning: fra valg til optimering, Webfont-håndbog viser dig, hvordan webfonts kan gøre internettet til et mere visuelt forskelligartet, effektivt og læsbart miljø.

Browsere deaktiverer også antialiasing af subpixel i lignende situationer, for eksempel når tekst roteres eller animeres. I dette tilfælde svarer den rasteriserede tekst ikke længere til subpixel-layoutet for tekstens oprindelige position og skal rastreres igen. Dette er dyrt, især til animationer, så de fleste browsere falder tilbage på antialiasing i gråtoner, som ikke lider under det samme problem og fungerer i enhver retning.

Nogle browsere - f.eks. Chrome på macOS - deaktiverer også antialiasing af subpixel på skærme med høj opløsning for at give en mere ensartet brugeroplevelse. Andre browsere muliggør kun subpixel-antialiasing på lille tekst, fordi mindre ændringer i tekstgengivelse er mindre synlige i større størrelser.

Der er flere andre tilfælde, hvor browsere deaktiverer antialiasing af subpixel. De regler, browsere bruger til at vælge antialiasing-metoden, opdateres konstant som nye hjørnesager og problemer findes . Disse hyppige ændringer gør det meget svært at holde styr på, hvad der sker med din tekstgengivelse. Det, der engang anvendte subpixel-antialiasing, kan falde tilbage til gråtoner med den næste browseropdatering. Den eneste måde at vide med sikkerhed, hvordan din tekst gengiver, er at teste på faktiske enheder.

Du er sandsynligvis vant til at teste dit websted i flere browsere. Test af tekstgengivelse øger mængden af ​​test, du skal udføre mangfoldighed. Ikke kun skal du kontrollere alle kombinationer af operativsystemer og browsere, men også alle almindelige tekstgengivelsesindstillinger.

Nogle enheder kan være forudkonfigureret til at bruge antialiasing i gråtoner, mens andre bruger en blanding af antialiasing i gråtoner og subpixel. For at gøre det endnu sværere er det ikke muligt at bruge online-browser testværktøjer eller virtuelle maskiner, fordi tekstgengivelsen ofte adskiller sig fra den for rigtige enheder.

Brug altid en repræsentativ prøve af dit indhold, når du tester. Et mønsterbibliotek er ideel til testtypegengivelse, fordi det inkluderer en bred prøve af dit indhold: overskrifter, brødtekst, etiketter, baggrundsfarver og animation. At have eksempler på dit indhold på en enkelt side giver dig mulighed for hurtigt at kontrollere alle kombinationer af stilarter og baggrundsfarver.

hvordan man tegner en 3d hest trin for trin

Vær på udkig efter tekst, der ikke er læselig eller synes tynd på nogle operativsystemer. Hvis du finder et problem, skal du skifte til en anden vægt i samme skrifttypefamilie, gøre teksten mørkere eller vælge et andet skrifttype. Held og lykke.

Denne artikel blev oprindeligt offentliggjort i nummer 301 af net, verdens bedst sælgende magasin til webdesignere og udviklere. Køb nummer 301 eller abonner på nettet .

Relaterede artikler: