LE WEB ET SES SALES CARACTÈRES Damien Senger · @iamhiwelo · KiwiPa y 2015 Crédit photo : Marcus Lyra

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

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

Je suis passionné · taré · obsédé · obnubilé par la typographie
 (rayez la ou les mentions inutiles) Crédit photo : Kevin Hackert

C’est le nombre de polices de caractère sur Google Fonts. Eh oui !
 (au 18 juin 2015) 698 Crédit photo : Taryn

Crédit photo : Bill Toenjes « Un grand pouvoir implique de 
 grandes responsabilités. » Rocket Raccoon Benjamin Parker

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

Crédit photo : Mark Iocchelli Dépoussiérons 
 la syntaxe bullet-proof 
 Font Spring

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

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

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

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

Crédit photo : ukgardenphotos AVEC LOCAL() L’HERBE N’EST PAS TOUJOURS 
 PLUS VERTE À CÔTÉ

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

Je jette un œil sur le tableau de diffusion 
 des polices sur les OS mobiles :
 jordanm.co.uk/tinytype

@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

@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

À noter, avec local() : les soucis de compatibilité c’est fini ! (soucis uniquement connu sous Android 2.2 – 3.0…) Crédit photo : Duncan Hull

Crédit photo : Dan Perry UN IMPOSTEUR BIEN GRAS

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

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

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

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

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

Un emoji existe pour une grande partie
 de nos symboles Crédit photo : Theus Falcão


 🏠 Crédit photo : Tony Hisgett

" 
 🌍 Crédit photo : Royce Bair

# 
 💻 Crédit photo : Quattro Vageena

Partie intégrante d’unicode : ils sont compréhensibles 
 par les lecteurs d’écran. Crédit photo : John Pasden

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

MERCI DE VOTRE ATTENTION ET BON APPÉTIT :) Et n’hésitez pas à poursuivre la discussion 
 sur twitter : @iamhiwelo