„Na procesorach rozpierdol”—typografia vol.1, materiały początkowe

base.css

// ustalamy rozmiar tekstu bazowego 
html {
  font-size:100%;
}
body {
  color:#333; // ustalamy kolor tekstu, dlaczego nie «black», dlaczego nie «#000»
  line-height:1.56; // interlinia, odległość od jednego wiersza tekstu do drugiego
}
// zerujemy tytuły
h1, h2, h3, h4 {
  font-size:1rem; // «rem» to jednostka relatywna. Oznacza bazowy rozmiar tekstu na stronie. 
                  // Przy ‛html{ font-size:100%; }’ 1rem=16px
  font-weight:400; // ciężar, grubość pisma, 400 to typowa grubość pisma dziełowego 
                   // przeznaczonego do składnia tekstu ciągłego
                   // czemu używamy rozmiaru 400, zamiast wartości ‛normal’? clever question ;)
}
// zerujemy listę nienumerowaną
ul, ul > li {
  list-style-type:none;
}
// ustalamy stosowniejsze wypunktowanie
// dlaczego? kolejne dobre pytanie!
ul > li:before {
  content:'– ';
  text-indent: "?"; // też chciałbym wiedzieć…
}
// ustalamy numerowanie dla list numerowanych
ol, ol > li {
  list-style-type:decimal; // także: decimal-leading-zero, 
                                     lower-latin, lower-roman, 
                                     upper-latin, upper-roman
}
// kolumna tekstu
.content {
  // ustalamy, mniej więcej, optymalną szerokość kolumny tekstu
  width:30rem;
  // ustalamy marginesy, dolny większy niż górny, dlaczego?
  margin: 2.34rem 0 3.12rem 0;
}
// wyróżnienie paragrafów
p {
  margin: 0 0 1.56rem 0;
}
// lub wersja 2
p {
  text-indent:1rem;
}
p:first-of-type {
  text-indent:0;
}