Typography sample

Typograpy used

This sampler uses only a subset of the fonts available, see the source for details.

<body>
font-family: 'Latin Modern Sans', Arial, Helvetica, sans-serif;
<dl> <dt>
font-weight: bold
<pre>
font-style: italic
<pre>
<kbd>
font-family: 'Latin Modern Mono', 'Courier New', Courier, monospace;
<small caps>
font-family: 'Latin Modern Sans', Arial, Helvetica, sans-serif; font-variant: small-caps;
<sub>
<sup>
50%
<cite>
<q>
<blockquote>
font-family: 'Latin Modern Roman', 'Times New Roman', Times, serif; font-style: italic;
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
font-family: 'Latin Modern Sans', Arial, Helvetica, sans-serif; font-weight: bold;

You may also be interested in a more thorough display of all the available styles shown here:

Example body text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at felis hendrerit, venenatis urna nec, varius augue. Phasellus ullamcorper tortor magna. Duis in auctor nisl, nec varius nibh. Nulla posuere, ex quis facilisis dignissim, nisi libero sollicitudin nisl, eu sagittis diam ipsum ut nibh. Sed egestas tortor est, id consequat quam iaculis in. Proin cursus eros ante, vitae blandit orci ornare vitae. Maecenas malesuada, ante id commodo malesuada, nisl leo semper metus, sed sagittis purus elit nec enim. Curabitur ut mattis sapien.

Example text in <p> (paragraph)

Suspendisse eget sem sit amet sapien maximus malesuada. Donec leo turpis, interdum non porttitor vitae, rhoncus in dolor. Aliquam congue, magna nec aliquet pharetra, sapien elit facilisis massa, et luctus velit purus at enim. Morbi lectus sem, porttitor eget feugiat id, molestie eget ligula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis mollis eros a odio volutpat finibus. Vivamus mauris nulla, sodales at nulla a, venenatis suscipit sem. Donec pulvinar ultrices arcu. Sed iaculis eleifend quam, sed condimentum sapien volutpat id. Suspendisse sed finibus nibh, quis posuere diam. Integer et lacus augue. Ut convallis ante ipsum, vel porta leo varius rhoncus. Mauris diam sem, venenatis vitae risus nec, maximus volutpat urna.

Example pre-formatted text/code

#include 
/*
 * Maecenas consequat, lorem vel pulvinar facilisis, nibh turpis feugiat nunc,
 * vel consectetur turpis tortor in ante. Fusce at nulla ipsum. Pellentesque
 * cursus velit laoreet, dignissim mauris ac, molestie lacus. Suspendisse in mi
 * placerat, ultricies urna eget, semper ex.
 */

int main(int argc, const char *argv[])
{
    printf("Hello, world!");
    return 0;
}

Bolds, Italics, Underlines

Here is some Bold Text, followed by some Italics Text, and then by some Underlined Text.

Other styles

Here we can find acronym Cite Tags Being Used, deleted text with a del tag, text inserted with the ins tag. Words being emphasized, text inside a kbd tag. Along with non-block quotations with <q>.

Even more styles

Some text in small text, overstruck text, strong text. Chemistry symbols and math to show case sub-script and super script with <sup> and <sub> tags. H2O. c2 = a2 + b2

Then we can check out some Bold Italics Text, Bold Underlined, Italics Underlined, and Bold Italics Underlined Text.

Small-caps variants

In vel est nisl. Praesent eget ante ex. Vestibulum auctor nisi at est tincidunt, quis lobortis ante imperdiet. Cras dapibus placerat velit at lacinia. Praesent eros leo, imperdiet quis urna a, porta facilisis nisl. Sed pretium quis nunc vitae pretium. Pellentesque a lorem porttitor, tempus ante a, imperdiet dui.

Text in a blockquote

Curabitur elementum diam vel enim suscipit, quis sagittis felis semper. Morbi tempus cursus lorem, in consequat dolor convallis a. In orci tortor, fringilla auctor justo eu, ultricies mattis lectus. Nunc urna risus, ornare nec urna id, tincidunt placerat augue. Praesent vel iaculis nisi. Proin fermentum tellus in urna imperdiet porttitor. Aenean et auctor erat, sed viverra leo. Donec pretium ligula vitae nunc elementum tristique. Proin erat nulla, vehicula et rutrum vitae, auctor ac massa.

Different sizes (10,11,12,14,16,18,20,24,28,30)

10. Aliquam convallis nisi ac commodo mollis. Praesent ornare varius purus, ut iaculis nulla ornare in.

11. Nam malesuada diam feugiat, scelerisque dui a, tincidunt odio. Pellentesque bibendum condimentum blandit.

12. Aliquam id tempus magna. Aenean imperdiet tincidunt blandit. Sed facilisis eu lacus at vulputate.

14. Sed bibendum ullamcorper est quis eleifend. Nunc mollis tellus at bibendum elementum. Duis quis elit nec diam dapibus suscipit vel semper lorem.

16. Integer vitae nulla at ante lacinia tempus. Nullam sodales, neque in sodales ultricies, sapien lorem ornare libero, lobortis tempor ligula felis quis lorem.

18. Donec ut arcu lacus. Maecenas scelerisque neque sed bibendum ornare. Nunc id luctus mi, at suscipit risus.

20. Sed sodales est urna, non iaculis odio porta non. Maecenas vitae elit iaculis, placerat est sed, condimentum lacus.

24. Donec hendrerit nunc in rutrum hendrerit. Donec eu fermentum ipsum. Etiam scelerisque bibendum ex nec blandit.

28. Quisque venenatis orci sed nibh ornare, accumsan placerat neque eleifend. Integer nec consequat turpis, in tincidunt nisl.

30. Quisque nisl justo, imperdiet quis aliquam ac, iaculis et augue. Morbi suscipit ante ac velit tincidunt, a tristique ex venenatis.

headings

H1. Heading 1

H2. Heading 2

H3. Heading 3

H4. Heading 4

H5. Heading 5
H6. Heading 6

H1. Heading 1
heading subtitle/sub-text

H2. Heading 2
heading subtitle/sub-text

H3. Heading 3
heading subtitle/sub-text

H4. Heading 4
heading subtitle/sub-text

H5. Heading 5
heading subtitle/sub-text
H6. Heading 6
heading subtitle/sub-text