chevron-left chevron-right

Piotr Nalepa Frontend, architecture and AI

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

This version
blog.piotrnalepa.pl/2009/12/27/css-typografia-czyli-jak-pieknie-prezentowac-tekst
Published
Author
, Staff Software Engineer
Category
CSS
Feedback
Write to me · Post on X

This post is 16 years old. Browsers and tools may have changed since then, so check the code against current documentation before you use it.

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

    Example 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>
    Example 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

    Example 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>
    Example 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

    Example 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>
    Example 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

    Example 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>
    Example 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

    Example 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>
    Example 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

    Example 11HTML
    <span>27/12/2009</span>
<p>Per conubia nostra, per conubia nostra, per inceptos hymenaeos. Sed lobortis velit.</p>
    Example 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

    Example 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>
    Example 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

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

Share

LinkedIn X Bluesky

Feedback

Write to me Post on X

About the author

Staff Software Engineer

I've been writing this blog since 2009 and building for the web professionally for 14 years. Today I lead the frontend of the Cosmos platform at Bishop Fox, where I've been since day one of the project. Before that I worked at OLX, KUDO, Auto1 and eZ Systems. Here I write about what I've learned in practice: JavaScript, TypeScript, React, CSS and frontend architecture. I've also spoken at conferences across Poland and Europe. Got a question or an idea for a post? Let me know!

Related posts

  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 ·