p

Texte : élément < p >

L’élément est très simple à uti­li­ser. Il suf­fit, dans le fichier HTML d’encadrer chaque para­graphe avec les balises < p > … < / p > Par défaut, un navi­ga­teur mon­trera chaque para­graphe sur une nou­velle ligne, avec une sépa­ra­tion losque 2 para­graphes se suivent.Pour l’élément < p > < / p >, Le plus gros tra­vail consis­tera à appli­quer des règles CSS, pour ajus­ter typo­gra­phi­que­ment notre texte. Voici une liste des pro­prié­tés les plus usuelles.

Pro­prié­tés CSS usuelles pour l’ajustement typographique

Capture-2014-04-01--11.54.46
font-family

déter­mine la famille de police de caractères

font-size

déter­mine le corps du carac­tère Capture 2014-04-01-12.24.31

font-weight

déter­mine la graisse

font-style

déter­mine le style de la police de caractères

 font-variant

déter­mine les variantes d’une police de caractère

 letter-spacing

déter­mine l’interlettrage

 word-spacing

déter­mine l’espace entre les mots

 line-height

déter­mine l’interlignage

 text-align

déter­mine l’alignement du texte Capture-2014-04-01--11.59.07

 text-decoration

uti­li­sée pour défi­nir la déco­ra­tion du texte (for­ma­tage), telle que sou­li­gné, cli­gno­tant, barré, etc Capture-2014-04-01--12.00.30

 text-indent

Inden­ta­tion de la pre­mière ligne du texte

 text-transform

déter­mine la casse du texte

Capture-2014-04-01_12.43.14

 vertical-align

défi­nit l’alignement ver­ti­cal d’un élément

white-space

est uti­li­sée pour décrire com­ment sont gérés les espaces et les retours à la ligne à l’intérieur d’un élé­ment, ainsi que la jus­ti­fi­ca­tion automatique

 direction

doit être para­mé­trée afin de cor­res­pondre à la direc­tion du texte :rtl (right to left) pour les texte en hébreu ou en arabe et ltr pour les autres. Cela doit nor­ma­le­ment être fait dans le docu­ment (par exemple, en uti­li­sant l’attribut dir en HTML) plu­tôt qu’avec une feuille de style CSS.

Outils

Type­tes­ter

Capture d’écran 2013-11-25 à 00.52.35

www.typetester.org

Un outil très simple et pra­tique pour ajus­ter ses réglages typo­gra­phiques en CSS. Il a l’avantage de géné­rer le code CSS correspondant.

Géné­ra­teur de faux texte

Capture2014-04-01-12.14.10

Il est par­fois utile de géné­rer du faux texte lorsquu’on tra­vaille sur une mise en page.

www.blindtextgenerator.com

Pour aller plus loin

http://alistapart.com

http://webtypography.net

http://sixrevisions.com/css/font-face-guide

www.thinkingwithtype.com

http://explorationsintypography.com

http://v1.jontangerine.com

http://typographisme.net

www.alsacreations.com

0