Test typographie

Titre 1 gras Titre 1 gras Titre 1 italique Titre 1 italique Titre 1 Titre 1 Titre 1 Titre 1 Titre 1 Titre 1 Titre 1 Titre 1 Titre 1

Titre 2 gras Titre 2 gras Titre 2 italique Titre 2 italique Titre 2 Titre 2 Titre 2 Titre 2 Titre 2 Titre 2 Titre 2

Titre 3 gras Titre 3 Titre 3 gras Titre 3 italique Titre 3 italique Titre 3 Titre 3 Titre 3 Titre 3 Titre 3

Titre 4 gras Titre 4 gras Titre 4 italique Titre 4 italique Titre 4 Titre 4 Titre 4 Titre 4 Titre 4 Titre 4 Titre 4 Titre 4

Titre 5 gras Titre 5 gras Titre 5 italique Titre 5 italique Titre 5 Titre 5 Titre 5 Titre 5 Titre 5 Titre 5 Titre 5 Titre 5
Titre 6 gras Titre 6 gras Titre 6 italique Titre 6 italique Titre 6 Titre 6 Titre 6 Titre 6 Titre 6 Titre 6 Titre 6 Titre 6 Titre 6

Texte avec la classe « intro » : obortis enim vel libero vestibulum sollicitudin. Suspendisse est velit, viverra a placerat ac, commodo ac mauris. Donec gravida massa ut arcu condimentum egestas. Sed pellentesque viverra interdum. Sed quis dapibus arcu. Aliquam placerat pretium turpis, a mollis augue venenatis eu. 

Paragraphe justifié : Nunc aliquet elit ultrices risus Ceci est un lien ultricies. Vivamus eu venenatis leo! Suspendisse nisi elit, cursus eu imperdiet et, eleifend sit amet turpis. Nulla orci massa, varius non lacinia vel, porta sed lacus. Etiam blandit nunc a sapien iaculis a pretium dui gravida? Etiam facilisis enim malesuada diam venenatis tempus vitae a leo! Suspendisse vulputate mattis mauris ac hendrerit. Ut lobortis enim vel libero vestibulum sollicitudin. Suspendisse est velit, viverra a placerat ac, commodo ac mauris. Donec gravida massa ut arcu condimentum egestas. Sed pellentesque viverra interdum. Sed quis dapibus arcu. Aliquam placerat pretium turpis, a mollis augue venenatis eu. Etiam mollis nibh id lacus semper luctus. Duis massa justo, vestibulum et facilisis a, posuere ac turpis! Mauris at dignissim purus. Suspendisse ultricies, leo eu consequat varius, ante felis viverra mi, vitae faucibus tellus dolor et ipsum.

Paragraphe aligné à gauche : Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras erat orci, molestie at hendrerit vel, accumsan consequat nibh. Suspendisse venenatis eleifend metus ut consectetur. Praesent faucibus porta est vel mattis. Mauris at sagittis orci. Nam lorem est, viverra eget consequat non, cursus ut nisl. Integer volutpat nibh non purus convallis tempus? Donec vel neque sed enim lobortis consectetur. Maecenas est tortor, dictum ac mattis in, luctus nec libero. Nam nunc neque; faucibus nec sagittis nec, scelerisque nec risus. Proin tempus sapien sodales risus consequat porttitor vitae eget arcu.

Ci-dessous une ligne vierge avec espace « insécable »

 

  • Liste à puce 1
    • Liste à puce1.1
    • Liste à puce1.2
  • Liste à puce 2
  • Liste à puce 3
  • Liste à puce 4
  1. Liste numérotée 1
    1. Liste numérotée1.1
    2. Liste numérotée1.2
  2. Liste numérotée2
  3. Liste numérotée3

 

Tableau:

ligne 1 ; colonne 1 ligne 1 ; colonne 2 ligne 1 ; colonne 3
ligne 2 ; colonne 1 ligne 2 ; colonne 2 ligne 2 ; colonne 3
ligne 3 ; colonne 1 ligne 3 ; colonne 2 ligne 3 ; colonne 3

Bloc FONT-WEIGHT

Paragraphe en 16px justifié ; font-weight:normal : Proin nisi justo, lacinia non commodo in, ultrices ac dui. In iaculis mollis lacus, eget fringilla risus eleifend quis? Donec nec leo vitae lorem gravida vulputate vel volutpat elit. Integer faucibus convallis tellus, et auctor nisi iaculis a. Proin in nulla et odio tincidunt sollicitudin a sed urna! Ut euismod semper felis sit amet tincidunt! Aliquam sapien massa, interdum ac semper a, dignissim a tellus.

Paragraphe en 16px justifié ; font-weight:bold : Proin nisi justo, lacinia non commodo in, ultrices ac dui. In iaculis mollis lacus, eget fringilla risus eleifend quis? Donec nec leo vitae lorem gravida vulputate vel volutpat elit. Integer faucibus convallis tellus, et auctor nisi iaculis a. Proin in nulla et odio tincidunt sollicitudin a sed urna! Ut euismod semper felis sit amet tincidunt! Aliquam sapien massa, interdum ac semper a, dignissim a tellus.

Paragraphe en 16px justifié ; font-weight:100 : Proin nisi justo, lacinia non commodo in, ultrices ac dui. In iaculis mollis lacus, eget fringilla risus eleifend quis? Donec nec leo vitae lorem gravida vulputate vel volutpat elit. Integer faucibus convallis tellus, et auctor nisi iaculis a. Proin in nulla et odio tincidunt sollicitudin a sed urna! Ut euismod semper felis sit amet tincidunt! Aliquam sapien massa, interdum ac semper a, dignissim a tellus.

Paragraphe en 16px justifié ; font-weight:200 : Proin nisi justo, lacinia non commodo in, ultrices ac dui. In iaculis mollis lacus, eget fringilla risus eleifend quis? Donec nec leo vitae lorem gravida vulputate vel volutpat elit. Integer faucibus convallis tellus, et auctor nisi iaculis a. Proin in nulla et odio tincidunt sollicitudin a sed urna! Ut euismod semper felis sit amet tincidunt! Aliquam sapien massa, interdum ac semper a, dignissim a tellus.

Paragraphe en 16px justifié ; font-weight:300 : Proin nisi justo, lacinia non commodo in, ultrices ac dui. In iaculis mollis lacus, eget fringilla risus eleifend quis? Donec nec leo vitae lorem gravida vulputate vel volutpat elit. Integer faucibus convallis tellus, et auctor nisi iaculis a. Proin in nulla et odio tincidunt sollicitudin a sed urna! Ut euismod semper felis sit amet tincidunt! Aliquam sapien massa, interdum ac semper a, dignissim a tellus.

Paragraphe en 16px justifié ; font-weight:400 : Proin nisi justo, lacinia non commodo in, ultrices ac dui. In iaculis mollis lacus, eget fringilla risus eleifend quis? Donec nec leo vitae lorem gravida vulputate vel volutpat elit. Integer faucibus convallis tellus, et auctor nisi iaculis a. Proin in nulla et odio tincidunt sollicitudin a sed urna! Ut euismod semper felis sit amet tincidunt! Aliquam sapien massa, interdum ac semper a, dignissim a tellus.

Paragraphe en 16px justifié ; font-weight:500 : Proin nisi justo, lacinia non commodo in, ultrices ac dui. In iaculis mollis lacus, eget fringilla risus eleifend quis? Donec nec leo vitae lorem gravida vulputate vel volutpat elit. Integer faucibus convallis tellus, et auctor nisi iaculis a. Proin in nulla et odio tincidunt sollicitudin a sed urna! Ut euismod semper felis sit amet tincidunt! Aliquam sapien massa, interdum ac semper a, dignissim a tellus.

Paragraphe en 16px justifié ; font-weight:600 : Proin nisi justo, lacinia non commodo in, ultrices ac dui. In iaculis mollis lacus, eget fringilla risus eleifend quis? Donec nec leo vitae lorem gravida vulputate vel volutpat elit. Integer faucibus convallis tellus, et auctor nisi iaculis a. Proin in nulla et odio tincidunt sollicitudin a sed urna! Ut euismod semper felis sit amet tincidunt! Aliquam sapien massa, interdum ac semper a, dignissim a tellus.

Paragraphe en 16px justifié ; font-weight:700 : Proin nisi justo, lacinia non commodo in, ultrices ac dui. In iaculis mollis lacus, eget fringilla risus eleifend quis? Donec nec leo vitae lorem gravida vulputate vel volutpat elit. Integer faucibus convallis tellus, et auctor nisi iaculis a. Proin in nulla et odio tincidunt sollicitudin a sed urna! Ut euismod semper felis sit amet tincidunt! Aliquam sapien massa, interdum ac semper a, dignissim a tellus.

Paragraphe en 16px justifié ; font-weight:800 : Proin nisi justo, lacinia non commodo in, ultrices ac dui. In iaculis mollis lacus, eget fringilla risus eleifend quis? Donec nec leo vitae lorem gravida vulputate vel volutpat elit. Integer faucibus convallis tellus, et auctor nisi iaculis a. Proin in nulla et odio tincidunt sollicitudin a sed urna! Ut euismod semper felis sit amet tincidunt! Aliquam sapien massa, interdum ac semper a, dignissim a tellus.

Paragraphe en 16px justifié ; font-weight:900 : Proin nisi justo, lacinia non commodo in, ultrices ac dui. In iaculis mollis lacus, eget fringilla risus eleifend quis? Donec nec leo vitae lorem gravida vulputate vel volutpat elit. Integer faucibus convallis tellus, et auctor nisi iaculis a. Proin in nulla et odio tincidunt sollicitudin a sed urna! Ut euismod semper felis sit amet tincidunt! Aliquam sapien massa, interdum ac semper a, dignissim a tellus.

bloc FONT-SIZE

Paragraphe en 16px justifié : Proin nisi justo, lacinia non commodo in, ultrices ac dui. In iaculis mollis lacus, eget fringilla risus eleifend quis? Donec nec leo vitae lorem gravida vulputate vel volutpat elit. Integer faucibus convallis tellus, et auctor nisi iaculis a. Proin in nulla et odio tincidunt sollicitudin a sed urna! Ut euismod semper felis sit amet tincidunt! Aliquam sapien massa, interdum ac semper a, dignissim a tellus. Vivamus eget justo orci. Mauris nec sem facilisis augue tincidunt sagittis et nec dui. Proin vestibulum, nulla ac bibendum lacinia, eros est lobortis libero; ut porttitor diam est et libero. Duis sed turpis eu magna ultrices viverra. Ut sem mi, aliquet et rhoncus quis; facilisis ac metus. Donec malesuada mauris nec sem rhoncus ultricies. Etiam nec massa a magna adipiscing mattis quis nec turpis.

Paragraphe en 14px justifié : Proin nisi justo, lacinia non commodo in, ultrices ac dui. In iaculis mollis lacus, eget fringilla risus eleifend quis? Donec nec leo vitae lorem gravida vulputate vel volutpat elit. Integer faucibus convallis tellus, et auctor nisi iaculis a. Proin in nulla et odio tincidunt sollicitudin a sed urna! Ut euismod semper felis sit amet tincidunt! Aliquam sapien massa, interdum ac semper a, dignissim a tellus. Vivamus eget justo orci. Mauris nec sem facilisis augue tincidunt sagittis et nec dui. Proin vestibulum, nulla ac bibendum lacinia, eros est lobortis libero; ut porttitor diam est et libero. Duis sed turpis eu magna ultrices viverra. Ut sem mi, aliquet et rhoncus quis; facilisis ac metus. Donec malesuada mauris nec sem rhoncus ultricies. Etiam nec massa a magna adipiscing mattis quis nec turpis.

Paragraphe en 12px justifié :  Proin nisi justo, lacinia non commodo in, ultrices ac dui. In iaculis mollis lacus, eget fringilla risus eleifend quis? Donec nec leo vitae lorem gravida vulputate vel volutpat elit. Integer faucibus convallis tellus, et auctor nisi iaculis a. Proin in nulla et odio tincidunt sollicitudin a sed urna! Ut euismod semper felis sit amet tincidunt! Aliquam sapien massa, interdum ac semper a, dignissim a tellus. Vivamus eget justo orci. Mauris nec sem facilisis augue tincidunt sagittis et nec dui. Proin vestibulum, nulla ac bibendum lacinia, eros est lobortis libero; ut porttitor diam est et libero. Duis sed turpis eu magna ultrices viverra. Ut sem mi, aliquet et rhoncus quis; facilisis ac metus. Donec malesuada mauris nec sem rhoncus ultricies. Etiam nec massa a magna adipiscing mattis quis nec turpis.

 

Tournesol

image à gaucheProin nisi justo, lacinia non commodo in, ultrices ac dui. In iaculis mollis lacus, eget fringilla risus eleifend quis? Donec nec leo vitae lorem gravida vulputate vel volutpat elit. Integer faucibus convallis tellus, et auctor nisi iaculis a. Proin in nulla et odio tincidunt sollicitudin a sed urna! Ut euismod semper felis sit amet tincidunt! Aliquam sapien massa, interdum ac semper a, dignissim a tellus. Vivamus eget justo orci. Mauris nec sem facilisis augue tincidunt sagittis et nec dui. Proin vestibulum, nulla ac bibendum lacinia, eros est lobortis libero; ut porttitor diam est et libero. Duis sed turpis eu magna ultrices viverra. Ut sem mi, aliquet et rhoncus quis; facilisis ac metus. Donec malesuada mauris nec sem rhoncus ultricies. Etiam nec massa a magna adipiscing mattis quis nec turpis.

 

Paragraphe avec classe « clearfix »

Image à droite 130308-m-stantchev-o-truchot-lyonmusic-5895-600x399In hac habitasse platea dictumst. Proin placerat, sapien sed convallis pulvinar, neque tellus varius justo, eget porta massa mi dapibus magna. Nulla non feugiat quam. Nullam tempus sapien vitae ante tristique elementum? Sed vulputate augue sed dui varius laoreet. Suspendisse sodales tincidunt nulla at adipiscing. Vestibulum eu auctor dolor. Nulla tincidunt sodales arcu, eget congue lacus hendrerit sit amet. Ut posuere cursus risus at dictum. Nam et leo vel lorem congue hendrerit. Quisque sit amet dolor tortor. Ut nunc neque, tincidunt non eleifend at, rhoncus in orci. Donec elementum risus non libero viverra sit amet suscipit leo mollis? Praesent risus massa, ultricies at porttitor eget; dictum eu odio. Donec turpis enim; suscipit eget euismod vel, dapibus vel neque.

Paragraphe avec classe « clearfix »

 

 

Test de police par défaut dans différentes tailles

 

corps 30 pt 0123456789 Ceci est du texte en minuscule CECI EST DU TEXTE EN MAJUSCULE CECI EST EN GRAS

corps 28 pt 0123456789 Ceci est du texte en minuscule CECI EST DU TEXTE EN MAJUSCULE CECI EST EN GRAS

corps 26 pt 0123456789 Ceci est du texte en minuscule CECI EST DU TEXTE EN MAJUSCULE CECI EST EN GRAS

corps 24 pt 0123456789 Ceci est du texte en minuscule CECI EST DU TEXTE EN MAJUSCULE CECI EST EN GRAS

corps 22 pt 0123456789 Ceci est du texte en minuscule CECI EST DU TEXTE EN MAJUSCULE CECI EST EN GRAS

corps 20 pt 0123456789 Ceci est du texte en minuscule CECI EST DU TEXTE EN MAJUSCULE CECI EST EN GRAS

corps 18 pt 0123456789 Ceci est du texte en minuscule CECI EST DU TEXTE EN MAJUSCULE CECI EST EN GRAS

corps 16 pt 0123456789 Ceci est du texte en minuscule CECI EST DU TEXTE EN MAJUSCULE CECI EST EN GRAS

corps 14 pt 0123456789 Ceci est du texte en minuscule CECI EST DU TEXTE EN MAJUSCULE CECI EST EN GRAS

corps 12 pt 0123456789 Ceci est du texte en minuscule CECI EST DU TEXTE EN MAJUSCULE CECI EST EN GRAS

corps 10 pt 0123456789 Ceci est du texte en minuscule CECI EST DU TEXTE EN MAJUSCULE CECI EST EN GRAS

corps 8 pt 0123456789 Ceci est du texte en minuscule CECI EST DU TEXTE EN MAJUSCULE CECI EST EN GRAS

corps 6 pt 0123456789 Ceci est du texte en minuscule CECI EST DU TEXTE EN MAJUSCULE CECI EST EN GRAS

corps 4 pt 0123456789 Ceci est du texte en minuscule CECI EST DU TEXTE EN MAJUSCULE CECI EST EN GRAS