Przejdź do treści

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 }
Selektorem może być dowolny znacznik, w którym można wpisywać tekst, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów].

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')

gdzie:
  • w - wysokość czcionki określona w poleceniu
  • p - proporcje określone w poleceniu
  • w' - obliczona wysokość
  • p' - proporcje dostępnej czcionki
Przykładowo, jeśli wpiszemy:

📋 Zaznacz kod ▶ Edytuj na żywo

<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

  🟧 Działa krócej niż rok   🟡 Działa krócej niż 2,5 roku

Chrome

Firefox

Edge

Opera

Safari
Poziom wsparcia
min. 2,5 roku
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
 20%

Komentarze #

  • Bianca_2011
    Bianca_2011

    15.09.2021 18:39
    super! :P
    Fajnie to działa :lol:
    Zobacz więcej

  • Błąd
    Błąd

    01.07.2016 22:37
    Znalazłem błąd:
    „Natomiast w trybie zgodności ze standardami: xx-small = 10px, x-small = 10px, small = 12px, medium = 16px, large = 18px, x-large = 24px, xx-large = 32px (w tym przypadku wszystkie wartości są o jeden rozmiar mniejsze niż w trybie Quirks).”
    Sprawdziłem rozmiary i w...
    Zobacz więcej

  • Comandeer
    Comandeer

    01.02.2015 23:12
    Nie bardzo rozumiem w czym problem… 2 czcionki to po prostu 2 polecenia @font-face
    Zobacz więcej

  • niewazne
    niewazne

    01.02.2015 23:00
    jak zwykle "wszystko inne pomiędzy tematem" to takie moje wrażenie...autor napisał ad. osadzenia czcionki w css @font-face... a 2 czcionki osadzić to już nie wiadomo?
    Zobacz więcej

  • Luke
    Luke

    22.07.2014 08:13
    Comandeer: "w sumie dziwię się, że taką opcję dano devom…".
    Oczywiście też mnie to denerwuje, jednak są aspekty, w których taka blokada ma zastosowanie - np. gry przeglądarkowe - i niestety nic poza tym mi nie przychodzi do głowy. :P
    Zobacz więcej

  • Comandeer
    Comandeer

    21.07.2014 20:54
    kurshtml: "Na marginesie: apeluję, nie blokujcie skalowania strony na przeglądarkach mobilnych tylko dlatego, że wydaje się, że skoro zrobiliście specjalną wersję RWD, to użytkownik nie będzie potrzebował używać funkcji skalowania.".
    osobiście bojkotuję takie strony. to chyba najbardziej...
    Zobacz więcej

  • Sławomir Kokłowski
    Sławomir Kokłowski

    21.07.2014 20:50
    Sęk w tym, że prawie żaden użytkownik nie wie, gdzie przestawić domyślny rozmiar tekstu, jeśli ten, który określiła za niego przeglądarka, nie jest dla niego wygodny. W takim przypadku po prostu używa wbudowanego w przeglądarkę mechanizmu skalowania strony, a nie szuka opcji po ustawieniach.
    Na...
    Zobacz więcej

  • Comandeer
    Comandeer

    21.07.2014 20:46
    kurshtml: "No właśnie nie wiem, co to szkodzi, żeby chociaż dla body ustawić "font-size: 16px"?".
    nic nie szkodzi - wyszedłem z błędnego założenia, że taka faktycznie jest bazowa wielkość. mea culpa ;) ALE :D zgodnie ze specyfikacją CSS 2.1
    http://www.w3.org/TR/CSS21/fonts.html#font...
    Zobacz więcej

  • Sławomir Kokłowski
    Sławomir Kokłowski

    21.07.2014 20:37
    No właśnie nie wiem, co to szkodzi, żeby chociaż dla body ustawić "font-size: 16px"? Argument, że lepiej zostawić przeglądarce możliwość określenia najlepszego rozmiaru bazowego fontu, jest nietrafiony - co opisałem. Poza tym skalowanie strony przeglądarki rozwiązały w inny sposób...
    Zobacz więcej

  • Comandeer
    Comandeer

    21.07.2014 20:27
    kurshtml: "To konkretny przykład którejś z wersji przeglądarki Opera pod Linuksa".
    to raczej wyjątek. chociaż faktycznie, nie jestem w stanie znaleźć w specyfikacji odpowiedniego określenia. niemniej praktycznie wszystkie ustawiają to domyślnie na 16px. w ostateczności byłoby to jedyne px...
    Zobacz więcej

Zobacz więcej komentarzy

Facebook