Proporcje czcionki {font-size-adjust}
Co zrobić, aby czcionka na ekranie zawsze była tak samo czytelna, bez względu na jej krój (rodzaj)?
selektor { font-size-adjust: proporcje }Natomiast jako "proporcje" należy wpisać konkretną wartość, określającą stosunek wysokości małej litery do wysokości całej czcionki (liczba z przedziału 0...1).
Subiektywny odbiór wielkości czcionki - a przez to jej czytelność - zależy bardziej od wysokości małej litery (1ex) niż od wysokości całej czcionki (1em). Dzieje się tak dlatego, ponieważ pomimo określenia takiego samego rozmiaru, różne czcionki posiadają różne proporcje, czyli stosunek wysokości małej litery do wysokości całej czcionki (1ex/1em). Oto proporcje wybranych czcionek:
- Times New Roman - 0.46
- Verdana - 0.58
- Comic Sans MS - 0.54
- Trebuchet MS - 0.53
- Georgia - 0.5
- Myriad Web - 0.48
- Minion Web - 0.47
- Gill Sans - 0.46
- Bernhard Modern - 0.4
- Caflish Script Web - 0.37
- Flemish Script - 0.28
Czcionki o większych proporcjach, są bardziej czytelne już przy mniejszej wysokości całkowitej.
Przykładowo wyrażenia: 'Times New Roman' oraz Verdana, zostały napisane różnymi czcionkami, ale o tej samej wielkości. Mimo to, pierwsze z nich (napisane czcionką 'Times New Roman') wydaje się wyraźnie mniejsze (jeżeli posiadasz oba rodzaje czcionek).
Przy deklarowaniu rodzaju czcionki zawsze istnieje niebezpieczeństwo, że użytkownik nie będzie posiadał zdefiniowanych przez Ciebie czcionek. Wtedy cały tekst na ekranie zostanie napisany czcionką domyślną. Może się jednak zdarzyć tak, że przy podanym rozmiarze, czcionka domyślna będzie dużo mniej czytelna lub zbyt "wysoka" i przez to strona straci estetykę. Powodem są właśnie znacznie różniące się proporcje. Aby zabezpieczyć się na taki wypadek, należy określić proporcje czcionki, za pomocą powyższego polecenia. Dzięki temu, niezależnie od rodzaju czcionki, tekst będzie tak samo czytelny, ponieważ przeglądarka automatycznie dobierze odpowiednią jej wielkość - zgodnie ze wzorem:
w' = w * (p / p')
- w - wysokość czcionki określona w poleceniu
- p - proporcje określone w poleceniu
- w' - obliczona wysokość
- p' - proporcje dostępnej czcionki
<p style="font-family: Verdana, 'Times New Roman'; font-size: 14px; font-size-adjust: 0.58">jakiś tekst...</p>a jedyną dostępną czcionką byłby 'Times New Roman', to jego wielkość zostałaby podniesiona z 14px do 14px*(0.58/0.46) = 17.65px ('Times New Roman' ma proporcje 0.46) i dzięki temu, tekst będzie tak samo czytelny.
UWAGA! Polecenie wchodzi w skład CSS 2.0, ale nie CSS 2.1. Ostatecznie pojawiło się znowu w CSS 3.
Przykład {font-size-adjust}
Czcionka 'Times New Roman' - proporcje 0.58
Podstawowa czcionka 'Times New Roman' (domyślnie o proporcjach 0.46)
Czcionka Verdana (domyślnie o proporcjach 0.58)
Przeglądarki
 Chrome |  Firefox |  Edge |  Opera |  Safari | |
|---|---|---|---|---|---|
font-size-adjust: wartość | 127 2024-07-23 | 3 2008-06-17 | 127 2024-07-25 | 113 2024-08-22 | 16.4 2023-03-27 |
