chevron-left chevron-right

Piotr Nalepa Frontend, architektura i AI

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

Ta wersja
blog.piotrnalepa.pl/2009/12/27/css-typografia-czyli-jak-pieknie-prezentowac-tekst
Opublikowano
Autor
, Staff Software Engineer
Kategoria
CSS
Uwagi
Napisz do mnie · Napisz na X

Ten wpis ma 16 lat. Od tego czasu przeglądarki i narzędzia mogły się zmienić, więc zanim użyjesz kodu, sprawdź go z aktualną dokumentacją.

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ę.

  1. Przykład #1

    Typografia - przykład 1

    Przykład 1HTML
    <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>
    Przykład 2CSS
    .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;
}


  2. Przykład #2

    Typografia - przykład 2

    Przykład 3HTML
    <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>
    Przykład 4CSS
    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; 
}


  3. Przykład #3

    Typografia - przykład 3

    Przykład 5HTML
    <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>
    Przykład 6CSS
    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;
}


  4. Przykład #4

    Typografia - przykład 4

    Przykład 7HTML
    <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>
    Przykład 8CSS
    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;
}


  5. Przykład #5

    Typografia - przykład 5

    Przykład 9HTML
    <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>
    Przykład 10CSS
    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;
}


  6. Przykład #6

    Typografia - przykład 6

    Przykład 11HTML
    <span>27/12/2009</span>
<p>Per conubia nostra, per conubia nostra, per inceptos hymenaeos. Sed lobortis velit.</p>
    Przykład 12CSS
    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;
}


  7. Przykład #7

    Typografia - przykład 7

    Przykład 13HTML
    <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>
    Przykład 14CSS
    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;
}


  8. Przykład #8

    Typografia - przykład 8

    Przykład 15HTML
    <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>
    Przykład 16CSS
    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ę.

Udostępnij

LinkedIn X Bluesky

Uwagi

Napisz do mnie Napisz na X

O autorze

Staff Software Engineer

Piszę na tym blogu od 2009 roku, a strony i aplikacje webowe tworzę zawodowo od 14 lat. Obecnie w Bishop Fox prowadzę frontend platformy Cosmos, od samego początku projektu. Wcześniej pracowałem m.in. w OLX, KUDO, Auto1 i eZ Systems. Piszę tu o tym, czego nauczyłem się w praktyce: o JavaScripcie, TypeScripcie, Reakcie, CSS-ie i architekturze frontendu. Występowałem też jako prelegent na konferencjach w Polsce i Europie. Masz pytanie albo pomysł na wpis? Daj znać!

Powiązane wpisy

  1. CSS Grid – ficzer który uwalnia kreatywność w tworzeniu layoutów CSS ·
  2. [CSS] Wizualizacja ekranu meczowego Premier League za pomocą HTML i CSS CSS ·
  3. [CSS] Kilka sposobów na ożywienie interfejsu użytkownika za pomocą animacji CSS CSS ·