Gjør deg kjent med tilgjengelig webtypografi

Forfatter: John Stephens

Opprettelsesdato: 24 Januar 2021

Oppdater Dato: 19 Kan 2024

Gjør deg kjent med tilgjengelig webtypografi - Kreativ

Innhold

01. Skriftdesign
02. Skriv søknad
03. Type tekniske detaljer

Responsiv webdesign og nettilgjengelighet er blitt eldre, og nye moduser for å presentere tekst til onlinebrukere har dukket opp. Som et resultat er tilgjengelig typevalg viktigere enn noensinne.

Webtype: hurtigkoblinger

01. Skriftdesign
02. Skriv applikasjon
03. Skriv teknisk informasjon

Den mengde informasjon om tilgjengelig typedesign, applikasjon og kodemetodikk er ganske svimlende, men en ting er klar: innholdets lesbarhet er hovedmålet for nesten alle nettsteder.

Skriftsmed har jobbet med Mencap for å undersøke, teste og designe tilgjengelige skrifttyper for funksjonshemmede. Her er noen av funnene våre.

01. Skriftdesign

Lesbarhet vs lesbarhet

Lesbarhet er opptatt av spørsmål som: Kan du gjenkjenne dette bokstaven eller ordet? Kan du tolke og forstå dette ordet? Lesbarhet er opptatt av: Hvor behagelig er leseopplevelsen? Tilgjengelig type design er både lesbar og lesbar.

Serif vs sans

Vår forskning med Mencap indikerer at sans-serif-skrifttyper er den mest tilgjengelige stilen, da detaljene i serifed-bokstaver blir ansett som komplekse av de med lesevansker.

Sans-skrifter har en forenklet struktur; de sitter nærmere vår lærte håndskrift. Monoliniære sansformer vises tydelig og på en mer robust måte i små pikselstørrelser, selv i de tøffeste gjengivelsesmiljøene.

Bokstavformer

Å velge et skrift med sterke karaktergjenkjenningskvaliteter hjelper lesbarheten. De med synshemming kan finne visse bokstaver forvirrende, så det er viktig at bokstavformene er tydelig definert. Vanlige lovbrytere er ‘jeg’ (store øyne), ‘i’ (nedre øye), ‘l’ (el) og ‘1’ (ett). En lukket 'C' kan se ut som en 'O'.

Åpne teller former hjelper til å lese Kombinasjonen av 'r' og 'n' kan lese som en 'm'. Lange stigende og nedstigende er også viktige. De hjelper til med å definere ytre ordformer som øyet kan skanne og tolke raskt.

Skriftforhold

En stor x-høyde og moderat til bred proporsjon er mest tilgjengelig. En større x-høyde gir ofte større hvite mellomrom inne i et brev, noe som kan hjelpe til med definisjon og klarhet. Ofte markedsføres kondenserte og komprimerte bredder som muliggjør et flytende og mer responsivt oppsett, men det er viktig å innse at ved å bruke en kondensert skrift der det er begrenset plass (f.eks. På mobil), kan du også redusere tilgjengeligheten.

Hinting

Tips beskriver i hvilken grad piksler skal slås på eller av for å forbedre bokstavkvaliteten ved en bestemt pikselstørrelse. Til tross for forbedringer i skjermoppløsningen er skrifthinting fortsatt en viktig designprosess. De fleste støperier automatiserer hinting og oppnår veldig gode resultater, men hold forventningene i sjakk: ingen mengder hinting vil få en tung vekt til å se bra ut med 12 piksler.

02. Skriv søknad

Størrelse er viktig. Vær oppmerksom på at faktiske størrelser kan variere enormt mellom skriftene

Vekt

Etablere et hierarki ved å tildele roller for hver skrift. Et hierarki gjør at øyet kan bryte ned informasjon til en klar opplevelse. Bruk åpne, mellomstore vekter for underoverskrifter og kropp. Sett opp en test for å evaluere på tvers av nettleserplattformene - vekten kan endre seg dramatisk fra et miljø til et annet. Hvis ønskelig, implementer Type Rendering Mix for å balansere utseendet.

Størrelse

Størrelse er viktig. Vær oppmerksom på at hver skrift sitter i en annen skala på typekroppen, og faktiske størrelser kan variere enormt mellom skriftene: 14px i en skrift kan tilsvare 18px i en annen. Den gjennomsnittlige størrelsen for kroppen varierer fra 14px til 16px. Som hovedregel regnes 16px-plus som den mest inkluderende. Skriftstørrelse kan også påvirke gjengivelseskvaliteten. Finn de søte stedene som gir de beste gjengivelsesresultatene for dine primære plattformer.

Linjehøyde og lengde

Gi type rom å puste. Øyet ditt må enkelt kunne spore fra en linje til en annen. Retningslinjene for tilgjengelighet på nettinnhold (WCAG) anbefaler en linjehøyde på 1,5 for body copy. Evaluer, reduser eller øk etter behov. Skanning av lange tekstlinjer tester for øynene dine. Forskning indikerer at den gjennomsnittlige online linjelengden er rundt 70-80 tegn. Begrens linjer til ikke mer enn 16 ord.

Farge

Som alle visuelle elementer, må typen ha tilstrekkelig kontrast. Grå type på hvit bakgrunn kan være vanskelig å lese hvis gråheten og skriftvekten er for lett. Fontsmiths FS Untitled har fint 'gradert' vekter for å hjelpe brukerne å balansere utseendet. Hvit type på mørk bakgrunn vil “glødes” på skjermen slik at den ser strammere ut, og noen skrifttyper kan kreve justering av mellomrom.

03. Type tekniske detaljer

Strategier for innlasting av skrift

Sakte tilkoblinger og store skriftfiler gir langsomme tekstinnlastingstider. En enkelt WOFF-fil med et fullstendig europeisk tegnsett vil være 36-50 KB. Statene FOUT (flash av ustylert tekst) eller FOIT (flash av usynlig tekst) må vurderes. FOIT er den dominerende nettleserens standard og estetisk er FOIT ønskelig, men når det gjelder tilgjengelighet er FOUT absolutt veien å gå.

Det er fordi å se noe innhold er bedre enn ikke noe innhold i det hele tatt. Målet er å vise tekst med en reservefont til alle nettfonter lastes inn, noe som unngår løpende vurdering av flere elementer på siden. Implementere med Web Font Loader og sett en informasjonskapsel, da dette minimerer FOUT lenger inn på siden.

Fallback-skrifter

Valg er begrenset, spesielt på mobil. Jordan Moores mobilkompatibilitetstabell for mobil illustrerer problemet.Når du velger en reserve, må du skyte for lignende vekter og proporsjoner. Juster tilbakemeldinger for å matche den valgte skriftstørrelsen. Informer valgbeslutningen din ved å legge en tilgjengelig font på tilbakeslaget og dømme.

Tekstgjengivelse

Bruk optimiseLegibility for å aktivere kerning og forbedre gjengivelseskvaliteten. Denne innstillingen aktiverer også ligaturer, som du kan deaktivere om nødvendig ved å angi .classname {font-feature-settings: "liga" 0; }.

Beskytte skrifter

Det tar mange års innsats og investeringer å utvikle et skrifttype av høy kvalitet. Det er bare rettferdig, gitt den viktige rollen som typen har i alle webprosjekter, at du tar skritt for å beskytte investeringen i dem. Bruk CORS til å distribuere skrifter, og sørg for at bare tillatte nettsteder har tilgang til filene.

Vi har som mål å gjøre typen så tilgjengelig som den kan være. Vi har jobbet med skilt- og miljøgrupper for å lage et skriftsnitt fra det 21. århundre, FS Millbank, med sikte på å hjelpe navigering i travle omgivelser. Med FS Untitled tar vi sikte på å skape et mer lesbart nett, slik at tilgjengelig typografi er åpen for alle.

Denne artikkelen ble opprinnelig publisert i nettmagasinet utgave 286. Abonner her.

Relaterte artikler