Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Le web et ses sales caractères – KiwiParty

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.

Damien Senger

June 19, 2015
Tweet

More Decks by Damien Senger

Other Decks in Programming

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