Web typographie

AVANTAGES

Aucun chargement supplémentaire nécessaire.

Pas de problème de rendu de polices (en principe).

Facile à intégrer.

INCONVÉNIENTS

Peu de choix de polices.

Moins de contrôle sur le design du côté utilisateur.

INTÉGRATION

p {font-family:"Times New Roman",Times, serif;}

RESSOURCES

Tester et créer ses font stacks.

TYPETESTER
http://www.typetester.org/

FONT MATRIX
http://media.24ways.org/2007/17/fontmatrix.html

TYPECHART
http://www.typechart.com/

AWESOME FONTSTACKS
http://awesome-fontstacks.com/

AVANTAGES

Toutes les polices peuvent être afﬁchées.

Pas de problème de rendu de polices.

INCONVÉNIENTS

Pas dynamique.

Compliqué à intégrer.

Mauvais pour la SEO.

Texte pas sélectionnable.

INTÉGRATION

HTML <h1 class="integration">
Je suis une image
</h1>

CSS h1.integration {
width: 2350px; height: 75px;
background: url("images/header-image.jpg") top right;
margin: 0 0 0 -2000px;}

INCONVÉNIENTS

Flash.
Javascript.
Un peu long à intégrer.

AVANTAGES

Fonctionnalités typographiques avancées.

Bonne compression des polices.

Plus simple à implémenter que sIFR.

INCONVÉNIENTS

Javascript.

AVANTAGES

Accessibilité.

CSS3: implémentation très simple.

Pas de javascript ou de ﬂash.

INCONVÉNIENTS

Pas encore supporté par tous les navigateurs.

Problème de copyright: la police est téléchargeable.

Rendu pas toujours très bon.

FORMATS DE POLICES

TrueType
OpenType
EOT (Embedded Open Type)
WOFF (en cours de standardisation par le W3C)
SVG

IMPLÉMENTATION

Charger la police sur le serveur,
puis seulement deux lignes dans le CSS:

@font-face{font-family: Quicksand; src: url('Quicksand.otf');}

h3{font-family: "Quicksand", Gil Sans, arial, sans-serif;}

IMPLÉMENTATION AVANCÉE
Pour s’assurer d’une meilleure compatibilité sur les navigateurs.

@font-face {
font-family: Graublauweb;
src: url('Graublauweb.eot'); /* IE9 Compatibility Modes */
src: url('Graublauweb.eot?') format('eot'), /* IE6-IE8 */
url('Graublauweb.woff') format('woff'), /* Modern Browsers */
url('Graublauweb.ttf') format('truetype'), /* Safari, Android, iOS */
url('Graublauweb.svg#svgGraublauweb') format('svg'); /* Legacy iOS */
}

@FONT-FACE KIT GENERATOR
Sur FontSquirrel.com, générer des kits de fonts.

OPTIONS DU GÉNÉRATEUR

Apply Hinting - Fix Vertical Metrics - Remove Kerning -
Fix Missing Glyphs - X-height Matching
WebOnly - Subset Fonts - Style Linking - Base64 Encode
OpenType Options - Font Name Sufﬁx - Em Square Value
Adjust Spacing - Postscript Hinting

TROUVER DES POLICES

Font Squirrel
http://fontsquirrel.com/
The League of Movable Type
http://theleagueofmoveabletype.com/
Open Font Library
http://openfontlibrary.org/
Exljbris
http://exljbris.com/

WEB FONTS HÉBERGÉES
Typekit et Google Web Fonts

TYPEKIT

Solution payante, qui utilise des fonts professionnelles offertes
en partenariat avec des fondries comme Adobe, FontFont, Veer
ou Büro Destrukt.

AVANTAGES

Polices professionnelles.
Pas de problèmes de copyright.
Installation simple.

INCONVÉNIENTS

Paiement par abonnement.

Javascript.

Les fonts sont hébergées ailleurs, requêtes DNS
supplémentaires.

IMPLÉMENTATION

Deux lignes de code à ajouter dans le <head>,
puis choisir ses polices et les ajouter au kit.

Pour ﬁnir, ajout d’un sélecteur où on veut utiliser la police.

AUTRES SITES

FontDeck
http://fontdeck.com/
FontsLive (Monotype)
http://www.fontslive.com/
Fonts.com webfonts
http://webfonts.fonts.com/
WebType
http://www.webtype.com/

GOOGLE WEB FONTS

Solution gratuite, avec un catalogue de polices limité.

AVANTAGES

Pas de problèmes de copyright.
Installation (très) simple.
API disponible pour les dévelopeurs.

INCONVÉNIENTS

Peu de polices (environ une centaine).

Javascript.

Les fonts sont hébergées ailleurs, requêtes DNS
supplémentaires.

IMPLÉMENTATION

Dans le <head>
<link href='http://fonts.googleapis.com/css?family=Michroma'
rel='stylesheet' type='text/css'>

Dans le CSS
h1 { font-family: 'Michroma', arial, serif; }

DES QUESTIONS?

Je mettrai toutes les sources mentionnées dans cette
présentation sur http://webmardi.ch
dès demain.

Web typographie

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (19)

Semelhante a Web typographie

Semelhante a Web typographie (20)

Web typographie

Notas do Editor