Główne zdjęcie witryny
Ludzie są gotowi wierzyć we wszystko, tylko nie w prawdę. – Carlos Ruiz Zafón

Wprowadzenie do typografii CSS

Typografia, lecz okiem komputera

Jak podaje Wikipedia typografia nie posiada jednej definicji. Za jedną z trafniejszych jest nią projektowanie ułatwiające ogólnie rozumiane czytanie i odbiór. W najszerszym ujęciu zajmuje się ona doborem pisma, jego użyciem i składem w jego wizualnym wymiarze, a także ustalaniem optymalnych norm pisarskich. Ponieważ typografia jest ważnym narzędziem w komunikacji wizualnej, webdesign to w znacznej mierze praca z tekstem umieszczonym na stronie internetowej. Tekst w stopniu większym niż niemal wszystkie inne czynniki świadczy o jakości tego, co strona oferuje. Co prawda, w tym poradniku nie nauczę Cię umiejętności dobrego doboru czcionki, ale przedstawię Ci podstawową wiedzę na temat pisma komputerowego, a także wskazówki właściwego formatowania tekstu, które są kluczowe do tworzenia stron o profesjonalnym wyglądzie.

Wprowadzenie

Czcionka (ang. Font) jest zbiorem liczb, liter i symboli o wyjątkowym wyglądzie. Na podstawie jej ogólnego wyglądu każda przynależy do jednego z podstawowego kroju, np. szeryfowego, bezszeryfowego lub maszynowego (zaraz wyjaśnię co to znaczy). Każdy krój dokładniej jest opisywany poprzez rodzinę do której jest zaliczany, np. Times lub Helvetica. Z kolei na rodzinę składają się konkretne poszczególne czcionki, które mają swoje odmiany (i oczywiście nazwy), takie jak np. Times Roman, Times Bold, czy też Helvetica Condensed, itp. Natomiast tekst odnosi się do słów i znaków. Tekstem jest ten akapit i tytuł rozdziału, a to jaką czcionką są zapisane, to zupełnie inna sprawa.

Myśl o tym tak, że style czcionki, takie jak pogrubienie i kursywa możesz nadawać pojedynczym znakom, ale właściwości tekstu, takie jak interlinia i wcięcie mają sens jedynie w odniesieniu do jakiegoś bloku tekstu, takie jak nagłówek i akapit.

Najważniejsze i najpopularniejsze czcionki

Na samym początku chciałbym Ci wyjaśnić jakie istnieją i czym się charakterują podstawowe rodziny czcionek:

  • Szeryfowe (w CSS: serif) – litery krojów szeryfowych mają drobne szczegóły na końcówkach znaków:
    • Times New Roman
    • Georgia
    • Palatino
  • Bezszeryfowe (w CSS: sans-serif) – litery krojów bezszeryfowych nie mają drobnych szczegółów na końcówkach znaków:
    • Arial
    • Arial Black
    • Arial Narrow
    • Tahoma
    • Trebuchet MS
    • Verdana
  • Maszynowe (w CSS: monospace) – litery krojów maszynowych zajmują jednakową ilość miejsca w poziomie:
    • Courier New
    • Lucida Console
  • Kursywowe (w CSS: cursive) – litery zapisane krojem kursywym wyglądają jakby pisano je odręcznie:
    • Comic Sans MS
  • Ozdobne (w CSS: fantasy) – są to kroje, które nie pasują do innych kategorii (zwykle są dość dziwaczne):
    • Impact

Powyżej wymieniłem najczęściej spotykane czcionki we wszystkich systemach operacyjnych – tzn. nie te najpopularniejsze, ale te najbardziej pewne prawidłowego działania w przeglądarce internetowej użytkownika końcowego. Tak na prawdę te fonty stosuje się jako rozwiązanie awaryjne i od razu mam zamiar Cię pocieszyć, że obecnie istnieją aż trzy możliwości wyboru źródła czcionek:

  • Czcionki zainstalowane w systemie operacyjnym użytkownika – dawno temu były to jedyne czcionki, które można było używać na stronach interentowych, a obecnie zwykle są to wyżej wymienione czcionki awaryjne.
  • Czcionki znajdujące się na zewnętrznych serwisach takich jak Google Fonts, gdzie znajdują są setki darmowych polskich fontów, które możesz podłączyć do swojej strony za pomocą znacznika HTML link, bądź za pomocą reguły CSS @import, a nawet pobrać je na swój komputer.
  • Czcionki znajdujące się na Twoim serwerze HTTP i przekazywane użytkownikowi za pośrednictwem Twojej strony internetowej wykorzystując regułę CSS @font-face – to rozwiązanie daje nieograniczone możliwości doboru fontów, lecz zanim zdecydujesz się ich użyć na swojej stronie internetowej, zapoznaj się z licencją!

Obojętnie, na jakikolwiek zdecydujesz się sposób doboru czcionki, musisz pamiętać o wymienieniu także innych zapasowych fontów, na wypadek gdyby użytkownik nie dysponował preferowanym. Można to uczynić według poniższego przykładu w CSS:

body {
	font-family: "trebuchet ms", tahoma, sans-serif;
}

Powyższy kod mówi przeglądarce: „Wyświetl ten dokument w foncie Trebuchet MS, a jeśli nie ma go w systemie, to w Tahoma, a jeśli żadnego z tych fontów nie ma, to użyj dowolnego fonta bezszeryfowego jaki znajdziesz”.

Bardzo ważne jest to, by ostatnia pozycja deklaracji font-family określała ogólną rodzinę czcionki jako ostatnią deskę ratunku – i to bez względu na wykorzystany sposób wskazywania źródła czcionek.
Najpopularniejsze polskie czcionki w Google Fonts
Najpopularniejsze polskie czcionki w Google Fonts

Obok (lub powyżej – jeśli przeglądasz tę stronę np. na smartfonie) przedstawiłem kilkanaście najpopularniejszych czcionek z polskimi znakami diakrytycznymi dostępnych w usłudze Google Fonts. Wszystkie są udostępniane na otwartej licencji (ang. Open source), dlatego nie posiadają żadnych ograniczeń co do ich wykorzystania – nawet w przypadku użytku komercyjnego! Ponadto wykazują pełną kompatybilność ze wszystkimi wiodącymi przeglądarkami internetowymi, dlatego wystarczy wprowadzić do swojej strony WWW jedną linijkę kodu HTML lub CSS, a Google sam zadba aby wybrana czcionka została prawidłowo wyświetlona na naszej stronie. Jeśli zdecydujesz się na jakąś czcionkę z przedstawionej przeze mnie listy, istnieje duże prawdopodobieństwo, że wczyta się znacznie szybciej niż mogło się wydawać, ponieważ mogła już być kiedyś pobrana przez przeglądarkę internetową z innej strony WWW. Z tego względu nie polecam pobierania i umieszczania ich na własnym hostingu – poza tym Google ma wystarczająco szybkie serwery. 🙂 A tak dla ciekawskich: ten tekst, który właśnie czytasz jest sformatowany najpopularniejszą polską czcionką Google'a, czyli Roboto.

Klasyczna stylizacja tekstu

Na podstawie książki Charles'a Wyke-Smith'a pt. „CSS. Witryny internetowe szyte na miarę. Autorytety informatyki. Wydanie III” przedstawię krok po kroku prosty sposób na sformatowanie krótkiego tekstu (przeredagowanego na potrzeby przykładu), którym będzie fragment powieści Arthur'a Conan'a Doyle'a pt. „Pies Baskerville'ów”. Pokażę Ci szereg technik, które pozwalają na uzyskanie wysokiej jakości typografii. Najpierw jednak zaznajomię Cię ze strukturą tworzonej strony internetowej – oto kod HTML:

<!doctype html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title>Typografia CSS</title>
<style>
<!-- Styl CSS -->
</style>
</head>
<body>
<h2>Fragment powieści</h2>
<h1>Pies Baskervilleów</h1>
<p>Holmes wyciągną rękę po manuskrypt i&nbsp;począł mu się
bacznie przeglądać.</p>
<p>&mdash; Zwracam pańską uwagę, Watson, na kolejne używanie
krótkiego i&nbsp;długiego &bdquo;s&rdquo;. Jest to jedna ze
wskazówek, która mi pomogła do określenia daty.</p>
<p>Spojrzałem przez ramię na papier, pożółkły ze starości. Na
pierwszej stronicy był nagłówek: &bdquo;Baskerville-Hall&rdquo;,
a&nbsp;pod spodem data: &bdquo;1742&rdquo;.</p>
<p>&mdash; To zapewne potwierdzenie jakiejś legendy
&mdash; wtrącił Holmes.</p>
<p>&mdash; Rzeczywiście &mdash; przyznał doktor Mortimer.
&mdash; Legenda tyczy się rodu Baskervilleów.</p>
<blockquote>
<q>Rozmaite pogłoski krążyły o&nbsp;Psie Baskervilleów,
lecz ja, pochodząc w&nbsp;prostej linii od Hugona Baskerville,
słyszałem tę hisotrię z&nbsp;ust mojego ojca&hellip;</q>
</blockquote>
<p>Doktor Mortimer skończył czytać tę niezwykłą opowieść,
nasunął na oczy okulary i&nbsp;spojrzał na Pana Sherlocka
Holmesa.</p>
</body>
</html>

Jak widać, powyższy kod jest dość prosty: dwa nagłówki, kilka akapitów i cytat. Zaznaczyłem w nim również pięć encji: polski cudzysłów otwierający (&bdquo;), polski cudzysłów zamykający (&rdquo;), wielokropek (&hellip;), pauzę (&mdash;), a także bardzo zalecaną twardą spację (&nbsp;).

Czas na stylizaję powyższej strony za pomocą CSS. Na początku pobrałem darmowy zestaw czcionek Neutron (w formacie TTF) z serwisu Font Squirrel. Wyodrębniłem z niego odmianę Neutron Regular, którą następnie przerobiłem na inne najważniejsze formaty obsługiwane przez różne przeglądarki internetowe. W końcu dołączyłem je do naszej strony internetowej za pomocą reguły @font-face, a także za pomocą reguły @import zaimportowałem zewnętrzną czcionkę Pinyon Script z Google Fonts, która doda tytułowi odpowiedniego charakteru:

@import url('https://fonts.googleapis.com/css2?family=Pinyon+Script&display=swap');
@font-face {
	font-family: 'neutonregular';
	src: url('neuton/neuton-regular-webfont.eot');
	src: url('neuton/neuton-regular-webfont.eot?#iefix') format('embedded-opentype'),
	url('neuton/neuton-regular-webfont.woff2') format('woff2'),
	url('neuton/neuton-regular-webfont.woff') format('woff'),
	url('neuton/neuton-regular-webfont.ttf') format('truetype'),
	url('neuton/neuton-regular-webfont.svg#neutonregular') format('svg');
	font-weight: normal;
	font-style: normal;
}
* {
	margin: 0;
	padding: 0;
}

W powyższym kodzie wyzerowałem marginesy i dopełnienia wszystkich elementów za pomocą selektora *. Następnie dla elementu body jako tło ustawiłem siatkę pomocniczą grid-26px.png, a także pionowe marginesy na 31 pikseli, aby względem niej wyrównać linię bazową tekstu, którego z kolei interlinię ustawiłem na wysokość obrazu siatki (26 pikseli). Natomiast w przypadku większego nagłówka zastosowałem cztery razy większą interlinię i wyrównałem go do naszej wspomnianej siatki przesuwając go w pionie za pomocą odpowiedniej zmiany jego pionowych marginesów (4 piksele górny i -4 piksele dolny).

body {
	margin: 31px 10%; /*wyrównanie tekstu do siatki oraz dodanie poziomych marginesów */
	font-family: neutronregular, georgia, times, serif; /* podstawowa czcionka ustawiona na neutronregular */
	background-color: white; /* dla pewności, że tło strony internetowej będzie białe */
	background-image: url('grid-26px.png'); /* obraz siatki o wysokości 26 pikseli */
}
h2 {
	line-height: 26px; /* interlinia równa wysokości obrazu siatki */
	font-size: 20px; /* rozmiar czcionki powinienen być mniejszy niż interlinia */
	font-weight: bold; /* pogrubienie czcionki */
	text-align: center; /* wyrównanie tekstu do środka */
	font-variant: small-caps; /* zamiana tekstu na kapitaliki */
	letter-spacing: .6em; /* odstępy między literami tekstu */
	word-spacing: .5em; /* odstępy między wyrazami tekstu */
}
h1 {
	position: relative;
	margin: 4px 0 -4px 0; /* korekta pozycji tekstu względem siatki */
	line-height: 104px; /* poczwórna wysokość obrazu siatki */
	font-family: 'Pinyon Script'; /* czcionka tekstu zmieniona na Pinyon Script */
	font-size: 66px; /* rozmiar czcionki powinienen być mniejszy niż interlinia */
	font-weight: normal; /* wyłączenie domyślego pogrubienia tekstu */
	text-align: center; /* wyrównanie tekstu do środka */
}
p, q {
	line-height: 26px; /* wysokość obrazu siatki */
	font-size: 20px; /* rozmiar czcionki powinienen być mniejszy niż interlinia */
}
p + p, blockquote + p {
	text-indent: 15px; /* wcięcie pierwszych wierszy akapitów */
}
h1 + p:first-line {
	font-variant: small-caps; /* wcięcie pierwszego wiersza pierwszego akapitu na kapitaliki */
	letter-spacing: 0.15em; /* odstępy między literami tekstu */
}
h1 + p:first-letter {
	float: left; /* opływanie pierwszej litery (inicjału) pierwszego akapitu */
	margin: 10px 10px 0 0; /* lekki margines inicjału względem reszty tekstu */
	line-height: 60px; /* interlinię czcionki inicjału ustawiamy na oko */
	font-family: times, serif; /* czcionka inicjału zmieniona na prostą czcionkę wczytywaną z komputera użytkownika */
	font-size: 94px; /* wielkość czcionki inicjału ustawiamy na oko */
	
}
blockquote {
	margin: 0 20%; /* marginesy poziome bloku cytatu */
}
q {
	font-style: italic; /* pochylenie czcionki cytatu */
}

Podejrzewam, że większość właściwości CSS jest Ci już znana. Jednak w tym poradniku chciałem Ci pokazać prosty sposób dopasowywania tekstu do siatki pomocniczej, tak aby uzyskać efekt precyzji co do piksela (ang. Pixel Perfect Precision). Ponadto, nie podawałem uniwersalnego sposobu na obliczanie rozmiaru czcionki i interlinii inicjału (tej dużej pierwszej litery), gdyż jest to najczęściej zależne od użytego kroju pisma – ale w końcu do osiągnięcia tego celu wykorzystaliśmy naszą siatkę. 🙂

Poniżej przedstawiam zrzut ekranu z przeglądarki internetowej Mozilla Firefox wyniku, który udało nam się uzyskać (pełny kod źródłowy możesz pobrać stąd):

Strona internetowa wraz z zastosowaną typografią CSS oraz dodaną siatką pomocniczą do wyrównania tekstu
Strona internetowa wraz z zastosowaną typografią CSS oraz dodaną siatką pomocniczą do wyrównania tekstu

Niestety, muszę Cie rozczarować, ale nie ma możliwości spójnego wystylizowania tekstu we wszystkich przeglądarkach internetowych. W tym poradniku skoncentrowałem się na Firefoksie, lecz w innych przeglądarkach internetowych opartych np. na silniku Blink (Google Chrome, Microsoft Edge), czy WebKit (Safari), wystąpią pikselowe różnice w renderowaniu strony internetowej burząc wyrówananie tekstu względem siatki, których niestety nie da się ujednolicić. Dlatego podane przeze mnie wskazówki traktuj raczej jako ciekawostkę – w każdym bądź razie po usunięciu ze strony internetowej siatki pomocniczej, efekt końcowy uzyskany przez Charles'a Wyke-Smith'a we wspomnianej jego książce jest dość atrakcyjny:

Ukończona strona internetowa wraz z zastosowaną typografią CSS
Ukończona strona internetowa wraz z zastosowaną typografią CSS

Zakończenie

Z całą pewnością muszę stwierdzić, że w niniejszym artykule wyłożyłem tylko fundamentalną wiedzę o typografii stosowanej na stronach internetowych. Dziękuję za uwagę i mam nadzieję, że przyczyniłem się do powiększenia Twojej wiedzy, więc proszę o komentarz!

Komentarze

Ten wpis nie ma jeszcze żadnych komentarzy. 😟

Dodaj własny komentarz

Formularz dodawania komentarza
Kontynuując przeglądanie niniejszej witryny internetowej automatycznie wyrażasz zgodę na wykorzystanie plików cookies.