Web Style Guide: Typography

Typography: Web Fonts

Improved dependability, readability and overall look and feel of our webs.

Typeface: Roboto

CSS Classes: sans-serif

Roboto
The quick brown fox jumps over the lazy dog.

<p class="sans-serif">Roboto</p>

Typeface: Roboto Condensed

CSS Classes: condensed

Roboto Condensed
The quick brown fox jumps over the lazy dog.

<p class="condensed">Roboto Condensed</p

Typeface: EB Garamond

CSS Classes: serif

EB Garamond
The quick brown fox jumps over the lazy dog.

<p class="serif">EB Garamond</p>

HTML Base Elements

Base HTML element styles used in the UTMB Web Frontend Framework.

HTML: Headline

H1 Headline

H2 Headline

H3 Headline

H4 Headline

H5 Headline

H6 Headline

<h1>H1 Headline</h1>
<h2>H2 Headline</h2>
<h3>H3 Headline</h3>
<h4>H4 Headline</h4>
<h5>H5 Headline</h5>
<h6>H6 Headline</h6>

HTML: Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut eleifend neque. Aliquam erat volutpat. Aliquam convallis mollis mattis. Nunc sapien ante, semper sit amet luctus laoreet, blandit interdum lorem.

Aenean id odio sit amet quam scelerisque facilisis. Nam nec vulputate eros, porttitor faucibus felis. Donec dictum ipsum nisl, interdum aliquam nulla posuere id.

<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut eleifend neque. Aliquam erat volutpat. Aliquam convallis mollis mattis. Nunc sapien ante, semper sit amet luctus laoreet, blandit interdum lorem. 
</p>
<p>
    Aenean id odio sit amet quam scelerisque facilisis. Nam nec vulputate eros, porttitor faucibus felis. Donec dictum ipsum nisl, interdum aliquam nulla posuere id. 
</p>

HTML: Lead Paragraph CSS Classes: `lead`

I'm a lead paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut eleifend neque. Aliquam erat volutpat. Aliquam convallis mollis mattis. Nunc sapien ante, semper sit amet luctus laoreet, blandit interdum lorem.

Aenean id odio sit amet quam scelerisque facilisis. Nam nec vulputate eros, porttitor faucibus felis. Donec dictum ipsum nisl, interdum aliquam nulla posuere id.

<p class="lead">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut eleifend neque. Aliquam erat volutpat. Aliquam convallis mollis mattis. Nunc sapien ante, semper sit amet luctus laoreet, blandit interdum lorem. 
</p>
<p>
    Aenean id odio sit amet quam scelerisque facilisis. Nam nec vulputate eros, porttitor faucibus felis. Donec dictum ipsum nisl, interdum aliquam nulla posuere id. 
</p>

HTML: Horizontal Rule

Lorem ipsum dolor sit amet, consectetur adipiscing.

Eiusmod tempor incididunt ut labore et dolore.

<hr />

HTML: BlockQuote

The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a footer or cite element.
Someone famous in Source Title

<blockquote cite="#">
    <p class="uk-margin-small-bottom">
        The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a footer or cite element.
    </p>
    <footer>
        Someone famous in <cite><a href="#">Source Title</a></cite>
    </footer>
</blockquote>

HTML: Preformatted Text (Code)

console.log("Hello, World!");

<code>console.log("Hello, World!");</code>