[CSS] Typografia, czyli jak pięknie prezentować tekst?

Witam wszystkich po świętach. Mam nadzieję, że jesteście w dobrych humorach i wypoczęci 🙂
W dzisiejszym artykule poruszam kwestię typografii, czyli sposobów pisania tekstu na stronach WWW, tak aby przyciągał uwagę swoim wyglądem.
Odpowiednio zbudowane nagłówki czy sam wygląd treści pisanej może się przyczynić do tego, że strona będzie o wiele lepiej odbierana przez użytkownika strony. Dodatkowo, zabawa z typografią jest uznawana za swego rodzaju sztukę i ma wielu fanów. Ja też się do nich zaliczam i stąd powstała idea aby przedstawić kilka sposobów na typografię.

Przykład #1

<p class="sub">In neque vel libero.</p>
<h1>Class aptent taciti sociosqu ad litora torquent per conubia nostra.</h1>
<p>Per conubia nostra, per conubia nostra, per inceptos hymenaeos. Sed lobortis velit. In hac habitasse platea dictumst. Nam ut venenatis vitae, lectus. Vestibulum dolor leo ut vehicula viverra, enim luctus quis, accumsan et, faucibus vestibulum. Donec faucibus lorem. Morbi dui nulla, at urna mi, ut lacus nec massa. Mauris fringilla augue quis dui. In quam eros diam lorem, tempus at, posuere eu, tempus erat. Pellentesque ac libero. Duis blandit justo, hendrerit sollicitudin sed, dapibus sit amet eros. Nullam iaculis lectus. Phasellus quis orci nec erat vitae.</p>

.sub { /*jest odpowiedzialny za czerwony napis nad tytułem*/
	font-family: Verdana, sans-serif;
	font-size: 12px;
	line-height: 15px;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-weight: bold;
	color: #CC0000;
}
h1 {
	font-family: Times New Roman, Georgia, serif;
	color: #444;
	margin: 0;
	padding: 0px 0px 6px 0px;
	font-size: 51px;
	line-height: 44px;
	letter-spacing: -2px;
	font-weight: bold;
}

Przykład #2

<h1>Class aptent taciti sociosqu ad litora torquent per conubia nostra.</h1>
<p><span class="intro">In neque vel libero.</span> Per conubia nostra, per conubia nostra, per inceptos hymenaeos. Sed lobortis velit. In hac habitasse platea dictumst. Nam ut venenatis vitae, lectus. Vestibulum dolor leo ut vehicula viverra, enim luctus quis, accumsan et, faucibus vestibulum. Donec faucibus lorem. Morbi dui nulla, at urna mi, ut lacus nec massa. Mauris fringilla augue quis dui. In quam eros diam lorem, tempus at, posuere eu, tempus erat. Pellentesque ac libero. Duis blandit justo, hendrerit sollicitudin sed, dapibus sit amet eros. Nullam iaculis lectus. Phasellus quis orci nec erat vitae.</p>

h1 {
	font-family: Georgia, serif;
	color: #4E443C;
	font-variant: small-caps; 
	font-size: 30px;
	text-transform: none; 
	font-weight: 100;
	margin-bottom: 0;
}
p {
	font-family: Helvetica, Arial, Verdana, sans-serif;
	font-size: 14px;
	margin-top: 20px; 
	color: #666;
}
.intro { /*odpowiada za inne formatowanie początku paragrafu*/
	font-family: Georgia,serif;
	font-size: 13px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 2px; 
}

Przykład #3

<h1>Class aptent taciti sociosqu ad litora torquent per conubia nostra.</h1>
<p class="sub">In neque vel libero.</p>
<p>Per conubia nostra, per conubia nostra, per inceptos hymenaeos. Sed lobortis velit. In hac habitasse platea dictumst. Nam ut venenatis vitae, lectus. Vestibulum dolor leo ut vehicula viverra, enim luctus quis, accumsan et, faucibus vestibulum. Donec faucibus lorem. Morbi dui nulla, at urna mi, ut lacus nec massa. Mauris fringilla augue quis dui. In quam eros diam lorem, tempus at, posuere eu, tempus erat. Pellentesque ac libero. Duis blandit justo, hendrerit sollicitudin sed, dapibus sit amet eros. Nullam iaculis lectus. Phasellus quis orci nec erat vitae.</p>

h1 {
	font-family: Times New Roman, Georgia, serif;
	font-size: 48px;
	line-height: 40px;
	letter-spacing: -1px;
	color: #444;
	margin: 0;
	padding: 0;
	font-weight: 100;
}
.sub {
	font-family: Times New Roman, Georgia, serif;
	font-size: 28px;
	line-height: 40px;
	letter-spacing: -1px;
	color: #444;
}
p {
	font-family: Times New Roman, Georgia, serif;
	font-size: 14px;
	line-height: 20px;
	text-transform: uppercase;
	color: #444;
}

Przykład #4

<p>Per conubia nostra, per conubia nostra, per inceptos hymenaeos. Sed lobortis velit. In hac habitasse platea dictumst. Nam ut venenatis vitae, lectus. Vestibulum dolor leo ut vehicula viverra, enim luctus quis, accumsan et, faucibus vestibulum. Donec faucibus lorem. Morbi dui nulla, at urna mi, ut lacus nec massa. Mauris fringilla augue quis dui. In quam eros diam lorem, tempus at, posuere eu, tempus erat. Pellentesque ac libero. Duis blandit justo, hendrerit sollicitudin sed, dapibus sit amet eros. Nullam iaculis lectus. Phasellus quis orci nec erat vitae.</p>
<span class="text1">Class aptent taciti sociosqu ad litora torquent per conubia nostra.</span>
<span class="text2">In neque vel libero.</span>

p:first-letter{
	text-transform: uppercase;
}
p {
	color: #424242;
	font-family: Georgia, Garamond, serif;
	letter-spacing: 2px;
	text-align: center;
	margin: 40px auto;
	text-transform: lowercase;
	line-height: 23px;
	font-size: 19px;
	font-variant: small-caps;
}
span.text1 {
	font-family: Georgia, Garamond, serif;
	font-style: italic;
	color: #424242;
}
span.text2 {
	font-style: normal;
	font-variant: small-caps;
	text-decoration: none;
	color: #afafaf;
	font-size: 14px;
}

Przykład #5

<span class="text1">Class aptent taciti sociosqu ad litora torquent per conubia nostra.</span>
<p>
<span class="text2">27/12/2009</span>
Per conubia nostra, per conubia nostra, per inceptos hymenaeos. Sed lobortis velit. In hac habitasse platea dictumst. Nam ut venenatis vitae, lectus. Vestibulum dolor leo ut vehicula viverra, enim luctus quis, accumsan et, faucibus vestibulum. Donec faucibus lorem. Morbi dui nulla, at urna mi, ut lacus nec massa. Mauris fringilla augue quis dui. In quam eros diam lorem, tempus at, posuere eu, tempus erat. Pellentesque ac libero. Duis blandit justo, hendrerit sollicitudin sed, dapibus sit amet eros. Nullam iaculis lectus. Phasellus quis orci nec erat vitae.</p>

span.text1 {
	font-family: Georgia, Times New Roman, serif;
	font-size: 12px;
	font-weight: bold;
	color: #600;
	line-height: 22px;
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 1px
}
span.text2 {
	font-family: Georgia, Times New Roman, serif;
	font-size: 10px;
	line-height: 22px;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin: 0 15px 5px 0;
}

Przykład #6

<span>27/12/2009</span>
<p>Per conubia nostra, per conubia nostra, per inceptos hymenaeos. Sed lobortis velit.</p>

span {
	font-size: 12px;
	font-family: Georgia, Times New Roman, serif;
	color: #000;
	text-align: center;
	font-weight: 100; 
}
p {
	font-family: Georgia, Times New Roman, serif;
	font-weight: normal;
	font-size: 27px;
	letter-spacing: 2px;
	line-height: 18px;
	margin: 0;
	text-align: center;
	text-transform: uppercase;
}

Przykład #7

<span>27/12/2009</span>
<h1>Class aptent taciti sociosqu ad litora.</h1>
<p>Per conubia nostra, per conubia nostra, per inceptos hymenaeos. Sed lobortis velit. In hac habitasse platea dictumst. Nam ut venenatis vitae, lectus. Vestibulum dolor leo ut vehicula viverra, enim luctus quis, accumsan et, faucibus vestibulum. Donec faucibus lorem. Morbi dui nulla, at urna mi, ut lacus nec massa. Mauris fringilla augue quis dui. In quam eros diam lorem, tempus at, posuere eu, tempus erat. Pellentesque ac libero. Duis blandit justo, hendrerit sollicitudin sed, dapibus sit amet eros. Nullam iaculis lectus. Phasellus quis orci nec erat vitae.</p>

span {
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #bbb;
	font-size: 10px;
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-weight: 100;
}
h1 {
	font-weight: bold;
	font-size: 34px;
	font-family: Georgia, Times New Roman, serif;
	color: #333;
	line-height: 25px;
	margin: 2px 0 4px 0;
	letter-spacing: -2px;
	text-align: right;
}
p {
	color: #76879b;
	font-size: 10px;
	margin: 5px;
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 11px;
}

Przykład #8

<h1>Class aptent taciti sociosqu ad litora. Integer leo nec leo. Maecenas ac pede. Etiam dapibus vel, augue. Nam ut aliquet pulvinar, odio.</h1>
<p class="text1">Per conubia nostra.</p>
<p class="text2">Per inceptos hymenaeos. Sed lobortis velit. In hac habitasse platea dictumst. Nam ut venenatis vitae, lectus. Vestibulum dolor leo ut vehicula viverra, enim luctus quis, accumsan et, faucibus vestibulum. Donec faucibus lorem. Morbi dui nulla, at urna mi, ut lacus nec massa. Mauris fringilla augue quis dui. In quam eros diam lorem, tempus at, posuere eu, tempus erat. Pellentesque ac libero. Duis blandit justo, hendrerit sollicitudin sed, dapibus sit amet eros.</p>
<p class="text3">Nullam iaculis lectus.</p>
<p class="text4">27/12/2009</p>

h1 {
	font-family: Georgia, serif;
	color: #381704;
	font-size: 10px;
	letter-spacing: 2px;
	line-height: 32px;
	padding-top: 11px;
}
p.text1 {
	font-family: Georgia, serif;
	color: #3b200f;
	font-size: 16px;
	font-weight: bold;
	line-height: 20px;
	text-align: center;
}
p.text2 {
	font-family: Georgia, serif;
	color: #786e69;
	font-size: 10px;
	font-weight: bold;
	letter-spacing: 2px;
	text-transform: uppercase;
	padding-bottom: 3px;
}
p.text3 {
	font-family: Georgia, serif;
	color: #786e69;
	font-size: 10px;
	font-weight: bold;
	font-style: italic;
	letter-spacing: 2px;
	padding-bottom: 15px;
}
p.text4 {
	font-family: Georgia,serif;
	color: #381704;
	font-size: 12px;
	font-weight: normal;
	line-height: 24px;
	padding: 0;
}

Mam nadzieję, że przedstawione przeze mnie przykłady ukazały Tobie potęgę typografii na stronach WWW i zaczniesz zwracać na nią większą uwagę.
Na koniec chciałem dodać, że należy pamiętać by ograniczyć się do maximum trzech różnych czcionek na stronie, by nie powstał chaos na stronie. Ponadto, pamiętaj by nigdy, przenigdy nie używać na stronie czcionki o nazwie "Comic sans", bo jest po prostu okropna i trzeba być naprawdę doświadczonym webmasterem by wiedzieć w jakiej sytuacji użyć takiej czcionki. Sam do tej pory nie odważyłem się z niej skorzystać, bo po prostu psuje ona wygląd każdej strony jaką robię.