Chociaż usuneliśmy ze strony kolor czarny czcionki i białe tło, moży zrobić o wiele więcej. Możemy zmienić rodzaj czcionki i odległość interlinii lu np.: dodać akapity.

Styl czcionki

Zaczniemy od zmiany stylu czcionki. Strony internetowe wyświetlają tylko takie style czcionek jakie czytelik strony ma zainstalowane na swoim komputerze, dlatego musimy stosować jedynie style, które są powszechnie zainstalowane na wszystkich komputerach. Oznacza to dużą redukcję w wyborze stylu czcionki. Zazwyczaj wystepują jedynie dwa lub trzy rodzaje stylu serif, taka sama ilość sans-serif i monospaced
– styl czcionki maszyny do pisania. Zamiast precyzować jedynie jednego stylu, możemy określić kilka mając nadzieje, że użytkownik bedzie któryś z nich posiadał na swoim komputerze.

web fontsPoniżej jest kilka przykładów popularnych rodzajów czcionek na komputerach z systemem operacyjnym Widows i Mac. Nie można liczyć na to, że wszystkie są dostepne na komputerze czytelnika naszej strony, dlatego precyzujemy kilka alternatywnych.

Oto typowa deklaracja określająca styl czcionki z rodziny sans-serif:

font-family: Verdana, Geneva, Arial, sans-serif;

lub serif:

font-family: Georgia, “Times New Roman”, Times, serif;

Jeśli nazwa rodziny czcionek składa się z kilku słów należy użyć zastosować cudzysłów, np.: “Times New Roman”

Dodajmy sans-serif do naszego arkusza stylów i zobaczmy co się stanie.

Nasza strona w czcionce sans-serif »

Wielkość czcinki

Rozmiar czcionki różni sie w zależności od komputera, czasami całkiem dramatycznie. Zależy on od wielkości monitora użytkownika, systemu operacyjnego oraz przeglądarki. Użytkownicy mogą ustawiać własne preferencje. Należy zdać sobie sprawę z tego, że strony internetowe to nie to samo co materiały drukowane.

Relatywne rozmiary czcionek

Jeśli chcesz aby twoje strony wyglądały w miarę identycznie dla większości użytkowników internetu, musisz używać tzw relatywnych wielkości. Istnieje kilka sposobów definiowania tego typu wielkości. Można wyrażać je procentowo (%) lub jednostce ‘em’,
której podstawowa wartość wynosi 100%. 1.2 em to to samo co 120%. Można również stosować zdefiniowane wielkości takie jak ‘Medium’ – odpowiednik 100% lub 1em. ‘Smaller’ mniejszy o jeden rozmiar lub ‘Larger’ – o jeden romiar większy. Istnieją również takie rozmiary jak: x-small, xx-small,

x-large i xx-large. Zaletą ich stosowania jest to, że przeglądarka nie pozwoli na to, aby pojawił się one za małe lub za duże po stronie użytkownika. Możesz ustawić wielkość czcionki na np.: 0.7
em lub 70%. Na twoim komputerze wygląda ona dobrze, ale na komputerze użytkownika, którego domyslna czionka może być o wiele mniejsza od twojej, 70% tej czcionki może oznaczać nieczytelność. Wartość xx-small jest na tyle mądra, że rozumie jaki jest minimalny rozmiar czionki nie ograniczający czytelności tekstu.

xx-large x-large large medium small x-small xx-small

xx-small type: Wielkość mała ale czytelna

Zbyt mała: Wielkość trochę za mała

Absolutne wielkości czcionek

Jeśli wszyscy użytkownicy twojej witryny posiadają takie same ustawienia komputera, możesz określić rozmiar czcionki w pikselach. Piksele nie różnią sie znacznie pomiędzy komputerami, natomiast różnią się znacznie na innych urządzeniach takich jak laptopy i telefony.

Dla przykładu, żebyś mógł zobaczyć te różnice, umieszam trzy paragrafy z wielkością czionki podaną różnymi metodami – są one podobne ale nie identyczne:

Paragraf napisany w czcionce wielkości 85%.

Paragraf napisany w czionce wielkości x-small

Paragraf napisany w czionce wielkości 11px (pikseli)

Interlinia

W ustawieniach domyślnych, przestrzeń pomiędzy liniami tekstu wynosi typowo 120% wielkości czcionki domyślnej. Kiedy chcemy zmienić wielkość interlinii, mozemy uzywać, rtak jak uprzedni, wielkości relatywnych (% lub em) lub absolutnych (px). W poniższym przykładzie ustawiam wielkość interlinii na 180% wielkości (small) dla całej strony.

body { background-color: #e8eae8;
color: #5d665b;
margin: 50px;

font-family: Verdana, Geneva, Arial, sans-serif;
font-size: small;
line-height: 180%
}

Nasza strona z odrobiną więcej powietrza »

Paragrafy

Wszystko co do tej pory zrobiliśmy miało wpływ na tekst naszej całek strony. Teraz skoncentrujemy się na mniejszych elementach.

Jak już wsponiałem, tekst można podzielić na mniejsze bloki, np.: paragrafy. Istnieje wiele sposobów oddzielania poszczególnych paragrafów aby były bardziej widoczne. Można dorzucić trochę dodatkowej przestrzeni lub zastosować akapit na pierwszej linii.

Ay umieścić blok tekstu w pojedynczym paragrafie, należy go wstawić pomiedzy znaczniki <p>…</p>. Aby sprecyzować styl paragrafu, w arkuszu stylów CSS wstawiamy następujacy kod: p { }. W nawiasach umieszamy definicje określającą wielkość akapitu, która wynosi text-indent: 3em

<style media=”all” title=”mystyles” type=”text/css”>

<!–

body { background-color: #e8eae8;

color: #5d665b;

margin: 50px;

font-family: Verdana, Geneva,

Arial, sans-serif;

font-size: small;

line-height: 180%

}

p { text-indent: 3em

}
–>
</style>

Strona z akapitami »

Nagłówki

Wielkości nagłówków zostały już omówione w kroku 1. Mają one wielkości ustalone domyślnie ale nie oznacza to, że muszą takie pozostać. Możemy je zdefiniować według naszych potrzeb i życzeń. Jest to kwestią dodania kolejnych lini kodu do naszego arkusza.

Nagłówki są wieksze i w czionce pogrubionej. Zdefiniujmy nagłówek H3.

h3 {color: #966b72; font-family: Georgia, “Times New Roman”, Times, serif }

Strona z nagłówkiem »

Dodatki

W naszej arkuszu ustaliliśmy margines na 50 pikseli z każdej strony. Możemy ustawić różne marginesy dla lewej, prawej, góry i dołu.

margin-top: 70px;
margin-left: 120px;
margin-right: 50px;
margin-bottom: 70px;

Nowe marginesy »