Nowoczesne techniki CSS poprawiające czytelność

Możemy czytać na wiele sposobów i jest wiele różnych typów czytelników, każdy z własnymi potrzebami, umiejętnościami, językiem, a przede wszystkim nawykami. Czytanie powieści w domu różni się od czytania jej w pociągu, tak jak czytanie gazety różni się od przeglądania jej wersji online. Czytanie, jak każda inna czynność, wymaga praktyki, aby ktoś stał się szybki i wydajny. Zasadniczo czytamy lepiej te rzeczy, do których czytamy najczęściej.

Jakie aspekty powinniśmy wziąć pod uwagę, projektując i rozwijając do czytania? Jak możemy stworzyć dostępne, wygodne, integracyjne doświadczenia dla wszystkich czytelników, w tym dla najbardziej wymagających i dotkniętych dysleksją?

Spacje, słowa, zdania i akapity

Jednostki

Na stronie internetowej dostępnych jest wiele jednostek umożliwiających dostosowanie rozmiaru czcionki tekstu. Zrozumienie, której jednostki użyć, jest niezbędne do ustalenia struktury całej sekcji do czytania. Zmienny charakter sieci wymaga od nas rozważenia kilku aspektów, takich jak rozmiar obszaru wyświetlania i preferencje czytania użytkownika.

Z tego powodu najodpowiedniejszymi opcjami są generalnie em i rem, które są jednostkami specyficznymi dla czcionki. Na przykład ustawienie marginesów między akapitami za pomocą znaków em pomaga zachować rytm pionowy przy zmianie rozmiaru tekstu. Może to jednak stanowić problem, gdy czcionka szeryfowa jest zastępowana czcionką bezszeryfową w obrębie sekcji. W rzeczywistości, przy tym samym rozmiarze czcionki, czcionki mogą wyglądać bardzo różnie optycznie. Tradycyjnie wysokość małego znaku „x” (wysokość x) jest odniesieniem do określenia pozornego rozmiaru znaku.

Stosując regułę font-size-adjust możemy więc optycznie renderować czcionki o tym samym rozmiarze, ponieważ właściwość dopasuje wysokość małych liter. Niestety ta właściwość jest obecnie dostępna tylko w Firefoksie, Chrome i Edge za flagą, ale można jej użyć jako progresywnego ulepszenia za pomocą sprawdzenia @support:

 @supports (font-size-adjust: 1;) { article { font-size-adjust: 0.5; } }

Pomaga również w zamianie czcionki rezerwowej na ładowaną zdalnie (na przykład przy użyciu czcionek Google).

Optymalna wysokość linii

Uważamy, że typografia jest czarno-biała. Typografia jest naprawdę biała [...] To przestrzeń między czerniami naprawdę ją tworzy.

— Massimo Vignelli, Helvetica, 2007 r.

Ponieważ typografia to bardziej kwestia „białych” niż „czarnych”, kiedy stosujemy to pojęcie do projektu strony internetowej lub aplikacji internetowej, musimy wziąć pod uwagę specjalne cechy, takie jak wysokość wierszy, marginesy między akapitami i podziały wierszy.

Ustawienie rozmiaru czcionki na podstawie wysokości x pomaga zoptymalizować wysokość linii. Domyślna wysokość wiersza w przeglądarkach to 1,2 (wartość niemianowana względem rozmiaru czcionki), co jest optymalną wartością dla Times New Roman, ale nie dla innych czcionek. Musimy również wziąć pod uwagę, że odstępy między wierszami nie rosną liniowo wraz z rozmiarem czcionki i że zależą od różnych czynników, takich jak rodzaj tekstu. Testując niektóre popularne czcionki do długiego czytania, w połączeniu z rozmiarami od 8 do 14 punktów, byliśmy w stanie wywnioskować, że na papierze stosunek między wysokością x a optymalnym odstępem między wierszami wynosi 37,6.

W porównaniu z czytaniem na papierze czytanie ekranowe zazwyczaj wymaga większej odległości między wierszami. Dlatego powinniśmy dostosować współczynnik do 32 dla środowisk cyfrowych. W CSS tę wartość empiryczną można przełożyć na następującą regułę:

 p { line-height: calc(1ex / 0.32); }

We właściwych kontekstach czytania ta reguła określa optymalną wysokość wiersza dla czcionek szeryfowych i bezszeryfowych, nawet jeśli narzędzia typograficzne nie są dostępne lub gdy użytkownik ustawił czcionkę, która zastępuje czcionkę wybraną przez projektanta.

Zdefiniuj skalę

Teraz, gdy dostosowaliśmy rozmiar czcionki i użyliśmy jednostki ex do obliczenia wysokości linii, musimy zdefiniować skalę typograficzną, aby prawidłowo ustawić odstępy między akapitami i zapewnić dobry rytm czytania. Jak wspomniano wcześniej, odstępy między wierszami nie rosną liniowo, ale różnią się w zależności od typu tekstu. Na przykład w przypadku tytułów z dużym rozmiarem czcionki powinniśmy rozważyć wyższy współczynnik wysokości linii.

 article h1 { font-size: 2.5em; line-height: calc(1ex / 0.42); margin: calc(1ex / 0.42) 0; } article h2 { font-size: 2em; line-height: calc(1ex / 0.42); margin: calc(1ex / 0.42) 0; } article h3 { font-size: 1.75em; line-height: calc(1ex / 0.38); margin: calc(1ex / 0.38) 0; } article h4 { font-size: 1.5em; line-height: calc(1ex / 0.37); margin: calc(1ex / 0.37) 0; } article p { font-size: 1em; line-height: calc(1ex / 0.32); margin: calc(1ex / 0.32) 0; }

Odstępy między literami i słowami

Pracując nad czytelnością, musimy również wziąć pod uwagę czytelników, którzy mają trudności, takich jak osoby z dysleksją i trudnościami w uczeniu się. Dysleksja rozwojowa wpływa na czytanie, a dyskusja i badania dotyczące przyczyn nadal trwają. Ważne jest, aby skorzystać z badań naukowych, aby zrozumieć wpływ zmiennych wizualnych i typograficznych na czytanie.

Na przykład w badaniu, które śledziła moja firma („Testowanie czytelności tekstu czcionek przyjaznych dysleksji”), były wyraźne dowody na to, że kształty glifów w czcionkach o wysokiej czytelności tak naprawdę nie pomagają w czytaniu, ale szersze odstępy między znakami (śledzenie) robi. To odkrycie zostało potwierdzone w innym badaniu dotyczącym skuteczności zwiększonych odstępów („How the Visual Aspects Can Be Crucial in Reading Acquisition: The Intriguing Case of Crowding and Developmental Dyslexia”).

Badania te sugerują, że powinniśmy wykorzystać dynamikę i responsywność stron internetowych, oferując bardziej efektywne narzędzia, takie jak kontrola obsługi odstępów. Powszechną techniką powiększania rozmiaru znaków jest dostosowywanie odstępów między literami i słowami za pomocą właściwości CSS, takich jak odstępy między literami i letter-spacing między word-spacing .

Problem polega na tym, że letter-spacing działają bezwarunkowo i przerywają śledzenie czcionki, co prowadzi do renderowania nieoptymalnych spacji na stronie.

Alternatywnie możemy użyć czcionek zmiennych, aby uzyskać większą kontrolę nad renderowaniem czcionek. Projektanci czcionek mogą parametryzować odstępy w sposób zmienny i nieliniowy oraz określać, w jaki sposób waga i kształt glifu mogą lepiej dostosować się do nawyków czytelnika. W poniższym przykładzie, wykorzystując czcionkę Amstelvar, jesteśmy w stanie zwiększyć wielkość optyczną oraz odstępy i kontrast zgodnie z zamierzeniami projektanta.

Artykuł Web.dev „Wprowadzenie do czcionek zmiennych w sieci” zawiera więcej szczegółów na temat czcionek zmiennych i sposobów ich używania. I wypróbuj narzędzie Variable Fonts, aby zobaczyć, jak działają.

Szerokość i wyrównanie

Aby zoptymalizować przepływ czytania, musimy również popracować nad szerokością akapitu, czyli liczbą znaków i spacji w linii. Podczas czytania nasze oko skupia się na około ośmiu literach w foveatio (czyli operacji uruchamianej, gdy patrzymy na przedmiot) i jest w stanie obsłużyć tylko kilka kolejnych powtórzeń . Dlatego podziały wierszy są kluczowe: moment przeniesienia uwagi z końca wiersza na początek następnego jest jedną z najbardziej skomplikowanych operacji w czytaniu i musi być ułatwiony przez zachowanie odpowiedniej liczby znaków na typ tekstu. W przypadku podstawowego akapitu typowa długość to około 60 do 70 znaków w wierszu. Tę wartość można łatwo ustawić za pomocą jednostki ch, przypisując szerokość do akapitu:

 p { width: 60ch; max-width: 100%; }

Uzasadnienie odgrywa również ważną rolę w czytaniu w poprzek wiersza. Obsługa dzielenia wyrazów w językach nie zawsze jest optymalna w różnych przeglądarkach; dlatego należy to sprawdzić. W każdym razie unikaj wyjustowanego tekstu w przypadku braku dzielenia wyrazów , ponieważ powstałe odstępy w poziomie byłyby przeszkodą w czytaniu.

 /* The browser correctly supports hyphenation */ p[lang="en"] { text-align: justify; hyphens: auto; } /* The browser does NOT correctly support hyphenation */ p[lang="it"] { text-align: left; hyphens: none; }

Ręczne dzielenie wyrazów może być używane w przypadku języków, które nie mają natywnej obsługi. Istnieje kilka algorytmów (zarówno po stronie serwera, jak i klienta), które mogą wstrzykiwać ‐ jednostka w słowach, aby poinstruować przeglądarki, gdzie można złamać token. Ten znak byłby niewidoczny, chyba że znajduje się na końcu linii, po czym byłby renderowany jako myślnik. Aby aktywować to zachowanie, musimy ustawić hyphens: manual CSS .

Kontrast pierwszego planu

Kontrast znaków i słów z tłem ma fundamentalne znaczenie dla czytelności. WCAG określił wytyczne i ograniczenia dla różnych standardów (A, AA, AAA) regulujących kontrast między tekstem a tłem. Kontrast można obliczyć za pomocą różnych narzędzi, zarówno dla środowisk projektowych, jak i programistycznych. Należy pamiętać, że automatyczne walidatory są narzędziami pomocniczymi i nie gwarantują takiej samej jakości jak prawdziwy test.

Używając zmiennych CSS i instrukcji calc , możemy dynamicznie obliczyć kolor, który zapewnia najlepszy kontrast z tłem. W ten sposób możemy zaoferować użytkownikowi różne rodzaje kontrastu (sepia, jasnoszary, tryb nocny itp.), konwertując cały motyw zgodnie z kolorem tła.

 article { --red: 230; --green: 230; --blue: 230; --aa-brightness: calc(( (var(--red) * 299) + (var(--green) * 587) + (var(--blue) * 114) ) / 1000; --aa-brightness: calc(( (var(--red) * 299) + (var(--green) * 587) + (var(--blue) * 114) ) / 1000); --aa-color: calc((var(--aa-brightness) - 128) * -1000); background: rgb(var(--red), var(--green), var(--blue)); color: rgb(var(--aa-color), var(--aa-color), var(--aa-color)); } 

Ponadto dzięki wprowadzeniu i obsłudze zapytania o media prefer-color-scheme różnych przeglądarkach zarządzanie przełączaniem z jasnego na ciemny motyw staje się jeszcze łatwiejsze, zgodnie z preferencjami użytkownika.

 @media (prefers-color-scheme: dark) { article { --red: 30; --green: 30; --blue: 30; } }

Iść naprzód

Projektowanie i rozwijanie pod kątem optymalnego czytania wymaga dużej wiedzy i pracy wielu profesjonalistów. Im bardziej ta wiedza zostanie rozpowszechniona w zespole, tym lepsi będą użytkownicy. Poniżej znajduje się kilka punktów, które prowadzą nas do dobrych wyników.

Dla projektantów

• Rozważ strukturę semantyczną jako część projektu, a nie szczegół techniczny;
• Układ dokumentu i metryki czcionek, zwłaszcza dlaczego i jak wybierasz. Pomogą programistom poprawnie wdrożyć projekt;
• W miarę możliwości ogranicz zmienne typograficzne (mniej rodzin, stylów i wariantów).

Dla programistów

• Poznaj zasady typografii, aby zrozumieć podejmowane decyzje projektowe i sposoby ich realizacji;
• Używaj jednostek odnoszących się do rozmiaru czcionki, aby wdrażać responsywne układy (dopełnienia, marginesy, przerwy), które skalują się zgodnie z preferencjami użytkownika;
• Unikaj nieograniczonego manipulowania wskaźnikami czcionek. Nieprzestrzeganie ograniczeń czcionki może pogorszyć czytelność.

Dla zespołów

• Przeczytaj i zrozum zasady WCAG;
• Rozważ włączenie i dostępność jako część projektu (a nie oddzielne kwestie).

Czytanie to złożona czynność. Pomimo wielu zasobów na temat typografii internetowej i artykułów naukowych, które identyfikują obszary do ulepszeń, nie ma magicznej recepty na osiągnięcie dobrej czytelności. Liczba zmiennych do rozważenia może wydawać się przytłaczająca, ale wieloma z nich można zarządzać.

Możemy ustawić optymalną wysokość wiersza akapitu za pomocą jednostki ex , a także ustawić szerokość akapitu za pomocą jednostki ch , aby przestrzegać preferowanych przez użytkownika ustawień przeglądarki dotyczących rozmiaru i rodziny czcionki. Możemy używać czcionek zmiennych, aby dostosować odstępy między literami i słowami, a także manipulować obrysem glifów, aby zwiększyć kontrast, pomagając czytelnikom z wadami wzroku i dysleksją. Możemy nawet automatycznie dostosować kontrast tekstu za pomocą zmiennych CSS, dając użytkownikowi preferowany motyw.

Wszystko to pomaga nam zbudować dynamiczną stronę internetową, której czytelność jest zoptymalizowana zgodnie z potrzebami i preferencjami użytkownika. Wreszcie, biorąc pod uwagę, że każdy najmniejszy szczegół implementacji lub technologiczny może mieć ogromne znaczenie, nadal konieczne jest przetestowanie wydajności czytania przez użytkowników przy użyciu końcowego artefaktu.

Powiązane zasoby

• „Testowanie czytelności tekstu czcionek przyjaznych dla dysleksji”, Galliussi, Perondi, Chia, Gerbino, Bernardis (2020)
• „Jak aspekty wizualne mogą mieć kluczowe znaczenie w czytaniu Akwizycja: intrygujący przypadek zatłoczenia i dysleksji rozwojowej”, Gori, Facoetti (2015)