• Sans-serif
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;

• Serif
font-family: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;

•Mono
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;

“This is a book about the fundamentals of creating a good web interface. You will find out how to make effective forms, typography, grids, and many other components of web design.”

Liste de polices libres et gratuites s'approchant de polices professionnelles.

– https://fonts.google.com/specimen/Alegreya
– https://fonts.google.com/specimen/Source+Sans+Pro
– https://fonts.google.com/specimen/Anonymous+Pro

– https://fonts.google.com/specimen/Karla
– https://fonts.google.com/specimen/Roboto

– https://fonts.google.com/specimen/Merriweather
– https://fonts.google.com/specimen/Merriweather+Sans
– https://fonts.google.com/specimen/Lora

Techniques pour réduire le chargement des pages d'un site web.
On retrouve gzip, cache, png optim, et des conseils css, js & dom.

Par exemple :
button {
   border: 2px solid transparent;
}
button:hover {
   border-color: red;
}
est plus efficace que :
button:hover {
   border: 2px solid red;
   margin: -2px;
}