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



Plus d'informations sur Graphéine

Notre agence de communication vous guide depuis plus de quinze ans, avec son savoir-faire, dans vos projets de design d'identités de marques et de design de plaquettes. Nos collaborateurs vous étonneront avec leur créativité et leur aptitudes en termes de design graphique. N'hésitez pas à regarder nos réalisations de logotypes d'entreprises et à nous consulter pour un chiffrage. Vous allez aussi aimer notre blog de référence en matière de graphisme


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.