Liten tekst på desktop
Silktide måler størrelsen på teksten folk ser når sidene dine vises på en skjerm, og rapporterer tekst som gjengis med mindre enn 12 piksler. Tekst som er så liten, er vanskelig eller umulig å lese for mange.
Hvorfor dette er viktig
Desktop-skjermer er lenger fra leseren enn en telefon, så liten tekst er forholdsmessig vanskeligere å lese der. Tekst på under 12 piksler ekskluderer lesere med nedsatt syn, anstrenger øynene til eldre lesere og får alle andre til å lene seg frem eller zoome. Viktige retningslinjer for design samler seg om 12 til 14 piksler som det praktiske minimumet for brødtekst på desktop.
Liten tekst er sjelden et bevisst valg – den sniker seg vanligvis inn gjennom juridisk standardtekst, bunntekster og tredjepartsinnhold som ingen leser på nytt.
Slik løser du det
- Øk skriftstørrelsen i til minst 12px, og helst 16px for brødtekst.
\/* Problem: for liten til å leses komfortabelt på desktop *\/
.footer-note { font-size: 10px; }
\/* Løsning: bruk en lesbar størrelse, helst i relative enheter *\/
.footer-note { font-size: 0.875rem; } \/* 14px med standardinnstillinger *\/
- Foretrekk relative enheter (
rem,em) fremfor faste piksler, slik at teksten også skaleres når brukerne endrer nettleserens standardstørrelse for skrift. - Hvis den markerte teksten faktisk fungerer godt i den aktuelle størrelsen – for eksempel en dekorativ detalj – kan du funnet.
Slik tester Silktide dette
- Gjengi hver side med en skjermstørrelse for desktop.
- Mål den endelige beregnede størrelsen på hvert synlige tekststykke, etter at all CSS er brukt.
- Ignorer skjult tekst, tekst som bare er ment for , og tekstbiter som er kortere enn 2 tegn (for eksempel ikontegn).
- Rapporter tekst som gjengis med mindre enn 12 piksler.
Hvis nettstedet ditt er konfigurert til å utelate tredjepartsinnhold, rapporteres ikke tekst i kjente tredjepartsprogramtillegg.
Feilsøking
Teksten ser fin ut på skjermen min
Skjermer med høy oppløsning og personlige zoominnstillinger kan få liten tekst til å se akseptabel ut på maskinen din, selv om den fortsatt er for liten med standardinnstillinger. Kontrollen måler størrelsen i CSS-piksler som nettleseren til hver besøkende starter med.
Hva med mobil?
Tekststørrelsen i mobilvisningen av sidene dine testes separat med liten tekst, som bruker en terskel tilpasset mobilskjermer.