$30 off During Our Annual Pro Sale. View Details »

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

    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