Tekst i typografia

The CSS Podcast - 036: Text & Typography

Tekst jest jednym z podstawowych elementów składowych internetu.

Podczas tworzenia witryny nie musisz koniecznie stylizować tekstu. HTML ma całkiem rozsądne domyślne style.

Tekst stanowi jednak prawdopodobnie większość Twojej witryny, więc warto dodać do niego trochę stylów, aby go uatrakcyjnić. Zmieniając kilka podstawowych właściwości, możesz znacznie poprawić komfort czytania dla użytkowników.

W tym module zaczniemy od reguły @font-face, która umożliwia importowanie niestandardowych czcionek na strony internetowe. Dzięki temu masz pewność, że używasz dokładnie takiej typografii, jakiej potrzebujesz, niezależnie od czcionek zainstalowanych przez użytkownika.

Następnie omówimy podstawowe właściwości czcionek CSS, w tym font-family, font-style, font-weight i font-size. Te podstawy przygotowują grunt pod manipulowanie tekstem pod kątem stylu i czytelności.

Omówimy też właściwości dotyczące akapitów, takie jak text-indent i word-spacing, a na koniec przejdziemy do zaawansowanych tematów, takich jak czcionki zmienne i pseudoelementy, które pozwalają jeszcze bardziej dopracować typografię.

W trakcie szkolenia podamy praktyczne przykłady i wskazówki, które pomogą Ci utrwalić wiedzę i nauczyć się stosować te techniki CSS.

Reguła @font-face

Reguła CSS @font-face jest kluczowa w projektowaniu stron internetowych, ponieważ umożliwia określanie i używanie niestandardowych czcionek do wyświetlania tekstu. Zaletą @font-face jest jego wszechstronność: umożliwia pobieranie czcionek z serwera zdalnego lub z czcionki zainstalowanej na urządzeniu użytkownika.

Składnia

@font-face {
  font-family: "Trickster";
  src:
    local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1),
    url("trickster-outline.otf") format("opentype"),
    url("trickster-outline.woff") format("woff")
}

Deskryptory

ascent-override
Dostosowuje dane dotyczące wznoszenia, co ma wpływ na przestrzeń nad linią bazową.
descent-override
Dostosowuje wartość descent, co wpływa na odstęp poniżej linii bazowej.
font-display
Określa sposób wyświetlania czcionki w zależności od stanu pobierania.
font-family
Określa nazwę czcionki do użycia we właściwościach związanych z czcionkami.
font-stretch
Ustawia dopuszczalne skalowanie w poziomie, określone jako pojedyncza wartość lub zakres.
font-style
Określa styl czcionki, obsługując zakresy kątów dla stylów ukośnych.
font-weight
Określa grubość czcionki lub zakres dostępnych grubości.
font-feature-settings
Umożliwia dostęp do funkcji czcionek OpenType.
font-variation-settings
Umożliwia precyzyjne sterowanie ustawieniami czcionki zmiennej.
line-gap-override
Zastępuje domyślną przerwę między wierszami czcionki.
size-adjust
Stosuje współczynnik skalowania do konturu i danych czcionki.
src
Określa źródło czcionki, lokalne lub zdalne. Jest to wymagane w przypadku reguły @font-face. Łączenie url() i local() w ramach src to powszechna strategia, która używa lokalnej czcionki, jeśli jest dostępna, a w przypadku jej braku wraca do zdalnego pliku czcionki. Przeglądarki ustalają priorytety zasobów na podstawie kolejności deklaracji, więc local()powinno zwykle poprzedzać url().
unicode-range
Ogranicza znaki, dla których ma być używana ta czcionka.

Opis

@font-face uwalnia projektantów od ograniczeń czcionek „bezpiecznych dla internetu”, ponieważ umożliwia im stosowanie niestandardowej typografii. Funkcja local() umożliwia wyszukiwanie czcionki na urządzeniu użytkownika, co zapewnia płynne działanie, które nie musi zależeć od połączenia z internetem.

.

Typy MIME czcionek

Format Typ MIME
TrueType font/ttf
OpenType font/otf
Web Open Font Format font/woff
Web Open Font Format 2 font/woff2

Różnica między @font-face a font-family

W usłudze porównywania cen terminy @font-face i font-family są często mylone, ale służą do różnych celów.

Jak już wspomnieliśmy, @font-face to reguła służąca do definiowania niestandardowych czcionek, których chcesz używać w aplikacji internetowej. Informuje przeglądarkę, skąd pobrać czcionkę, jak ją wyświetlać podczas wczytywania (za pomocą właściwości font-display) i który podzbiór znaków pobrać (za pomocą unicode-range).

Z kolei font-family to właściwość CSS używana w regule CSS do przypisywania elementowi określonej czcionki lub listy czcionek. Czcionki wymienione w sekcji font-family mogą być bezpiecznymi czcionkami internetowymi, czcionkami systemowymi lub czcionkami niestandardowymi zdefiniowanymi za pomocą @font-face.

Podsumowując, @font-face deklaruje czcionkę i nadaje jej nazwę, a font-family stosuje tę zadeklarowaną czcionkę do elementów HTML.

Oto przykład użycia obu tych metod:

<table>
  <thead>
    <tr>
      <th><p><pre>
@font-face {
  font-family: "CustomFont";
  src: url("customfont.woff2") format("woff2");
}

body {
  font-family: "CustomFont", Arial, sans-serif;
}

W tym przykładzie @font-face definiuje „CustomFont” i informuje przeglądarkę, gdzie go szukać. Właściwość font-family stosuje ją do elementu body, a w przypadku niedostępności czcionki „CustomFont” używa czcionki Arial.

Zmiana kroju pisma

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Użyj ikony font-family, aby zmienić krój tekstu.

Właściwość font-family akceptuje rozdzieloną przecinkami listę ciągów znaków, które odnoszą się do konkretnych lub ogólnych rodzin czcionek. Konkretne rodziny czcionek to ciągi znaków ujęte w cudzysłów, np. „Helvetica”, „EB Garamond” lub „Times New Roman”. Ogólne rodziny czcionek to słowa kluczowe takie jak serif, sans-serif i monospace (pełną listę opcji znajdziesz w MDN). Przeglądarka wyświetli pierwszy dostępny krój pisma z podanej listy.

Jeśli używasz font-family, podaj co najmniej jedną ogólną rodzinę czcionek na wypadek, gdyby przeglądarka użytkownika nie miała preferowanych przez Ciebie czcionek. Ogólnie rzecz biorąc, zastępcza ogólna rodzina czcionek powinna być podobna do preferowanych czcionek: jeśli używasz font-family: "Helvetica" (rodziny czcionek bezszeryfowych), zastępcza powinna być sans-serif.

Używanie czcionek kursywnych i pochylonych

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Użyj tagu font-style, aby określić, czy tekst ma być pisany kursywą. font-style akceptuje jedno z tych słów kluczowych: normal, italic i oblique.

Pogrubianie tekstu

Browser Support

  • Chrome: 2.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Użyj font-weight, aby ustawić „grubość” tekstu. Ta właściwość akceptuje wartości słów kluczowych (normal, bold), względne wartości słów kluczowych (lighter, bolder) i wartości liczbowe (100–900).

Słowa kluczowe normal i bold są odpowiednikami wartości liczbowych 400 i 700.

Słowa kluczowe lighter i bolder są obliczane względem elementu nadrzędnego. Więcej informacji o tym, jak jest określana ta wartość, znajdziesz w artykule Znaczenie względnych wag w MDN.

Zmiana rozmiaru tekstu

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Użyj font-size, aby kontrolować rozmiar elementów tekstowych. Ta właściwość akceptuje wartości długości, wartości procentowe i kilka wartości słów kluczowych.

Oprócz wartości długości i procentowych atrybut font-size akceptuje niektóre bezwzględne wartości słów kluczowych (xx-small, x-small, small, medium, large, x-large, xx-large) i kilka względnych wartości słów kluczowych (smaller, larger). Wartości względne są względne w stosunku do atrybutu font-size elementu nadrzędnego.

Zmiana odstępów między wierszami

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Użyj line-height, aby określić wysokość każdego wiersza w elemencie. Ta właściwość akceptuje liczbę, długość, wartość procentową lub słowo kluczowe normal. Zwykle zalecamy używanie liczby zamiast długości lub wartości procentowej, aby uniknąć problemów z dziedziczeniem.

Zmienianie odstępów między znakami

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Użyj tagu letter-spacing, aby kontrolować ilość miejsca w poziomie między znakami w tekście. Ta właściwość akceptuje wartości długości, takie jak em, px i rem.

Pamiętaj, że podana wartość zwiększa ilość naturalnej przestrzeni między znakami. W poniższym demo spróbuj wybrać poszczególne litery, aby zobaczyć rozmiar ich obramowania i jak zmienia się on wraz z wartością letter-spacing.

Zmienianie odstępów między słowami

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Użyj word-spacing, aby zwiększyć lub zmniejszyć długość odstępu między poszczególnymi słowami w tekście. Ta właściwość akceptuje wartości długości, takie jak em, px i rem. Pamiętaj, że podana długość dotyczy dodatkowej przestrzeni poza normalnym odstępem. Oznacza to, że word-spacing: 0 jest równoważne word-spacing: normal.

font skrót

Możesz użyć skróconej właściwości font, aby ustawić wiele właściwości związanych z czcionką naraz. Lista możliwych właściwości to font-family, font-size, font-stretch, font-style, font-variant, font-weight i line-height.

Szczegółowe informacje o kolejności tych właściwości znajdziesz w artykule font w MDN.

## Zmiana wielkości liter

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Użyj właściwości [`text-transform`](https://developer.mozilla.org/docs/Web/CSS/text-transform), aby zmienić wielkość liter w tekście bez konieczności modyfikowania kodu HTML. Ta właściwość akceptuje te wartości słów kluczowych: „uppercase”, „lowercase” i „capitalize”.

Dodawanie podkreśleń, nadkreśleń i przekreśleń do tekstu

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Aby dodać wiersze do tekstu, użyj text-decoration. Najczęściej używane są podkreślenia, ale możesz też dodać linie nad tekstem lub przez niego.

Właściwość text-decoration jest skrótem od bardziej szczegółowych właściwości opisanych poniżej.

Usługa text-decoration-line akceptuje słowa kluczowe underline, overline i line-through. Możesz też określić wiele słów kluczowych w wielu wierszach.

Właściwość text-decoration-color określa kolor wszystkich dekoracji z text-decoration-line.

Właściwość text-decoration-style akceptuje słowa kluczowe solid, double, dotted, dashed i wavy.

Właściwość text-decoration-thickness akceptuje wartości długości i ustawia szerokość linii wszystkich dekoracji z text-decoration-line.

Właściwość text-decoration jest skrótem wszystkich poprzednich właściwości.

Dodawanie wcięcia w tekście

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Użyj text-indent, aby dodać wcięcie do bloków tekstu. Ta właściwość przyjmuje wartość długości (np. 10px, 2em) lub procentową szerokość bloku zawierającego.

Radzenie sobie z treściami, które nie mieszczą się w widocznym obszarze lub są ukryte

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 7.
  • Safari: 1.3.

Source

Użyj text-overflow, aby określić, jak mają być reprezentowane ukryte treści. Dostępne są 2 opcje: clip (domyślna), która powoduje obcięcie tekstu w miejscu, w którym przekracza on limit, oraz ellipsis, która powoduje wyświetlenie wielokropka (…) w miejscu, w którym tekst przekracza limit.

Kontrolowanie białych znaków

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Właściwość white-space służy do określania sposobu obsługi białych znaków w elemencie. Więcej informacji znajdziesz w white-spaceartykule na MDN.

white-space: pre może być przydatne do renderowania grafiki ASCII lub starannie wciętych bloków kodu.

Kontrolowanie podziału wyrazów

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 15.
  • Safari: 3.

Source

Użyj word-break, aby zmienić sposób dzielenia słów, które nie mieszczą się w wierszu. Domyślnie przeglądarka nie dzieli wyrazów. Użycie wartości słowa kluczowego break-all dla word-break spowoduje, że przeglądarka w razie potrzeby podzieli słowa na poszczególne znaki.

Zmiana wyrównania tekstu

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Użyj text-align, aby określić wyrównanie poziome tekstu w bloku lub elemencie komórki tabeli. Ta właściwość akceptuje wartości słów kluczowych left, right, start, end, center, justify i match-parent.

Wartości left i right wyrównują tekst odpowiednio do lewej i prawej strony bloku.

Użyj symboli start i end, aby przedstawić położenie początku i końca wiersza tekstu w bieżącym trybie pisania. Dlatego w języku angielskim znak start odpowiada znakowi left, a w języku arabskim, który jest zapisywany od prawej do lewej (RTL), znakowi right. Są to wyrównania logiczne. Więcej informacji znajdziesz w module Właściwości logiczne.

Użyj ikony center, aby wyrównać tekst do środka bloku.

Wartość justify porządkuje tekst i automatycznie zmienia odstępy między wyrazami, tak aby tekst był wyrównany do lewej i prawej krawędzi bloku.

Kontrolowanie sposobu zawijania tekstu

Browser Support

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 121.
  • Safari: 17.4.

Source

Użyj text-wrap, aby zmienić sposób zawijania tekstu w elemencie.

Słowa kluczowe akceptowane w przypadku tej właściwości to wrap, nowrap, balance i stable. Wartość domyślna to wrap, która minimalizuje przepełnienie, zawijając tekst w wierszach wzdłuż normalnych spacji i podziałów wyrazów.

Możesz użyć słowa kluczowego nowrap, aby uzyskać dokładnie odwrotny efekt i zapobiec dzieleniu tekstu na wiersze, co może powodować przepełnienie.

Aby uzyskać taką samą ilość tekstu w każdym wierszu, np. podczas pisania nagłówków, użyj słowa kluczowego balance. Aby zwiększyć wydajność, przeglądarki będą stosować tę wartość tylko w przypadku elementów z maksymalnie 6 wierszami tekstu.

Słowo kluczowe stable działa podobnie jak wrap, ale jest przeznaczone do używania z tekstem contenteditable. Gdy ustawisz text-wrap: stable, wiersze nad edytowaną treścią nie będą się przesuwać.

Czasami długie ciągi znaków bez wyraźnego punktu podziału mogą przepełniać kontenery. Aby kontrolować sposób podziału tego typu tekstu, użyj elementu overflow-wrap.

Browser Support

  • Chrome: 23.
  • Edge: 18.
  • Firefox: 49.
  • Safari: 7.

Source

Słowa kluczowe, których możesz użyć w przypadku tej usługi, to normal, break-word i anywhere. Domyślne ustawienie to normal. Tekst nie będzie przenoszony do następnego wiersza, chyba że zawiera spacje lub naturalne punkty podziału.

Wartości anywhere i break-word dodają punkty przerwania w dowolnym miejscu w ciągu znaków, aby zapobiec przepełnieniu. Słowa kluczowe różnią się sposobem reagowania na rozmiar min-contentwewnętrzny lub jawny. Słowo kluczowe anywhere umożliwia wszystkie możliwe miękkie podziały wiersza. Wartość break-word nie jest odpowiednia i sprawi, że tekst będzie długi jak najdłuższe słowo.

Zmiana kierunku tekstu

Browser Support

  • Chrome: 2.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Użyj direction, aby ustawić kierunek tekstu: ltr (od lewej do prawej, domyślnie) lub rtl (od prawej do lewej). Niektóre języki, takie jak arabski, hebrajski czy perski, są zapisywane od prawej do lewej, więc należy użyć direction: rtl. W przypadku języka angielskiego i innych języków pisanych od lewej do prawej użyj znaku direction: ltr.

Zmiana przepływu tekstu

Browser Support

  • Chrome: 48.
  • Edge: 12.
  • Firefox: 41.
  • Safari: 10.1.

Source

Użyj writing-mode, aby zmienić sposób przepływu i ułożenia tekstu. Wartość domyślna to horizontal-tb, ale możesz też ustawić writing-mode na vertical-lr lub vertical-rl w przypadku tekstu, który ma być wyświetlany poziomo.

Zmiana orientacji tekstu

Browser Support

  • Chrome: 48.
  • Edge: 79.
  • Firefox: 41.
  • Safari: 14.

Source

Użyj text-orientation, aby określić orientację znaków w tekście. Prawidłowe wartości tego atrybutu to mixed i upright. Ta właściwość jest istotna tylko wtedy, gdy element writing-mode ma wartość inną niż horizontal-tb.

Dodawanie cienia do tekstu

Browser Support

  • Chrome: 2.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 1.1.

Source

Użyj text-shadow, aby dodać cień do tekstu. Ta właściwość oczekuje 3 długości (x-offset, y-offset i blur-radius) oraz koloru.

Więcej informacji znajdziesz w sekcji text-shadow naszego modułu dotyczącego cieni.

Czcionki zmienne

Zwykle czcionki „normalne” wymagają importowania różnych plików dla różnych wersji kroju pisma, takich jak pogrubiony, kursywa czy skondensowany. Czcionki zmienne to czcionki, które mogą zawierać wiele różnych wariantów kroju pisma w jednym pliku.

Roboto Flex w losowych kombinacjach szerokości i grubości

Więcej informacji znajdziesz w tym artykule o czcionkach zmiennych.

Pseudoelementy

::first-letter i ::first-line pseudo-elementy

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Pseudoelementy ::first-letter i ::first-line są odpowiednio kierowane na pierwszą literę i pierwszy wiersz elementu tekstowego.

::selection pseudo-element

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 62.
  • Safari: 1.1.

Source

Użyj pseudoelementu ::selection, aby zmienić wygląd tekstu wybranego przez użytkownika.

W przypadku tego pseudoelementu można używać tylko określonych właściwości CSS: color, background-color, text-decoration, text-shadow, stroke-color, fill-color, stroke-width.

font-variant

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Właściwość font-variant to skrót kilku właściwości CSS, które umożliwiają wybieranie wariantów czcionki, takich jak small-caps i slashed-zero. Ten skrót obejmuje właściwości CSS font-variant-alternates, font-variant-caps, font-variant-east-asian, font-variant-ligatures i font-variant-numeric. Kliknij linki przy poszczególnych właściwościach, aby dowiedzieć się więcej o ich użyciu.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o typografii w internecie

Które z tych słów kluczowych można użyć jako font-family ogólnego słowa zastępczego?

serif
Dobrze!
monospace
Dobrze!
italic
Spróbuj ponownie. italic jest prawidłowym słowem kluczowym dla font-style, a nie dla font-family.
sci-fi
Spróbuj ponownie. fantasy jest jednak prawidłową kreacją zastępczą dla font-family.
sans-serif
Dobrze!
helvetica
Spróbuj ponownie. "Helvetica" nie jest ogólnym słowem kluczowym, ale odnosi się do konkretnej rodziny czcionek.

Które wyrażenie służy do przekształcenia pierwszej litery każdego słowa na wielką literę? np. This is a sentence. ➡ This Is A Sentence.

text-capitalize: true;
Spróbuj ponownie.
text-case: capitalize;
Spróbuj ponownie.
text-transform: capitalize;
Dobrze!
font-style: capitals;
Spróbuj ponownie.
font-variant: capitalize;
Spróbuj ponownie.

Prawda czy fałsz: użyj text-orientation, aby wyrównać tekst do lewej, prawej lub środka.

Prawda
Spróbuj ponownie. text-orientation zmienia obrót liter w wierszu.
Fałsz
Dobrze! text-orientation zmienia obrót liter w wierszu. Użyj text-align, aby wyrównać tekst do lewej, prawej lub środka (i nie tylko).

Której właściwości CSS można użyć, aby zmienić odstęp między wierszami tekstu?

line-spacing
Spróbuj ponownie.
leading
Spróbuj ponownie. Interlinia to prawidłowe określenie odstępu między wierszami w typografii, ale nie jest to prawidłowa właściwość CSS.
baseline-distance
Spróbuj ponownie.
line-height
Dobrze!

Zasoby