Présentation effectuée pour le meetup Frontseeds du 11 octobre à Tournai, Belgique.

1. 20 minutes de typos en css
Meetup Frontseeds @Tournai 11/10/2018

2. Bord*$`l, il y a trop à dire...

3. font-family: ‘Lora’, ‘Times New Roman’, Georgia, serif;
1) font à télécharger via @font-face
2) font susceptible d’être disponible localement
3) font générique, dernier élément de liste

4. @font-face {
font-family: 'Lora';
font-style: normal;
font-weight: 400;
src: url(url de la font) format("woff2"),
url(url de la font) format("woff");
unicode-range: intervalle de caractères;
}

5. TTF (TrueType Font) : format non compressé réalisé dans les années 80.
OTF (OpenType Font) : évolution de TTF réalisé en 2009. Bonne compatibilité.
EOT (Embedded OpenType Fonts) : version compressée du format OTF prévu
pour IE.
WOFF / WOFF2 (Web Open Font Format) : format purement web; c’est une
évolution de TTF et OTF qui dispose de métas supplémentaires pour un
chargement plus rapide. Il bénéficie d’une compatibilité accrue.

6. Optimiser les performances
1) Font Face Observer (https://fontfaceobserver.com/)
2) Critical CSS (https://gist.github.com/scottjehl/b6129da04733e4e0f9a4)
3) Meowni Font Style Matcher (https://meowni.ca/font-style-matcher/)
4) Asynchronous CSS (https://www.filamentgroup.com/lab/async-css.html)
Alternative
1) Font-display: swap;
2) Asynchronous CSS (https://www.filamentgroup.com/lab/async-css.html)

7. font-size: calc(1em + .2vw);

8. body { font-size: 1.125rem; }
h1 { font-size: 4em; }
h2 { font-size: 3.4em; }
p { font-size: 1em; }
.text-small { font-size: .6em; }

9. p { font-size: 1em; }
@media (min-width: responsive start) {
p { font-size: calc(1em + .2vw); }
}
@media (min-width: responsive end) {
p { font-size: 2em; }
}

10. body {
font-size: calc(
[minimum size] + ([maximum size] - [minimum size]) *
((100vw - [minimum viewport width]) /
([maximum viewport width] - [minimum viewport width]))
);
}

11. Quelques ressources
https://www.smashingmagazine.com/2017/05/fluid-responsive-typography-css-p
oly-fluid-sizing/
https://css-tricks.com/snippets/css/fluid-typography/
https://www.smashingmagazine.com/2016/05/fluid-typography/
https://www.madebymike.com.au/writing/precise-control-responsive-typography/
https://codepen.io/bhenbe/pen/wxXwLO

12. h1 { line-height: 1.1; }
p { line-height: 1.5; }
@media (min-height: 28rem) {
p { line-height: 1.3; }
}

13. p { max-width: 64ch; }

14. p { font-size: 1em; }
p::first-letter { font-size: 3em; }
p::first-line { font-weight: bold; }

15. p {
display: box;
line-clamp: 2;
}

16. .element {
shape-outside: ellipse(100px 200px at 50% 50%);
width: 300px;
height: 500px;
}
.element {
shape-outside: url('circle.png');
}

17. #font-amstelvar {
font-family: 'AmstelvarAlpha';
font-variation-settings: 'wdth' 400, 'wght' 98;
}

18. Quelques ressources
https://www.axis-praxis.org/
https://developers.google.com/web/fundamentals/design-and-ux/typography/
variable-fonts/
https://v-fonts.com/
https://www.axis-praxis.org/resources
https://vimeo.com/241102754

19. Et j’ai certainement oublié plein de trucs,
put$*ù de bord$¨` de m$rde...

20. Merci de m’avoir subi.
Benoit Henry
contact@bhen.be
https://bhen.be