Jak zoptymalizować pod kątem czytelności za pomocą renderowania tekstu
Najbardziej frustrującym aspektem projektowania stron internetowych dla projektantów szkolonych do druku jest ciągły brak kontroli typograficznej.
Staranne wybory typograficzne są cechą jakości pracy, a brak tej jakości w Internecie nigdy nie przestaje być dla tych, którzy wiedzą, czego szukamy.
Na szczęście ciągle wzrasta poziom kontroli, a także rośnie poziom zaawansowanego renderowania typograficznego. Podczas gdy na pewno nie jest możliwe dostarczenie tego rodzaju leczenia, które zapewniają aplikacje takie jak Illustrator - gdzie każda litera może zostać zmodyfikowana w razie potrzeby - dostępne są narzędzia zwiększające jakość. Jedną z najmniej znanych jest właściwość renderowania tekstu.
Nie znajdziesz właściwości renderowania tekstu w żadnych specyfikacjach CSS, ponieważ nie jest to technicznie CSS, jest to właściwość SVG, chociaż jest używana tak jak właściwość CSS. Najważniejszą rzeczą jest to, że dzięki jednej linii CSS możemy wyeliminować z naszego tekstu kilka rzek i innych niedoskonałości.
Właściwość renderowania tekstu ma cztery ustawienia:
- auto: umożliwia przeglądarce wybór samego ustawienia
- optimizeSpeed: skupia się na prędkości
- optimizeLegibility: skupia się na zaawansowanym renderingu
- geometricPrecision: precyzyjne renderowanie
Niestety użycie domyślnego ustawienia "auto" w przeglądarce będzie zazwyczaj faworyzować szybkość, a nie czytelność - co wskazuje na standard sfinalizowany przez programistów zamiast projektantów.
Ponieważ większość z nas nie tworzy stron, które są na tyle istotne, aby uzasadnić potrzebę ustawienia optimizeSpeed, będziemy naprawdę zainteresowani optymalizacjąLogalności (chociaż geometriaPrecision jest przydatna dla niektórych czcionek).
Kod CSS wygląda następująco:
.myClass { text-rendering: optimizeLegibility; }Oto bezpośrednie porównanie optimizeSpeed i optimizeLegibility, jak widać, jeśli przyjrzeć się bliżej, są dwie znaczące poprawki w bardziej czytelnej wersji: znaki "ffi" w pierwszej linii zostały poprawnie zastąpione ligaturą, a kerning została udoskonalona w całym tekście, co jest szczególnie widoczne w piątej linii, gdzie została skorygowana przestrzeń między literami "V" i "e".
Ulepszenia kerningu można łatwiej zobaczyć w tych nakładkach:
Chrome Mac
Windows Chrome
Firefox Mac
Firefox Windows
Internet Explorer 9 Windows
Safari Mac
Obsługa przeglądarki jest obecnie niespójna, jednak fakt, że renderowanie tekstu nie działa po cichu w przeglądarkach, które go nie obsługują, oznacza, że jest ona teraz bardzo użyteczna.
Czy używasz właściwości renderowania tekstu w swoim CSS? Czy ktokolwiek oprócz typografa zauważyłby różnicę? Daj nam znać swoje myśli w komentarzach.
Wyróżniony obraz / miniatura, dopracuj obraz przez Shutterstock.