Pochyła czcionka w frontendzie wygląda prosto, ale w praktyce łatwo pomylić efekt wizualny z semantyką. Jednym razem chodzi o zwykłą kursywę w CSS, innym o podkreślenie znaczenia fragmentu zdania, a jeszcze innym o techniczne oznaczenie terminu, cytatu albo nazwy własnej. W tym tekście rozkładam to na konkretne decyzje: kiedy użyć , kiedy , kiedy font-style i jak nie zepsuć czytelności.
Najważniejsze fakty o kursywie w frontendzie
-
font-stylezmienia wygląd tekstu, ale nie jego znaczenie. -
służy do stresu i nacisku w treści, a nie do samej dekoracji. -
pasuje do terminów, obcych zwrotów, myśli i innych fragmentów wyodrębnionych z prozy. -
italiczwykle oznacza prawdziwy wariant kroju, aobliquepochylenie zwykłych liter. - Najlepiej wyglądają krótkie akcenty, nie długie akapity zapisane kursywą.
Czym różni się kursywa od pochylenia w kroju pisma
W CSS italic i oblique wyglądają podobnie, ale nie są tym samym. Italic wybiera krój zaprojektowany jako kursywa, więc litery mogą mieć inną konstrukcję niż wersja prosta. Oblique po prostu pochyla zwykły kształt liter albo wybiera gotowy slanted face, a gdy go nie ma, przeglądarka potrafi zasymulować pochylenie.
| Wartość | Co robi | Mój praktyczny komentarz |
|---|---|---|
italic |
Wybiera prawdziwy wariant kursywy, jeśli font go ma | Najlepszy wybór dla tekstów redakcyjnych, cytatów i delikatnych akcentów |
oblique |
Przechyla prosty krój albo wybiera oblique face | Dobre, gdy chcesz slant bez typowej kursywowej konstrukcji liter |
oblique 10deg |
Ustawia konkretny kąt pochylenia | Przydatne w systemach projektowych, gdzie slant ma być przewidywalny |
Jeśli font nie ma odpowiedniego wariantu, przeglądarka może go zasymulować. To działa jako fallback, ale przy bardziej dopracowanych interfejsach wolę sprawdzić, czy rodzina pisma ma własną kursywę, bo właśnie wtedy typografia wygląda najczyściej. Kiedy ta różnica jest jasna, dużo łatwiej zdecydować, czy potrzebujesz tylko stylu, czy także znaczenia w HTML.
Jak uzyskać kursywę w HTML i CSS
Najprostsza droga to CSS, czyli font-style. Używam go wtedy, gdy chcę zmienić sam wygląd tekstu, bez dokładania znaczenia semantycznego. Gdy natomiast fragment ma nieść nacisk w treści, lepiej oddać to HTML-em i dopiero potem, jeśli trzeba, dopasować wygląd w CSS.
.note {
font-style: italic;
}
.slanted {
font-style: oblique 12deg;
}To jest ważny fragment zdania.
To jest termin techniczny.
Jeśli używasz oblique, możesz podać kąt, na przykład oblique 10deg; bez kąta przeglądarka przyjmuje domyślnie 14 stopni. W praktyce to ma znaczenie wtedy, gdy projekt ma być spójny w całym systemie komponentów, a nie tylko „mniej więcej pochylony”. Najważniejsze jest jednak to, że HTML powinien opisywać znaczenie, a CSS wygląd.
Kiedy użyć , a kiedy
To jest miejsce, w którym najłatwiej o pomyłkę. Oba elementy często wyglądają identycznie, ale ich rola jest zupełnie inna. służy do nacisku w zdaniu, a do wyróżnienia fragmentu, który odstaje od zwykłej prozy.
| Element | Kiedy go użyć | Dlaczego to ma sens |
|---|---|---|
|
Gdy akcent zmienia sens wypowiedzi | Technologia asystująca może przekazać użytkownikowi, że dany fragment jest ważniejszy |
|
Gdy tekst jest wyodrębniony z reszty, np. termin, myśl, nazwa łacińska lub obcy zwrot | To nadal ma semantykę, a nie tylko ozdobny wygląd |
|
Gdy oznaczasz tytuł dzieła, książki, filmu lub artykułu | To poprawniejszy wybór niż ręczne pochylanie tytułu |
Praktyczny przykład: zdanie „Nie powiedziałem, że to jest bezpieczne” niesie inny akcent niż wersja bez kursywy. Z kolei łacińskie et cetera albo techniczny termin w środku akapitu można oznaczyć przez , bo chodzi o odrębny fragment prozy, a nie o emocjonalny nacisk. Gdy ta granica jest jasna, znika większość nieporozumień w kodzie i dalej zostaje już tylko kwestia jakości wykonania.
Najczęstsze błędy przy pochylaniu tekstu
W projektach frontendowych problemem rzadko jest sama kursywa. Częściej chodzi o to, że ktoś używa jej tam, gdzie nie powinna się pojawić, albo robi z niej jedyny sposób na wyróżnianie treści. To daje efekt, który na ekranie wygląda poprawnie, ale w odbiorze szybko męczy.
- Używanie
zamiasttam, gdzie naprawdę chodzi o nacisk znaczeniowy. - Pochylanie całych akapitów, przez co tekst traci tempo i robi się mniej czytelny, zwłaszcza na telefonie.
- Poleganie na sztucznie generowanej kursywie, mimo że dana rodzina fontów ma własny wariant italic.
- Mylenie
zprzy tytułach dzieł i materiałów źródłowych. - Stosowanie kursywy w bardzo małym rozmiarze bez testu na realnym ekranie.
Ja zwykle zakładam prostą zasadę: jeśli kursywa ma pomóc przeczytać tekst szybciej, zostaje; jeśli ma tylko „ładnie wyglądać”, prawie zawsze warto ją ograniczyć. To prowadzi prosto do ostatniej rzeczy, o której wiele osób zapomina, czyli dostępności i pracy fontu w różnych warunkach.
Jak zadbać o czytelność i dostępność
Jeżeli font ma prawdziwy wariant italic, użyj go. Jeżeli nie ma, przeglądarka może zasymulować pochylenie, ale efekt bywa mniej elegancki i mniej stabilny wizualnie. W systemach, w których wygląd ma być kontrolowany co do detalu, można też ograniczyć syntezę stylem font-synthesis-style: none; - tylko wtedy, gdy masz pewność, że dostarczasz odpowiedni wariant kroju.
.article {
font-family: "Source Serif 4", serif;
font-synthesis-style: none;
}W praktyce zwracam uwagę jeszcze na dwie rzeczy. Po pierwsze, kursywa nie powinna być jedynym nośnikiem informacji; jeśli coś jest ważne, lepiej oprzeć się na semantyce, kontrastach lub układzie. Po drugie, przy małych rozmiarach tekstu kursywa szybko traci czytelność, więc przy interfejsach mobilnych wolę ją stosować oszczędnie i sprawdzać na realnym urządzeniu. Gdy te warunki są spełnione, pochylenie tekstu wspiera treść zamiast z nią rywalizować.
Najkrótszy zestaw zasad, który stosuję w projektach
- Do samego wyglądu używaj
font-style, a do znaczenia - odpowiedniego elementu HTML. -
zostaw dla nacisku w zdaniu,dla fragmentów wyodrębnionych z prozy. - Tytuły dzieł oznaczaj przez
, nie przez ręczne pochylanie tekstu. - Wybieraj prawdziwy wariant italic, jeśli font go ma; oblique traktuj jako świadomy wybór, nie przypadek.
- Nie pochylaj długich bloków tekstu, jeśli nie chcesz obniżyć czytelności.
Jeśli trzymasz się tych kilku reguł, kursywa przestaje być ozdobą „na oko”, a staje się narzędziem, które realnie porządkuje treść. I właśnie tak powinna działać w dobrym frontendzie: cicho, precyzyjnie i bez zbędnego hałasu.
