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.

6362477fcff413a76db8da108fade362?s=128

Damien Senger

June 19, 2015
Tweet

Transcript

  1. 1.

    LE WEB ET SES SALES CARACTÈRES Damien Senger · @iamhiwelo

    · KiwiPa y 2015 Crédit photo : Marcus Lyra
  2. 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. 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. 4.

    Je suis passionné · taré · obsédé · obnubilé par

    la typographie
 (rayez la ou les mentions inutiles) Crédit photo : Kevin Hackert
  5. 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. 6.

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

    de 
 grandes responsabilités. » Rocket Raccoon Benjamin Parker
  7. 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’); }
  8. 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’); }
  9. 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’); }
  10. 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’); }
  11. 15.

    Je jette un œil sur le tableau de diffusion 


    des polices sur les OS mobiles :
 jordanm.co.uk/tinytype
  12. 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
  13. 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
  14. 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
  15. 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
  16. 24.

    Arrêtons d’utiliser à tort et à travers les espaces privés

    d’unicode (UTF-8) Crédit photo : Lok Leung
  17. 29.

    Partie intégrante d’unicode : ils sont compréhensibles 
 par les

    lecteurs d’écran. Crédit photo : John Pasden
  18. 30.

    Voilà…
 Vous êtes prêt pour la deuxième étape : Opentype

    & font-feature ! Crédit photo : Marcus Lyra
  19. 31.

    MERCI DE VOTRE ATTENTION ET BON APPÉTIT :) Et n’hésitez

    pas à poursuivre la discussion 
 sur twitter : @iamhiwelo