Właściwości fontów
Wykorzystanie właściwości fontów pozwalają na szybkie i łatwe zarządzanie typografią na stronie internetowej. Umożliwiają zmiany rodziny fontów, rozmiaru, grubości, stylu, odstępów między literami czy wierszami, a także manipulowanie tekstem w różnorodny sposób. Właściwości umożliwiają twórcze wykorzystanie fontów w kontekście projektowania responsywnego, poprawiając czytelność i dostosowując tekst do różnych rozdzielczości ekranów oraz urządzeń. Dobra znajomość właściwości fontów jest kluczem do tworzenia atrakcyjnych, funkcjonalnych i unikalnych stron internetowych, które wyróżnią się na tle konkurencji i spełnią oczekiwania użytkowników.
font-family
Właściwość font-family pozwala na określenie rodziny fontów używanych w danym elemencie. Rodzina fontów to zestaw czcionek o podobnym wyglądzie, ale o różnych grubościach i stylach. Aby zapewnić poprawne wyświetlanie strony na różnych urządzeniach, zaleca się podanie listy fontów, gdzie pierwsza czcionka jest preferowaną, a kolejne są alternatywami.
p {
font-family: "Times New Roman", Times, serif;
}W powyższym przykładzie, przeglądarka spróbuje użyć czcionki “Times New Roman”. Jeśli ta czcionka nie jest dostępna, przeglądarka użyje czcionki “Times” lub czcionki z rodziny “serif”.
font-size
Właściwość font-size pozwala na określenie rozmiaru fontów dla danego elementu. Rozmiar czcionki można wyrazić w różnych jednostkach, takich jak piksele px, punkty pt, em, rem, procenty % czy jednostki viewport vw, vh. Wybór jednostki wpływa na skalowanie tekstu w różnych kontekstach i na różnych urządzeniach.
p {
font-size: 1.2em;
}W powyższym przykładzie, rozmiar czcionki akapitu zostanie ustawiony na 1.2 razy większy niż rozmiar czcionki elementu nadrzędnego.
font-weight
Właściwość font-weight pozwala na kontrolowanie grubości czcionki. Można ustawić wartość numeryczną od 100 do 900, gdzie 400 to normalna grubość, a 700 to pogrubienie lub słowną — normal, bold, bolder, lighter.
h1 {
font-weight: 700;
}W powyższym przykładzie, nagłówek h1 będzie wyświetlany z pogrubioną czcionką.
font-style
Właściwość font-style pozwala na określenie stylu czcionki, takiego jak kursywa, normalny lub nachylony. Możliwe wartości do ustawienia to — normal, italic oraz oblique.
blockquote {
font-style: italic;
}W powyższym przykładzie, tekst w elemencie blockquote zostanie wyświetlony w kursywie.
Warto zapamiętać
Właściwości fontów są kluczowe dla tworzenia atrakcyjnych i czytelnych stron internetowych. Właściwości font-family, font-size, font-weight oraz font-style pozwalają na kontrolowanie wyglądu tekstu na stronie, a ich odpowiednie zastosowanie pozwala na osiągnięcie spójności wizualnej i dostosowanie strony do różnych urządzeń. Właściwości fontów pozwalają na tworzenie nowoczesnych, spójnych i przyjaznych dla użytkownika interfejsów.
Czy ten poradnik był pomocny?
Mateusz Turek
Swoją przygodę z projektowaniem stron internetowych rozpocząłem z kursem od Komputer Świat wydanym w marcu 2003 roku w formie małej książeczki. Na przestrzeni 20 lat zaprojektowałem niezliczoną ilość witryn i aplikacji internetowych. Projektowałem dla małych i dużych firm takich jak Oriflame, Top Market, Bezpieczna Rodzina czy Helping Hand.
