Rozmiar i grubość czcionki
Używać klas od text-sm do text-9xl oraz od font-thin do font-black, aby kontrolować wizualną wyrazistość tekstu.
Rozmiar i grubość czcionki to bezpłatna lekcja Tailwind CSS Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Tailwind CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Tailwind CSS Academy zawiera 4 lekcji w sumie.
Skala rozmiarów czcionki w Tailwind
Ustawiaj rozmiar tekstu za pomocą skali text-*, od text-xs do text-9xl. Wybieraj spośród tych wartości zamiast wpisywać piksele, a typografia pozostanie spójna.
<p class="text-xs">Extra Small (12px)</p>
<p class="text-sm">Small (14px)</p>
<p class="text-base">Base (16px)</p>
<p class="text-lg">Large (18px)</p>
<p class="text-xl">Extra Large (20px)</p>
<p class="text-2xl">2XL (24px)</p>
<p class="text-4xl">4XL (36px)</p>
<p class="text-6xl">6XL (60px)</p>Rozmiary tekstu display i hero
W przypadku dużego tekstu display w sekcjach hero użyj text-7xl, text-8xl lub text-9xl. Połącz je z font-extrabold i tracking-tight, aby nagłówki przyciągały uwagę.
<h1 class="text-7xl font-black tracking-tight text-gray-900">
Make it big.
</h1>Klasy utility grubości czcionki
Kontroluj grubość za pomocą font weight: font-normal dla tekstu głównego, font-semibold dla etykiet, font-bold dla nagłówków oraz font-extrabold lub font-black dla mocnego wyróżnienia.
<p class="font-thin">Thin (100)</p>
<p class="font-light">Light (300)</p>
<p class="font-normal">Normal (400)</p>
<p class="font-medium">Medium (500)</p>
<p class="font-semibold">Semibold (600)</p>
<p class="font-bold">Bold (700)</p>
<p class="font-extrabold">Extrabold (800)</p>
<p class="font-black">Black (900)</p>Łączenie rozmiaru i grubości
Rozmiar i grubość są niezależne, więc można je łączyć: text-sm font-medium dla etykiety w nawigacji i text-4xl font-bold dla nagłówka. Razem budują hierarchię.
<!-- Article typographic hierarchy -->
<h1 class="text-4xl font-bold text-gray-900 mb-2">Main Headline</h1>
<h2 class="text-2xl font-semibold text-gray-700 mb-4">Section Title</h2>
<p class="text-base font-normal text-gray-600 mb-2">Body paragraph text...</p>
<span class="text-xs font-medium text-gray-400">Caption or metadata</span>Responsywne rozmiary czcionki
Typografia może skalować się wraz z ekranem. Dodaj do dowolnego rozmiaru prefiks punktu przerwania, taki jak md: — text-3xl md:text-5xl będzie mały na telefonach i duży na komputerach.
<h1 class="text-2xl md:text-4xl lg:text-6xl font-extrabold text-gray-900">
Scales with the screen
</h1>Styl czcionki: kursywa
Dodaj italic, aby pochylić tekst, lub not-italic, aby przywrócić standardowy styl. To świetne rozwiązanie dla cytatów i przypisów — italic font-light text-gray-500 zapewnia klasyczny wygląd opinii klientów.
<blockquote class="italic font-light text-gray-500 text-lg border-l-4 border-indigo-400 pl-4">
'Tailwind makes styling enjoyable again.'
</blockquote>
<cite class="text-sm font-medium text-gray-700">— A happy developer</cite>Wariant liczbowy czcionki
W przypadku liczb tabular-nums nadaje każdej cyfrze tę samą szerokość, dzięki czemu ceny i statystyki są równo ustawione w tabelach i kolumnach. To drobny szczegół, który zapewnia bardzo uporządkowany wygląd.
<!-- Tabular numbers align in columns -->
<table>
<tr>
<td class="tabular-nums text-right">1,234.56</td>
</tr>
<tr>
<td class="tabular-nums text-right">98,765.00</td>
</tr>
</table>Praktyka: typografia nawigacji
Linki nawigacyjne dobrze wyglądają w małym, średnio pogrubionym stylu: text-sm font-medium. Wyróżnij aktywny link, zmieniając go na font-semibold text-indigo-600.
<nav class="flex gap-6">
<a href="#" class="text-sm font-medium text-gray-600 hover:text-gray-900">Home</a>
<a href="#" class="text-sm font-semibold text-indigo-600">Products</a>
<a href="#" class="text-sm font-medium text-gray-600 hover:text-gray-900">About</a>
</nav>Praktyka: tekst główny artykułu
Wygodny tekst główny to text-base lub text-lg, z większymi odstępami i text-gray-700 zamiast ostrej czerni. Dodaj max-w-prose, aby wiersze miały wygodną do czytania szerokość.
<article class="max-w-prose mx-auto">
<p class="text-lg font-normal text-gray-700 leading-relaxed">
This is body text set at a comfortable reading size.
The max-w-prose constraint keeps lines short enough
to read without losing your place.
</p>
</article>Praktyka: typografia prezentacji danych
W dashboardach liczby powinny przyciągać uwagę: text-3xl font-bold text-gray-900 dla wartości oraz mniejsza etykieta text-sm uppercase tracking-wider umieszczona nad nią.
<div class="text-center">
<p class="text-sm font-medium text-gray-500 uppercase tracking-wider">
Total Users
</p>
<p class="text-3xl font-bold text-gray-900 tabular-nums">
24,781
</p>
</div>Podstawowa ściąga rozmiarów czcionki
Szybka mapa mentalna: text-xs służy do podpisów, text-base do tekstu głównego, text-2xl do text-4xl do nagłówków, a text-5xl i większe rozmiary do tekstu hero. Każdy z nich należy połączyć z odpowiednią grubością.
Szybkie sprawdzenie
Szybkie sprawdzenie! Przekonaj się, czy rozmiar i grubość zostały zapamiętane. 🔤
Podsumowanie lekcji
Świetnie! text-* steruje rozmiarem, font-thin do font-black ustawia grubość, a połączenie rozmiaru, grubości i koloru buduje hierarchię. Następnie: kolor tekstu i krycie.
Ucz się HTML dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 30
- Lekcje
- 120
Często zadawane pytania
Czy lekcja „Rozmiar i grubość czcionki” jest bezpłatna?
Tak — pełny tekst „Rozmiar i grubość czcionki” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Tailwind CSS Academy, przejdź na CoddyKit PRO. Kurs Tailwind CSS Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Rozmiar i grubość czcionki”?
Używać klas od text-sm do text-9xl oraz od font-thin do font-black, aby kontrolować wizualną wyrazistość tekstu. Ćwiczysz Tailwind CSS Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Tailwind CSS Academy?
Nie wymagamy żadnego doświadczenia. Tailwind CSS Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.
Ile czasu zajmuje lekcja „Rozmiar i grubość czcionki”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Tailwind CSS Academy?
Tak. Każda lekcja Tailwind CSS Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Rozmiar i grubość czcionki
- Kolor i krycie tekstu
- Wysokość wiersza i odstępy między literami
- Wyrównanie i dekorowanie tekstu