.

.

Des lettres dans l'espace

Pierre Boulet

Unithé ou café, 29 janvier 2009

..Typographie

.ortho-typographie

.micro-typographie

Objectif = lisibilité

Lettres

Mots

Paragraphes

Pages

Lettres

Mots

Paragraphes

Pages

Anatomie d'une lettre

..b.o.g.u.e

.ascendante

.descendante

.corps

.ligne de base

.œil

.angle.pleins

.et déliés.sérifs

Anatomie d'une lettre

..b.o.g.u.e.ascendante

.descendante

.corps

.ligne de base

.œil

.angle.pleins

.et déliés.sérifs

Anatomie d'une lettre

..b.o.g.u.e.ascendante

.descendante

.corps

.ligne de base

.œil

.angle.pleins

.et déliés.sérifs

Anatomie d'une lettre

..b.o.g.u.e.ascendante

.descendante

.corps

.ligne de base

.œil

.angle

.pleins.et déliés.sérifs

Anatomie d'une lettre

..b.o.g.u.e.ascendante

.descendante

.corps

.ligne de base

.œil

.angle.pleins

.et déliés

.sérifs

Anatomie d'une lettre

..b.o.g.u.e.ascendante

.descendante

.corps

.ligne de base

.œil

.angle.pleins

.et déliés.sérifs

Sérif

Times New RomanBitstream Vera SerifLMRoman12Bitstream CharterURW Palladio LURW Bookman L

Sans sérif

ArialBitstream Vera SansLMSans12Century GothicTrebuchet MSGill Sans MT

À chasse fixe

Courier NewBitstream Vera Sans MonoLMTypewriter12MonofurTlwgMonoLucida Sans Typewriter

Manuscrites

Comic Sans MSMatura MT Script CapitalsMistralAmandineTrashHandFrench Script MT

Décoratives

AbileneFLFA Star is BornBestiolesBroadwayColonna MTParisMetro

VariantesFamille Antykwa Torunska

Maigre

Normal Gras

Maigre it.

Italique Gras it.

PC M P . PC PC . . PC PC .

Cond. maigre Condensé Cond. grasCond. it. m. Cond. it. Cond. gras it.

VariantesFamille Antykwa Torunska

Maigre Normal GrasMaigre it. Italique Gras it.

PC M P . PC PC . . PC PC .

Cond. maigre Condensé Cond. grasCond. it. m. Cond. it. Cond. gras it.

VariantesFamille Antykwa Torunska

Maigre Normal GrasMaigre it. Italique Gras it.

PC M P . PC PC . . PC PC .

Cond. maigre Condensé Cond. grasCond. it. m. Cond. it. Cond. gras it.

VariantesFamille Antykwa Torunska

Maigre Normal GrasMaigre it. Italique Gras it.

PC M P . PC PC . . PC PC .

Cond. maigre Condensé Cond. grasCond. it. m. Cond. it. Cond. gras it.

Tailles optiques

Latin Modern 5Latin Modern 6Latin Modern 7Latin Modern 8Latin Modern 9Latin Modern 10Latin Modern 12Latin Modern 17

Lettres

Mots

Paragraphes

Pages

Approche

Approche trèsdiminuéeApproche diminuéeApproche normaleApproche augmentéeApproche très augmentée

Paires de crénage

Avec

Test AvecSans

Test Avec

Ligatures

Avec

fi ffi f fl ffl st ½ ¾Sans

fi ffi fj ffj fl ffl st ct 1/2 3/4

Lettres

Mots

Paragraphes

Pages

Espace inter-mots normalLorem ipsum dolor sit amet, consectetur

adipiscing elit. Cras massa. Sed facilisis urna pharetrapede. Aenean ornare congue risus. Ut justo sem,tempus vel, elementum eu, euismod quis, mi. Donectristique. Fusce at risus sed urna pulvinar hendrerit.Mauris id libero. Fusce placerat, ipsum sit ametpretium auctor, lectus justo laoreet augue, pretiumtincidunt est sem sed nisi. Nullam eget arcu.

Sed dignissim pede ac eros. Proin et ligula eu nisitincidunt pharetra. Pellentesque nibh. Ut vestibulum.Etiam elit diam, pellentesque ut, pretium tempus,sagittis a, nunc. Quisque gravida sem in massa.Praesent felis ante, venenatis ut, varius quis, blanditnec, libero. Aliquam magna libero, tincidunt vitae,laoreet quis, tincidunt a, neque. Maecenas dapibus

1

Espace inter-mots diminuéLoremipsumdolorsitamet,consecteturadipiscing

elit.Crasmassa.Sedfacilisisurnapharetrapede.Aeneanornareconguerisus.Utjustosem,tempusvel,elementumeu,euismodquis,mi.Donectristique.Fusceatrisussedurnapulvinarhendrerit.Maurisidlibero.Fusceplacerat,ipsumsitametpretiumauctor,lectusjustolaoreetaugue,pretiumtinciduntestsemsednisi.Nullamegetarcu.

Seddignissimpedeaceros.Proinetligulaeunisitinciduntpharetra.Pellentesquenibh.Utvestibulum.Etiamelitdiam,pellentesqueut,pretiumtempus,sagittisa,nunc.Quisquegravidaseminmassa.Praesentfelisante,venenatisut,variusquis,blanditnec,libero.Aliquammagnalibero,tinciduntvitae,laoreetquis,tincidunta,neque.Maecenasdapibusligulanonpurus.

1

Espace inter-mots augmentéLorem ipsum dolor sit amet, consectetur

adipiscing elit. Cras massa. Sed facilisis urnapharetra pede. Aenean ornare congue risus. Utjusto sem, tempus vel, elementum eu, euismodquis, mi. Donec tristique. Fusce at risus sed urnapulvinar hendrerit. Mauris id libero. Fusceplacerat, ipsum sit amet pretium auctor, lectusjusto laoreet augue, pretium tincidunt est sem sednisi. Nullam eget arcu.

Sed dignissim pede ac eros. Proin et ligula eunisi tincidunt pharetra. Pellentesque nibh. Utvestibulum. Etiam elit diam, pellentesque ut,pretium tempus, sagittis a, nunc. Quisque gravidasem in massa. Praesent felis ante, venenatis ut,varius quis, blandit nec, libero. Aliquam magna

1

Interligne normalLorem ipsum dolor sit amet, consectetur

adipiscing elit. Cras massa. Sed facilisis urna pharetrapede. Aenean ornare congue risus. Ut justo sem,tempus vel, elementum eu, euismod quis, mi. Donectristique. Fusce at risus sed urna pulvinar hendrerit.Mauris id libero. Fusce placerat, ipsum sit ametpretium auctor, lectus justo laoreet augue, pretiumtincidunt est sem sed nisi. Nullam eget arcu.

Sed dignissim pede ac eros. Proin et ligula eu nisitincidunt pharetra. Pellentesque nibh. Ut vestibulum.Etiam elit diam, pellentesque ut, pretium tempus,sagittis a, nunc. Quisque gravida sem in massa.Praesent felis ante, venenatis ut, varius quis, blanditnec, libero. Aliquam magna libero, tincidunt vitae,laoreet quis, tincidunt a, neque. Maecenas dapibus

1

Interligne diminuéLorem ipsum dolor sit amet, consectetur

adipiscing elit. Cras massa. Sed facilisis urna pharetrapede. Aenean ornare congue risus. Ut justo sem,tempus vel, elementum eu, euismod quis, mi. Donectristique. Fusce at risus sed urna pulvinar hendrerit.Mauris id libero. Fusce placerat, ipsum sit ametpretium auctor, lectus justo laoreet augue, pretiumtincidunt est sem sed nisi. Nullam eget arcu.

Sed dignissim pede ac eros. Proin et ligula eu nisitincidunt pharetra. Pellentesque nibh. Ut vestibulum.Etiam elit diam, pellentesque ut, pretium tempus,sagittis a, nunc. Quisque gravida sem in massa.Praesent felis ante, venenatis ut, varius quis, blanditnec, libero. Aliquam magna libero, tincidunt vitae,laoreet quis, tincidunt a, neque. Maecenas dapibusligula non purus. In a erat tincidunt felis cursussodales. Suspendisse pulvinar, dui in scelerisquelaoreet, libero mauris faucibus mi, convallisconsectetur nisi leo vel nisi.

1

Interligne augmentéLorem ipsum dolor sit amet, consectetur

adipiscing elit. Cras massa. Sed facilisis urna pharetra

pede. Aenean ornare congue risus. Ut justo sem,

tempus vel, elementum eu, euismod quis, mi. Donec

tristique. Fusce at risus sed urna pulvinar hendrerit.

Mauris id libero. Fusce placerat, ipsum sit amet

pretium auctor, lectus justo laoreet augue, pretium

tincidunt est sem sed nisi. Nullam eget arcu.

Sed dignissim pede ac eros. Proin et ligula eu nisi

tincidunt pharetra. Pellentesque nibh. Ut vestibulum.

Etiam elit diam, pellentesque ut, pretium tempus,

1

JustificationLorem ipsum dolor sit amet, consectetur adipiscing

elit. Cras massa. Sed facilisis urna pharetra pede. Ae-nean ornare congue risus. Ut justo sem, tempus vel,elementum eu, euismod quis, mi. Donec tristique. Fu-sce at risus sed urna pulvinar hendrerit. Mauris id li-bero. Fusce placerat, ipsum sit amet pretium auctor,lectus justo laoreet augue, pretium tincidunt est semsed nisi. Nullam eget arcu.

Sed dignissim pede ac eros. Proin et ligula eu nisitincidunt pharetra. Pellentesque nibh. Ut vestibulum.Etiam elit diam, pellentesque ut, pretium tempus, sa-gittis a, nunc. Quisque gravida sem in massa. Prae-sent felis ante, venenatis ut, varius quis, blandit nec,libero. Aliquam magna libero, tincidunt vitae, laoreetquis, tincidunt a, neque. Maecenas dapibus ligula non

1

Ultimes raffinementsLorem ipsum dolor sit amet, consectetur adipiscing

elit. Cras massa. Sed facilisis urna pharetra pede. Ae-nean ornare congue risus. Ut justo sem, tempus vel, ele-mentum eu, euismod quis, mi. Donec tristique. Fusceat risus sed urna pulvinar hendrerit. Mauris id libero.Fusce placerat, ipsum sit amet pretium auctor, lectusjusto laoreet augue, pretium tincidunt est sem sed nisi.Nullam eget arcu.

Sed dignissim pede ac eros. Proin et ligula eu nisitincidunt pharetra. Pellentesque nibh. Ut vestibulum.Etiam elit diam, pellentesque ut, pretium tempus, sa-gittis a, nunc. Quisque gravida sem in massa. Praesentfelis ante, venenatis ut, varius quis, blandit nec, libero.Aliquam magna libero, tincidunt vitae, laoreet quis, tin-cidunt a, neque. Maecenas dapibus ligula non purus.

1

Lettres

Mots

Paragraphes

Pages

Lisibilité optimale

Corps de texte entre 9pt et 12ptInterligne ~120 % du corpsLongueur de ligne entre 40 et 75

caractères

Design, pas décoration

Agrément de lecture

I laisser respirer l'œil du lecteurI dynamiser la page

Éviter les perturbations

I changements significatifsI respecter les habitudes