SlideShare une entreprise Scribd logo
La typographie ,
mon navigateur et moi
             —
      Paris Web 2011
    Par Jérémie Patonnier



   @JeremiePat / @typographisme
Un peu d'histoire
Taille de pierre et calligraphie
Un peu d'histoire
Gutenberg et les caractères amovibles
Un peu d'histoire
La révolution numérique : La PAO et le Web
L'encodage des caractères
Un ordinateur n'est qu'une machine à calculer
L'encodage des caractères
                  Différentes normes d'encodage 




US ASCII      (128 Caractères)
Windows/Mac   (256 Caractères)
ISO Latin     (512 Caractères)
Unicode       (Presque tous)
Les formats de fonte
Les principaux formats




PostScript
TrueType
OpenType
WOFF

Mais aussi  : SVG, EOT
Les formats de fonte
Les options OpenType




                           Hinting
                           Kerning
                         Ligatures
                       Petites cap.
                               Etc.
L'influence des OS
                      Différents moteurs de rendus 




Mac OS  :       CoreText
Windows 7  :    DirectDraw / GDI
Windows XP  :   GDI
Linux  :        FreeType 2  ?
L'influence des OS
              Différentes gestion de l'anti-aliasing 




ClearType
standards
no-antialiasing
Les navigateurs
Qui utilise quoi ?



Les navigateurs suivent l'OS
Mac OS : Core Text
WinXP : GDI + Standards
Win7 : GDI/DirectDraw + ClearType


Attention à IE7 et 8
IE7 utilise ClearType
IE8 utilise ClearType et
force le système à l'utiliser
Les navigateurs
CSS @font-face




En gros, ça marche partout
En détail... euh... presque
Les navigateurs
CSS3 Font & CSS3 Text




font-variant-*
hyphens (Césures)
text-align : <string>
text-decoration
text-shadow
Des solutions simples
KISS is back !




Testez vos fontes
http://webfontspecimen.com
http://wfs.typographisme.net


Optimisez vos fontes
http://www.fontsquirrel.com
Merci :)
          —

    @JeremiePat
   @typographisme

          —

http://typographisme.net

Contenu connexe

Similaire à La typographie, mon navigateur et moi

PDFs à la volée avec TCPDF
PDFs à la volée avec TCPDFPDFs à la volée avec TCPDF
PDFs à la volée avec TCPDF
Jenny Beaumont
 
Le développement d&rsquo;un Composant WinRT
Le développement d&rsquo;un Composant WinRTLe développement d&rsquo;un Composant WinRT
Le développement d&rsquo;un Composant WinRT
Microsoft
 
Internet et le site de la FCGA - 1998
Internet et le site de la FCGA - 1998Internet et le site de la FCGA - 1998
Internet et le site de la FCGA - 1998
Xavier LAIR
 
Présentation d'OpenOffice.org Impress
Présentation d'OpenOffice.org ImpressPrésentation d'OpenOffice.org Impress
Présentation d'OpenOffice.org Impress
Jean-Etienne Poirrier
 
Metro design
Metro designMetro design
Metro design
HOROUN Mehdi
 
La bibliothèque numérique
La bibliothèque numériqueLa bibliothèque numérique
La bibliothèque numérique
Sylvain Machefert
 
43_pps.pdf
43_pps.pdf43_pps.pdf
43_pps.pdf
ssuser192642
 
Jabes 2015 - Poster SCD Université Nantes : "Une suite d'outils pour l'exempl...
Jabes 2015 - Poster SCD Université Nantes : "Une suite d'outils pour l'exempl...Jabes 2015 - Poster SCD Université Nantes : "Une suite d'outils pour l'exempl...
Jabes 2015 - Poster SCD Université Nantes : "Une suite d'outils pour l'exempl...
ABES
 
Les Nouveaux Standards et leur implémentation dans les navigateurs modernes
Les Nouveaux Standards et leur implémentation dans les navigateurs modernesLes Nouveaux Standards et leur implémentation dans les navigateurs modernes
Les Nouveaux Standards et leur implémentation dans les navigateurs modernes
Tristan Nitot
 
Compatibilité Internet Explorer : pour le meilleur et pour le pire!
Compatibilité Internet Explorer : pour le meilleur et pour le pire!Compatibilité Internet Explorer : pour le meilleur et pour le pire!
Compatibilité Internet Explorer : pour le meilleur et pour le pire!
Microsoft
 
La plateforme de développement Microsoft pour les nuls
La plateforme de développement Microsoft pour les nulsLa plateforme de développement Microsoft pour les nuls
La plateforme de développement Microsoft pour les nuls
Microsoft
 
Let's Go dans l'univers mobile multiplateforme avec Xamarin
Let's Go dans l'univers mobile multiplateforme avec Xamarin Let's Go dans l'univers mobile multiplateforme avec Xamarin
Let's Go dans l'univers mobile multiplateforme avec Xamarin
Christian Hissibini
 
Windows 8 [french]
Windows 8 [french]Windows 8 [french]
Windows 8 [french]
Laurent Duveau
 
Partager des documents : les formats et les outils à utiliser ...
Partager des documents : les formats et les outils à utiliser ...Partager des documents : les formats et les outils à utiliser ...
Partager des documents : les formats et les outils à utiliser ...
Isabelle Motte
 
soft-shake.ch - Domotique et robotique avec le micro Framework .NET
soft-shake.ch - Domotique et robotique avec le micro Framework .NETsoft-shake.ch - Domotique et robotique avec le micro Framework .NET
soft-shake.ch - Domotique et robotique avec le micro Framework .NET
soft-shake.ch
 
The rise of JS
The rise of JSThe rise of JS
The rise of JS
Loic Ortola
 
L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8
davrous
 
Développez des applications natives en HTML/JS avec Chrome apps
Développez des applications natives en HTML/JS avec Chrome appsDéveloppez des applications natives en HTML/JS avec Chrome apps
Développez des applications natives en HTML/JS avec Chrome apps
Florent Dupont
 
Les nouveautés du Windows Runtime 8.1
Les nouveautés du Windows Runtime 8.1Les nouveautés du Windows Runtime 8.1
Les nouveautés du Windows Runtime 8.1
Microsoft
 

Similaire à La typographie, mon navigateur et moi (20)

PDFs à la volée avec TCPDF
PDFs à la volée avec TCPDFPDFs à la volée avec TCPDF
PDFs à la volée avec TCPDF
 
Le développement d&rsquo;un Composant WinRT
Le développement d&rsquo;un Composant WinRTLe développement d&rsquo;un Composant WinRT
Le développement d&rsquo;un Composant WinRT
 
Internet et le site de la FCGA - 1998
Internet et le site de la FCGA - 1998Internet et le site de la FCGA - 1998
Internet et le site de la FCGA - 1998
 
Présentation d'OpenOffice.org Impress
Présentation d'OpenOffice.org ImpressPrésentation d'OpenOffice.org Impress
Présentation d'OpenOffice.org Impress
 
Metro design
Metro designMetro design
Metro design
 
La bibliothèque numérique
La bibliothèque numériqueLa bibliothèque numérique
La bibliothèque numérique
 
43_pps.pdf
43_pps.pdf43_pps.pdf
43_pps.pdf
 
Jabes 2015 - Poster SCD Université Nantes : "Une suite d'outils pour l'exempl...
Jabes 2015 - Poster SCD Université Nantes : "Une suite d'outils pour l'exempl...Jabes 2015 - Poster SCD Université Nantes : "Une suite d'outils pour l'exempl...
Jabes 2015 - Poster SCD Université Nantes : "Une suite d'outils pour l'exempl...
 
Les Nouveaux Standards et leur implémentation dans les navigateurs modernes
Les Nouveaux Standards et leur implémentation dans les navigateurs modernesLes Nouveaux Standards et leur implémentation dans les navigateurs modernes
Les Nouveaux Standards et leur implémentation dans les navigateurs modernes
 
Compatibilité Internet Explorer : pour le meilleur et pour le pire!
Compatibilité Internet Explorer : pour le meilleur et pour le pire!Compatibilité Internet Explorer : pour le meilleur et pour le pire!
Compatibilité Internet Explorer : pour le meilleur et pour le pire!
 
La plateforme de développement Microsoft pour les nuls
La plateforme de développement Microsoft pour les nulsLa plateforme de développement Microsoft pour les nuls
La plateforme de développement Microsoft pour les nuls
 
Let's Go dans l'univers mobile multiplateforme avec Xamarin
Let's Go dans l'univers mobile multiplateforme avec Xamarin Let's Go dans l'univers mobile multiplateforme avec Xamarin
Let's Go dans l'univers mobile multiplateforme avec Xamarin
 
Windows 8 [french]
Windows 8 [french]Windows 8 [french]
Windows 8 [french]
 
Partager des documents : les formats et les outils à utiliser ...
Partager des documents : les formats et les outils à utiliser ...Partager des documents : les formats et les outils à utiliser ...
Partager des documents : les formats et les outils à utiliser ...
 
soft-shake.ch - Domotique et robotique avec le micro Framework .NET
soft-shake.ch - Domotique et robotique avec le micro Framework .NETsoft-shake.ch - Domotique et robotique avec le micro Framework .NET
soft-shake.ch - Domotique et robotique avec le micro Framework .NET
 
The rise of JS
The rise of JSThe rise of JS
The rise of JS
 
Tour Horizont.Net
Tour Horizont.NetTour Horizont.Net
Tour Horizont.Net
 
L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8
 
Développez des applications natives en HTML/JS avec Chrome apps
Développez des applications natives en HTML/JS avec Chrome appsDéveloppez des applications natives en HTML/JS avec Chrome apps
Développez des applications natives en HTML/JS avec Chrome apps
 
Les nouveautés du Windows Runtime 8.1
Les nouveautés du Windows Runtime 8.1Les nouveautés du Windows Runtime 8.1
Les nouveautés du Windows Runtime 8.1
 

Dernier

Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Laurent Speyser
 
Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024
UNITECBordeaux
 
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
OCTO Technology
 
OCTO TALKS : 4 Tech Trends du Software Engineering.pdf
OCTO TALKS : 4 Tech Trends du Software Engineering.pdfOCTO TALKS : 4 Tech Trends du Software Engineering.pdf
OCTO TALKS : 4 Tech Trends du Software Engineering.pdf
OCTO Technology
 
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'universitéDe l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
Université de Franche-Comté
 
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
OCTO Technology
 

Dernier (6)

Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
 
Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024
 
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
 
OCTO TALKS : 4 Tech Trends du Software Engineering.pdf
OCTO TALKS : 4 Tech Trends du Software Engineering.pdfOCTO TALKS : 4 Tech Trends du Software Engineering.pdf
OCTO TALKS : 4 Tech Trends du Software Engineering.pdf
 
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'universitéDe l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
 
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
 

La typographie, mon navigateur et moi