Le web et ses sales caractères – KiwiParty

Conférence donnée dans le cadre de la KiwiParty 2015, à Strasbourg, autour des problématiques d'intégration de typographie dans les projets HTML & CSS.

Cette présentation est mise à disposition selon les termes de la Licence Creative Commons Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International.

Transcript

1. LE WEB ET SES SALES CARACTÈRES Damien Senger · @iamhiwelo · KiwiPa y 2015 Crédit photo : Marcus Lyra
2. Damien Senger je suis web designer · intégrateur j’habite dans cette merveilleuse ville de Strasbourg je viens de rejoindre la tribu des kiwis d’ Alsacréations https://hiwelo.co/ · @iamhiwelo ça c’est moi :)
3. il est midi, vous avez faim et je viens vous parler de typographie… pour éviter le manque d’attention et les désertions comme Kim Jong-Un, je n’hésiterais pas à châtier toute personne distraite par une attaque de missile anti aérien en pleine tête ! ! Attention · Warning · Achtung ! Crédit photo : dvidshub
4. Je suis passionné · taré · obsédé · obnubilé par la typographie
 (rayez la ou les mentions inutiles) Crédit photo : Kevin Hackert
5. C’est le nombre de polices de caractère sur Google Fonts. Eh oui !
 (au 18 juin 2015) 698 Crédit photo : Taryn
6. Crédit photo : Bill Toenjes « Un grand pouvoir implique de 
 grandes responsabilités. » Rocket Raccoon Benjamin Parker
7. Crédit photo : DeusXFlorida DANS TA @FONT-FACE !
8. Crédit photo : Mark Iocchelli Dépoussiérons 
 la syntaxe bullet-proof 
 Font Spring
9. @font-face { font-family: ‘ma-super-typo’; src: url(‘myfont-regular.eot?#iefix’) format(‘embedded-opentype’), url(‘myfont-regular.woff’) format(‘woff’), url(‘myfont-regular.ttf’) format(‘truetype’), url(‘myfont-regular.svg#svgFontName’) format(‘svg’); } @font-face { font-family: ‘ma-super-typo-bold’; src: url(‘myfont-bold.eot?#iefix’) format(‘embedded-opentype’), url(‘myfont-bold.woff’) format(‘woff’), url(‘myfont-bold.ttf’) format(‘truetype’), url(‘myfont-bold.svg#svgFontName’) format(‘svg’); }
10. @font-face { font-family: ‘ma-super-typo’; font-weight: 400; // 400 = regular, roman, book src: url(‘myfont-regular.eot?#iefix’) format(‘embedded-opentype’), url(‘myfont-regular.woff’) format(‘woff’), url(‘myfont-regular.ttf’) format(‘truetype’), url(‘myfont-regular.svg#svgFontName’) format(‘svg’); } @font-face { font-family: ‘ma-super-typo’; font-weight: 700; // 700 = bold src: url(‘myfont-bold.eot?#iefix’) format(‘embedded-opentype’), url(‘myfont-bold.woff’) format(‘woff’), url(‘myfont-bold.ttf’) format(‘truetype’), url(‘myfont-bold.svg#svgFontName’) format(‘svg’); }
11. @font-face { font-family: ‘ma-super-typo’; font-style: normal; src: url(‘myfont-regular.eot?#iefix’) format(‘embedded-opentype’), url(‘myfont-regular.woff’) format(‘woff’), url(‘myfont-regular.ttf’) format(‘truetype’), url(‘myfont-regular.svg#svgFontName’) format(‘svg’); } @font-face { font-family: ‘ma-super-typo’; font-style: italic; // ou oblique selon les situations #troll src: url(‘myfont-italic.eot?#iefix’) format(‘embedded-opentype’), url(‘myfont-italic.woff’) format(‘woff’), url(‘myfont-italic.ttf’) format(‘truetype’), url(‘myfont-italic.svg#svgFontName’) format(‘svg’); }
12. @font-face { font-family: ‘ma-super-typo’; font-style: normal; font-weight: 400; src: url(‘myfont-regular.eot?#iefix’) format(‘embedded-opentype’), url(‘myfont-regular.woff’) format(‘woff’), url(‘myfont-regular.otf’) format(‘opentype’), // be future-proof url(‘myfont-regular.ttf’) format(‘truetype’), url(‘myfont-regular.svg#svgFontName’) format(‘svg’); }
13. Crédit photo : ukgardenphotos AVEC LOCAL() L’HERBE N’EST PAS TOUJOURS 
 PLUS VERTE À CÔTÉ
14. Exemple :
 Je souhaite utiliser Roboto & Georgia sur mobile Crédit photo : Lucas Zallio
15. Je jette un œil sur le tableau de diffusion 
 des polices sur les OS mobiles :
 jordanm.co.uk/tinytype
16. @font-face { font-family: ‘Roboto’; font-style: normal; font-weight: 400; src: local(‘Roboto’), local(‘Roboto-Regular’), // toujours essayer avec la graisse url(‘roboto-regular.eot?#iefix’) format(‘embedded-opentype’), url(‘roboto-regular.woff’) format(‘woff’), url(‘roboto-regular.otf’) format(‘opentype’), url(‘roboto-regular.ttf’) format(‘truetype’), url(‘roboto-regular.svg#roboto-regular’) format(‘svg’); } Avec Roboto : Local sur Android · Distant sur iOS & Windows Phone
17. @font-face { font-family: ‘Georgia’; font-style: normal; font-weight: 400; src: local(‘Georgia’), local(‘Georgia-Regular’), // toujours essayer avec la graisse url(‘georgia-regular.eot?#iefix’) format(‘embedded-opentype’), url(‘georgia-regular.woff’) format(‘woff’), url(‘georgia-regular.otf’) format(‘opentype’), url(‘georgia-regular.ttf’) format(‘truetype’), url(‘georgia-regular.svg#georgia-regular’) format(‘svg’); } Avec Georgia : Distant sur Android · Local sur iOS & Windows Phone
18. À noter, avec local() : les soucis de compatibilité c’est fini ! (soucis uniquement connu sous Android 2.2 – 3.0…) Crédit photo : Duncan Hull
19. Crédit photo : Dan Perry UN IMPOSTEUR BIEN GRAS
20. Une variante de graisse c’est bien, plusieurs c’est lourd… Crédit photo : Ted Abbott
21. Vous pouvez réfléchir à l’utilisation
 d’un « faux gras » dans certains cas :
 texte de labeur, typographie linéale Crédit photo : Grant Hutchinson
22. Crédit photo : Bob Jagendorf A MAN IN BUSINESS SUIT LEVITATING
23. Un icon-font facilement accessible : ce n’est plus un rêve ! Crédit photo : OxOx
24. Arrêtons d’utiliser à tort et à travers les espaces privés d’unicode (UTF-8) Crédit photo : Lok Leung
25. Un emoji existe pour une grande partie
 de nos symboles Crédit photo : Theus Falcão
26. 
 🏠 Crédit photo : Tony Hisgett
27. " 
 🌍 Crédit photo : Royce Bair
28. # 
 💻 Crédit photo : Quattro Vageena
29. Partie intégrante d’unicode : ils sont compréhensibles 
 par les lecteurs d’écran. Crédit photo : John Pasden
30. Voilà…
 Vous êtes prêt pour la deuxième étape : Opentype & font-feature ! Crédit photo : Marcus Lyra
31. MERCI DE VOTRE ATTENTION ET BON APPÉTIT :) Et n’hésitez pas à poursuivre la discussion 
 sur twitter : @iamhiwelo