Clearfix

Finální řešení clearfix problémů. Vysvětlení na CSS Tricks, Caniuse více než 86 %

.container {
  display: flow-root;
}

Písma

System stack fonty

Písma, která se zobrazí všude bez dodatečného stahování. Prevence FOUT (Flash of Unstyled Text). Více info blog Wordpressu, Alligator.io. TIP: možno nastavit jako @font-face pravidlo.

Bezpatková písma (sans-serif)

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

Neproporcionální písma (monospace)

code {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

Rekurzivní písmo

Mono a Sans najednou. Je možné jej dále tvarovat, více info: recursive.design

Škálované fonty

Mobile-first vysoce čitelné fonty a jejich škálování.

html {
  font-size: 12pt;
}

@media only screen and (min-width: 48em) {
  html {
    font-size: 15pt;
  }
}

@media only screen and (min-width: 48em) and (max-width: 64em) {
  html {
    font-size: 14pt;
  }
}

@media only screen and (min-width: 64em)  {
  html {
    font-size: 16pt;
  }
}