Le blog qui soigne l'actualité du design graphique

La typographie et le CSS

02 mars 2010  |   7 Commentaires   |    |  
  • en


Loin de maitriser tous les subtilités de la gestion de la typographie en CSS, j'ai néanmoins découvert l'intérêt de la balise "Font-Face". Cette dernière permet d'utiliser n'importe quelle fonte (ou presque...) sur un site internet. Fini donc, "l'arial", la "verdana" et autres "helvetica" !

Étrangement cette balise (css2) existe depuis Internet Explorer 4 ( 1998 ), mais n'acceptait que le format eot ( Embedded OpenType : un format propriétaire relativement limité et contraignant). Depuis, Safari 3, Firefox 3.5 et Opera 10 ont intégré cette balise ( css3 ), et il est donc possible d'utiliser une police TrueType (ttf) ou OpenType (otf).

Ainsi, on accède à la liberté avec un petit bout de code du genre :

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

Reste quelques soucis d'affichage suivant le navigateur ou le système de l'internaute. Ainsi sous Mac les typo vont être lissés ( anti-alising), alors que sous PC, il n'y aura pas anti-alising.

En lisant notre Blog, vous constaterez donc que les titres des articles sont maintenant composés en typo "Grapheine" !
Petit extrait de notre typo, à travers ce fameux pangramme hétéro-consonnantique (Phrase comprenant toutes les lettres de l'alphabet et où chaque consonne n'est utilisée qu'une seule fois ). Généralement attribué à Gerorges Perec, il semblerait que ce pangramme soit apparu la première fois dans le journal de Mickey en 1957 :-) :
“Portez ce
vieux whisky
au juge blond
qui fume”

Voici l'équivalent de ce que vous devriez voir s'afficher en typo sur Mac :


Voici l'équivalent de ce que vous devriez voir s'afficher en typo sur PC, c'est moins glorieux, car le lissage des police n'est pas activé de base ( Beurk les PC... )



Vous envisagez de créer un logo ?

Notre bureau de conseil en stratégie de marques vous accompagne depuis 16 ans, avec une bonne dose de créativité, dans vos projets de design de design de logos et de design de plaquettes. Nos créateurs vous émerveilleront par leur talent et leur expertise en termes de design graphique. On vous invite à consulter nos références de branding corporate ou simplement à nous interroger pour une estimation budgétaire. Graphéine c'est aussi un blog de référence en matière de branding


Partager cet article :


7 commentaires :

  1. Kyuhi :

    Je suis tellement habituée à l’anti-aliaaaaasing sur mon PC que je ne sais même plus si j’ai activé moi-même le lissage ou s’il y était de base.
    Sur XP, sûr, c’est moche de base. Vista et Seven, me souviens pu.

    Étonnant que sur la plupart des sites que je consulte pour du CSS, aucun ne parle de cette propriété pourtant très utile.

    *fouille*

    … Ouais, vraiment aucun.

  2. Tiens, mais c’est très intéressant cette propriété. Je mets ça en note dans un coin ;)

    En passant, j’adore votre blog. J’en apprend à chaque article et cela m’aide à avancer et m’améliorer. Merci à vous !

  3. En gros on oublie encore et toujours IE8, IE7… qui ne prend pas en charge cette balise.
    Dommage, faudra encore attendre.

  4. v :

    Utile, certes, mais du coup, afficher la source, rechercher « ttf », et hop, une typo gratuite mise à disposition. (Je vous l’ai volée, mais bon, c’était pour le test, hein, je ne l’utiliserai pas)

    C’est ce qui explique aussi pourquoi on ne fait pas ça… Typothèque a mis en place un système securisé, à condition qu’on achète la typo :
    http://my-os.net/blog/index.php?2009/11/04/1386-liberation-des-polices-de-caratcteres-sur-le-web

  5. sno :

    en effet v, mais comme n’importe quelle typo, se la procurer ne donne pas forcément les droits de l’utiliser =)

  6. ba-ak :

    Sans passer pour un c.., quelqu’un sait ce que ca fait sous linux ?

  7. Simon :

    Linux avec chrome ça à l’air assez identique à mac (donc beurk les pc… sous windows! ).

Laisser un commentaire






Newsletter
Laissez-nous votre email et recevez votre dose mensuelle de Graphéine dans votre boite mail.