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
   

   View Slide

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 :)
   

   View Slide

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
   

   View Slide

4. Je suis passionné · taré · obsédé · obnubilé par la typographie

   (rayez la ou les mentions inutiles)
   Crédit photo : Kevin Hackert
   

   View Slide

5. C’est le nombre de polices de caractère sur Google Fonts. Eh oui !

   (au 18 juin 2015)
   698
   Crédit photo : Taryn
   

   View Slide

6. Crédit photo : Bill Toenjes
   « Un grand pouvoir implique de 

   grandes responsabilités. »
   Rocket Raccoon Benjamin Parker
   

   View Slide

7. Crédit photo : DeusXFlorida
   DANS TA @FONT-FACE !
   

   View Slide

8. Crédit photo : Mark Iocchelli
   Dépoussiérons 

   la syntaxe bullet-proof 

   Font Spring
   

   View Slide

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’);
   }
   

   View Slide

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’);
    }
    

    View Slide

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’);
    }
    

    View Slide

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’);
    }
    

    View Slide

13. Crédit photo : ukgardenphotos
    AVEC LOCAL()
    L’HERBE N’EST PAS TOUJOURS 

    PLUS VERTE À CÔTÉ
    

    View Slide

14. Exemple :

    Je souhaite utiliser Roboto & Georgia sur mobile
    Crédit photo : Lucas Zallio
    

    View Slide

15. Je jette un œil sur le tableau de diffusion 

    des polices sur les OS mobiles :

    jordanm.co.uk/tinytype
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

19. Crédit photo : Dan Perry
    UN IMPOSTEUR BIEN GRAS
    

    View Slide

20. Une variante de graisse c’est bien,
    plusieurs c’est lourd…
    Crédit photo : Ted Abbott
    

    View Slide

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
    

    View Slide

22. Crédit photo : Bob Jagendorf
    A MAN IN BUSINESS SUIT LEVITATING
    

    View Slide

23. Un icon-font facilement accessible :
    ce n’est plus un rêve !
    Crédit photo : OxOx
    

    View Slide

24. Arrêtons d’utiliser à tort et à travers
    les espaces privés d’unicode (UTF-8)
    Crédit photo : Lok Leung
    

    View Slide

25. Un emoji existe pour une grande partie

    de nos symboles
    Crédit photo : Theus Falcão
    

    View Slide

26. 
    

    🏠
    Crédit photo : Tony Hisgett
    

    View Slide

27. "
    

    🌍
    Crédit photo : Royce Bair
    

    View Slide

28. #
    

    💻
    Crédit photo : Quattro Vageena
    

    View Slide

29. Partie intégrante d’unicode :
    ils sont compréhensibles 

    par les lecteurs d’écran.
    Crédit photo : John Pasden
    

    View Slide

30. Voilà…

    Vous êtes prêt pour la deuxième étape :
    Opentype & font-feature !
    Crédit photo : Marcus Lyra
    

    View Slide

31. MERCI DE VOTRE ATTENTION
    ET BON APPÉTIT :)
    Et n’hésitez pas à poursuivre la discussion 

    sur twitter : @iamhiwelo
    

    View Slide