Tekst i typografia

Podcast CSS – 036: Text & Typeography

Tekst to jeden z podstawowych elementów składowych internetu.

Podczas tworzenia witryny nie trzeba koniecznie określać stylu tekstu. W rzeczywistości kod HTML ma dość rozsądny styl domyślny.

Tekst będzie jednak prawdopodobnie stanowić większość Twojej witryny, dlatego warto go urozmaicić. Zmieniając kilka podstawowych właściwości, możesz znacznie poprawić wygodę czytania.

W tym module zaczniemy od reguły @font-face, która umożliwia importowanie czcionek niestandardowych na strony internetowe. Dzięki temu uzyskasz potrzebną typografię, niezależnie od czcionek instalowanych przez użytkownika.

Dalej omówimy podstawowe właściwości czcionek CSS, takie jak font-family, font-style, font-weight i font-size. Te podstawowe informacje pozwalają manipulować tekstem zarówno pod kątem stylu, jak i czytelności.

Na koniec wspomnimy o właściwościach poszczególnych akapitów, takich jak text-indent i word-spacing, a następnie zajmiemy się zaawansowanymi tematami, takimi jak zmienne czcionki i pseudoelementy, które pozwalają jeszcze bardziej sprecyzować typografię.

Znajdziesz w nich praktyczne przykłady i wskazówki, które pomogą Ci zrozumieć i wykorzystać te techniki CSS.

Reguła @font-face

Reguła CSS @font-face jest kluczowym elementem projektowania stron internetowych, ponieważ pozwala określać i używać niestandardowych czcionek do wyświetlania tekstu. Wyjątkowość @font-face tkwi w jej wszechstronności: umożliwia pobieranie czcionek ze zdalnego serwera lub z czcionek zainstalowanych 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 wskaźnik wzrostu, wpływając na przestrzeń powyżej punktu odniesienia.

descent-override

Dostosowuje dane dotyczące spadku, wpływając na przestrzeń poniżej wartości bazowej.

font-display

Kontroluje działanie czcionki w zależności od jej stanu pobierania.

font-family

Nadaje czcionce nazwę używaną w właściwościach związanych z czcionkami.

font-stretch

Określa dopuszczalne skalowanie w poziomie, określone jako 1 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

Daje dostęp do funkcji czcionek OpenType.

font-variation-settings

Daje szczegółową kontrolę nad zmiennymi ustawieniami czcionek.

line-gap-override

Zastępuje domyślną lukę wiersza czcionki.

size-adjust

Stosuje współczynnik skalowania do konspektu i danych czcionki.

src

Określa źródło czcionki – lokalne lub zdalne. Jest to wymagane w przypadku reguły @font-face. Łączenie elementów url() i local() w elemencie src to typowa strategia, która w miarę możliwości wykorzystuje lokalną czcionkę, a w razie potrzeby przywraca zdalny plik czcionek. Przeglądarki nadają priorytety zasobach na podstawie kolejności deklaracji, więc właściwość local() powinna zwykle poprzedzać url().

unicode-range

Ogranicza liczbę znaków, z których ma być używana ta czcionka.

Opis

@font-face uwalnia grafików od ograniczeń czcionek „bezpiecznych w internecie” i umożliwia im korzystanie z niestandardowej typografii. Funkcja local() umożliwia wyszukiwanie czcionki na urządzeniu użytkownika bez zakłóceń i nie wymaga połączenia z internetem.

Typy MIME czcionek

Format	Typ MIME
TrueType	font/ttf
OpenType	font/otf
Otwarty format czcionki internetowej	font/woff
Otwarty format czcionki internetowej 2	font/woff2

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

W CSS atrybuty @font-face i font-family są często mylone, ale służą różnym celom.

Jak już wspominaliśmy, reguła @font-face służy do definiowania czcionek niestandardowych, których chcesz użyć w swojej aplikacji internetowej. Informuje przeglądarkę, gdzie pobrać czcionkę i jak wyświetlić ją podczas wczytywania (za pomocą właściwości font-display), a także określa podzbiór znaków do pobrania (za pomocą unicode-range).

font-family jest natomiast właściwością CSS używaną w regule CSS do przypisania do elementu konkretnej czcionki lub listy czcionek. Czcionki wymienione w sekcji font-family mogą być czcionkami internetowymi, czcionki systemowe lub czcionki niestandardowe zdefiniowane za pomocą atrybutu @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 zastosowania obu:

<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 czcionkę „CustomFont” i informuje przeglądarkę, gdzie ją znaleźć. Właściwość font-family stosuje ją następnie do elementu [body], a jeśli „Niestandardowa czcionka” jest niedostępna, jako wartość zastępczą wykorzystamy {8/}.

Zmiana kroju czcionki

Aby zmienić krój czcionki tekstu, użyj font-family.

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

Jeśli używasz font-family, określ co najmniej 1 ogólną rodzinę czcionek, na wypadek gdyby w przeglądarce użytkownika nie były dostępne preferowane przez Ciebie czcionki. Ogólnie domyślna rodzina czcionek zastępcza powinna być podobna do preferowanych przez Ciebie czcionek: font-family: "Helvetica" (rodzina czcionek bezszeryfowa), wtedy wartość zastępcza powinna wynosić sans-serif.

Używaj kursywy i czcionek ukośnych

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

Pogrubienie tekstu

Użyj font-weight, aby ustawić pogrubienie tekstu. Ta usługa 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ą odpowiednikiem wartości liczbowych 400 i 700.

Słowa kluczowe lighter i bolder są obliczane względem elementu nadrzędnego. Przydatny wykres, który pokazuje, jak określa się tę wartość, zawiera artykuł Znaczenie wag względnych przygotowany przez MDN.

Zmiana rozmiaru tekstu

Użyj font-size, aby kontrolować rozmiar elementów tekstowych. Możesz w niej określić długość, wartości procentowe i kilka wartości słów kluczowych.

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

Zmieniaj odstępy między wierszami

Użyj line-height, aby określić wysokość każdego wiersza w elemencie. Ta właściwość może być liczbą, długością, wartością procentową lub słowem kluczowym normal. Aby uniknąć problemów z dziedziczeniem, zwykle zalecamy używanie liczby zamiast długości lub wartości procentowej.

Zmiana odstępów między znakami

Użyj letter-spacing, by określić ilość poziomego odstępu 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 określona wartość zwiększa ilość naturalnej przestrzeni między znakami. W tej demonstracji pokazujemy, jak wybrać pojedynczą literę, aby zobaczyć rozmiar jej skrzynki i to, jak zmienia się po letter-spacing.

zmienianie odstępów między słowami,

Użyj word-spacing, aby zwiększyć lub zmniejszyć odstęp 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 określona przez Ciebie długość dotyczy dodatkowej przestrzeni oprócz zwykłych odstępów. Oznacza to, że word-spacing: 0 jest tożsame z word-spacing: normal.

font skrót

Możesz używać skróconej właściwości font do konfigurowania wielu właściwości związanych z czcionkami naraz. Lista możliwych właściwości to font-family, font-size, font-stretch, font-style, font-variant, font-weight i line-height.

Dokładne informacje o kolejności tych usług znajdziesz w tym artykule: font w MDN.

Zmiana wielkości liter w tekście

Użyj text-transform, by zmienić wielkość liter w tekście bez konieczności zmiany kodu HTML. Ta właściwość akceptuje te wartości słów kluczowych: uppercase, lowercase i capitalize.

Dodawanie do tekstu podkreśleń, podkreśleń i wierszy przekreślonych

Użyj narzędzia text-decoration, aby dodać wiersze do tekstu. Najczęściej stosuje się podkreślenie, ale można też dodawać wiersze nad tekstem lub bezpośrednio w nim.

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

Właściwość 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 ustawia 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 dowolne wartości długości i ustawia szerokość kreski wszystkich dekoracji od text-decoration-line.

Właściwość text-decoration to skrótowy opis wszystkich powyższych właściwości.

Dodawanie wcięcia do tekstu

Użyj text-indent, aby dodać wcięcie do bloków tekstu. Ta właściwość może mieć długość (np. 10px, 2em) lub procent szerokości bloku, który zawiera.

Radzenie sobie z nadmierną lub ukrytą treścią

Użyj znaku text-overflow, aby określić sposób wyświetlania ukrytej treści. Dostępne są 2 opcje: clip (domyślna), która powoduje obcięcie tekstu w punkcie nadmiaru, i ellipsis, która wyświetla wielokropek (...) w miejscu nadmiaru.

Sterowanie odstępem

Właściwość white-space określa sposób obsługi odstępów w elemencie. Więcej informacji znajdziesz w artykule white-space o MDN.

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

Kontroluj sposób podziału słów

Użyj word-break, aby określić, w jaki sposób słowa powinny być „uszkodzone”, jeśli przekraczają linię. Domyślnie przeglądarka nie dzieli słów. Użycie wartości słowa kluczowego break-all dla atrybutu word-break spowoduje, że przeglądarka będzie w razie potrzeby rozdzielać poszczególne słowa na pojedyncze znaki.

Zmiana wyrównania tekstu

text-align pozwala określić wyrównanie tekstu w poziomie w elemencie bloku lub komórce 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 bryły.

Użyj start i end, aby wskazać lokalizację początku i końca wiersza tekstu w bieżącym trybie pisania. Dlatego zapis start oznacza zapis left w języku angielskim oraz jako right w alfabecie arabskim, zapisanym od prawej do lewej (RTL). Są to dopasowania logiczne. Więcej informacji znajdziesz w module Właściwości logiczne.

Użyj klawisza center, aby wyrównać tekst do środka bryły.

Wartość justify automatycznie porządkuje tekst i automatycznie zmienia odstępy między słowami, aby wyrównać tekst z lewą i prawą krawędzią bryły.

Zmienianie kierunku tekstu

Użyj direction, aby ustawić kierunek tekstu: ltr (domyślnie – od lewej do prawej) lub rtl (od prawej do lewej). Niektóre języki, takie jak arabski, hebrajski i perski, są pisane od prawej do lewej, dlatego należy używać direction: rtl. W przypadku języka angielskiego i pozostałych języków zapisywanych od lewej do prawej użyj direction: ltr.

Zmiana przepływu tekstu

Użyj writing-mode, aby zmienić sposób uporządkowania tekstu. Wartość domyślna to horizontal-tb, ale możesz też ustawić wartość writing-mode na vertical-lr lub vertical-rl w przypadku tekstu, który ma być rozwinięty poziomo.

Zmienianie orientacji tekstu

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

Dodawanie cienia do tekstu

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

Aby dowiedzieć się więcej, zajrzyj do sekcji text-shadow naszego modułu Cienie.

Czcionki zmiennych

Zwykle „zwykłe” czcionki wymagają importowania różnych plików dla różnych wersji kroju czcionki, np. pogrubienia, kursywy lub ściśnięcia. Czcionki zmienne to czcionki, które mogą zawierać wiele różnych wariantów kroju czcionki w jednym pliku.

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

Pseudoelementy

Pseudoelementy ::first-letter i ::first-line

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

::selection pseudoelement

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

Gdy używasz tego pseudoelementu, możesz używać tylko niektórych właściwości CSS: color, background-color, text-decoration, text-shadow, stroke-color, fill-color, stroke-width.

font-variant

Właściwość font-variant to skrócony opis kilku właściwości CSS, które umożliwiają wybór wariantów czcionki, takich jak small-caps i slashed-zero. Właściwości CSS uwzględnione w tym skrócie to font-variant-alternates, font-variant-caps, font-variant-east-asian, font-variant-ligatures i font-variant-numeric. Aby dowiedzieć się więcej o korzystaniu z danej usługi, kliknij odpowiedni link.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o typografii w internecie

Zasoby

• W artykule Sprawdzone metody dotyczące czcionek znajdziesz omówienie importowania czcionek i renderowania czcionek oraz inne sprawdzone metody korzystania z czcionek w internecie.
• Podstawowy tekst MDN i style czcionki.