Typography

Roboto: UNLV's Font Family

Google Fonts' Roboto has been adopted as the official font family on the web. This family can be used alongside the Roboto Condensed family and the Roboto Slab family.

Roboto Roboto Slab Roboto Condensed

Roboto

Roboto is used for the base font and is available in 100, 300, 500, and 700 font weights.

100 - .roboto-100
Roboto Display Thin

300 - .roboto-300
Roboto Display Light

400 - .roboto-400
Roboto Display Regular

500 - .roboto-500
Roboto Display Medium

700 - .roboto-700
Roboto Display Bold

Roboto Condensed

The condensed variation Roboto is used for elements such as headings and captions. It is available in 300, 400, and 700 font weights.

300 - .roboto-condensed-300
Roboto Condensed Display Light

400 - .roboto-condensed-400
Roboto Condensed Display Regular

700 - .roboto-condensed-700
Roboto Condensed Display Bold

Roboto Slab

The serif variation Roboto Slab is used for select purposes like hero text and is available in 100, 300, 400, and 700 font weights.

100 - .roboto-slab-100
Roboto Slab Display Thin

300 - .roboto-slab-300
Roboto Slab Display Light

400 - .roboto-slab-400
Roboto Slab Display Regular

700 - .roboto-slab-700
Roboto Slab Display Bold

Basic Type Elements

Note that font sizes specified are for desktop - not phone or tablet.

Base Font

The base font is defined at the <body> element.

body { font-family: "Roboto", Arial, sans-serif; font-weight: 300; font-size: 18px; line-height: 1.5; color: rgba(0,0,0,.87); }

Lead Text

Lead text is only paired with a level-two heading (page title) and used to describe the page. Lead text uses the paragraph element with a "lead" class (<p class="lead">…</p>).

body { font-family: "Roboto", Arial, sans-serif; font-weight: 100; font-size: 25px; line-height: 1.5; margin-top: 15px; }

Heading 1

The first-level heading is reserved for the website title that appears in the red navigation bar of the template header. Do not reuse this heading for any other purpose.

h1 { font-family: "Roboto Condensed", Arial, sans-serif; font-weight: 300; font-size: 32px; line-height: 1.05; color: #eee; padding: 17px 0; }

Heading 2

The second-level heading is reserved for page titles and should only once at the top of a page. Second-level headings are typically paired with lead text within their own <section>. They are not combined within the same section as the main content. Second-level headings are also located within a hero banner.

h2 { font-family: "Roboto", sans-serif; font-weight: 100; font-size: 48px; line-height: 1.15; margin: 0; }

Heading 3

The third-level heading is used for main headings within the main content copy.

h3 { font-family: "Roboto Condensed", sans-serif; font-weight: 300; font-size: 32px; line-height: 1.1; margin-top: 40px; }

Heading 4

The fourth-level heading is used for sub headings within the main content copy. They are only used if a third-level heading has already preceded it.

h4 { font-family: "Roboto Condensed", sans-serif; font-weight: 300; font-size: 25px; line-height: 1.5; margin-top: 30px; }

Heading 5

The fifth-level heading is used for sub headings within the main content copy. They are only used if a fourth-level heading has already preceded it.

h5 { font-family: "Roboto Condensed", sans-serif; font-weight: 400; font-size: 20px; line-height: 1.5; margin-top: 30px; }

Heading 6

The sixth-level heading is used for sub headings within the main content copy. They are only used if a fifth-level heading has already preceded it.

h6 { font-family: "Roboto Condensed", sans-serif; font-weight: 400; font-size: 16px; line-height: 1.5; text-transform: uppercase; margin-top: 30px; }

Heading Variations

Heading levels three through six have classes available.

Faux Heading Classes

This group of classes are available for when you want to mimic the font styling of a heading. This can be useful for when you a link to appear as a heading (<a class="h4" href="#">…</a>), or when default heading size may not work well with a layout (<h3 class="h4">…</h3>).

.h3
Faux Level-Three Heading
.h4
Faux Level-Four Heading
.h5
Faux Level-Five Heading
.h6
Faux Level-Six Heading

Heading Underlines

Add the .underline class to default or faux headings to add a line beneath the text. This can help separate sections.

h3.underline

Level-Three Heading

h4.underline

Level-Four Heading

h5.underline
Level-Five Heading
h6.underline
Level-Six Heading

Category Headings

Apply the .category class to default or faux headings when you want a stronger heading. This can be useful for when you need a list of links appear more like a unique segment.

h3.category

Level-Three Heading

h4.category

Level-Four Heading

h5.category
Level-Five Heading
h6.category
Level-Six Heading

Label Headings

Apply the .label class to default or faux headings when you want a smaller label heading. This can be useful when space is limited.

h3.label

Level-Three Heading

h4.label

Level-Four Heading

h5.label
Level-Five Heading
h6.label
Level-Six Heading

Text Alignment

Use these classes to alignment text at specific breakpoints.

Class Name Breakpoint Alignment
.text-left All Left
.text-center All Center
.text-right All Right
.text-xs-left Extra-Small Left
.text-xs-right Extra-Small Right
.text-xs-center Extra-Small Center
.text-xs-justify Extra-Small Justify
.text-sm-left Small Left
.text-sm-right Small Right
.text-sm-center Small Center
.text-sm-justify Small Justify
.text-md-left Medium Left
.text-md-right Medium Right
.text-md-center Medium Center
.text-md-justify Medium Justify
.text-lg-left Large Left
.text-lg-right Large Right
.text-lg-center Large Center
.text-lg-justify Large Justify
.text-xl-left Extra-Large Left
.text-xl-right Extra-Large Right
.text-xl-center Extra-Large Center
.text-xl-justify Extra-Large Justify

General Text Classes

Text Size

.text-xs
Extra Small Text

.text-sm
Small Text

Default Text

.text-lg
Large Text

.text-xl
Extra Large Text

Text Transformation

.text-lowercase
All lowercase text

.text-uppercase
All uppercase text

.text-capitalize
All capitalized Text

Text Wrapping

.balance-text
Balance the wrapping of text to a near-even number of characters per line

.no-wrap
Disable text wrapping (useful in table headers)

Styled Text

.text-caption
For manually creating captions

.details
For news dates and bylines

Inline Elements

Abbreviations

Use the abbreviation element to show the expanded meaning on hover. Use this with the title attribute or with tooltip data attributes.

<abbr>

The name UNLV is an abbreviation.

Bold Text

Use the strong element to make text bold.

<strong>

bold text

Citations

Use the citation element for the author of a source. This is often used at the end of a blockquote.

<cite>

New York Times

Code

Use the code element when writing examples of code.

<code>

The <div> element is a container with no semantic meaning.

Highlighted Text

Use the mark element to highlight text.

<mark>

This text is being highlighted.

Italicized Text

Use the emphasis element to make text italicized

<em>

This text is being emphasized.

Keyboard Commands

Use the keyboard element when creating instructions.

<kbd>

To edit settings, press ctrl + e.

Strikethrough Text

Use the deleted text element to add a strikethrough to text.

<del>

This text is no longer valid.

Subscript Text

Use the subscript element to make text appear half a character below the normal line.

<sub>

The "2" in H20 is subscript.

Superscript Text

Use the superscript element to make text appear half a character above the normal line.

<sup>

The % in 100% is superscript.

Block Elements

Addresses

Use the address element when displaying contact information.

<address>
University of Nevada, Las Vegas
4505 S. Maryland Pkwy.
Las Vegas, NV 89154

Blockquotes

Use the blockquote element when quoting from another source. Use the footer and cite elements when identifying the source.

<blockquote>

Content inside a blockquote element must be quoted from another source. If it has address, a cite attribute should present.

World Wide Web Consortium (W3C)

Horizontal Rule

The default horizontal rule element includes a gradient that is darkest in the middle and lightest on the sides.

<hr>

Horizontal Rule (themed)

Use the .themed class to create a more stylized horizontal rule that is 60% wide, centered.

<hr class="themed">

Paragraphs

The paragraph element is default body text with 10px of bottom margin.

<p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at tincidunt sem. Fusce finibus ligula dolor, quis efficitur ipsum aliquam quis. Curabitur lacus enim, iaculis in tellus vel, rhoncus congue mi.

Example: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at tincidunt sem. Fusce finibus ligula dolor, quis efficitur ipsum aliquam quis. Curabitur lacus enim, iaculis in tellus vel, rhoncus congue mi.

Preformatted Text

Use the preformatted text element when displaying blocks of code. You may optionally add the .pre-scrollable class, which will set a max-height of 350px and provide a y-axis scrollbar.

<pre>

<div class="col-md-4">
<div class="card card-block">
<div class="photo left full-width"><img src="/assets/web-dev-guide/images/examples/340x175.jpg" alt="" /></div>
<h4>Lorem Ipsum Dolor Sit</h4>
<p>Praesent in nisi non enim adipiscing aliquet. Sed ac ipsum id sem euismod suscipit euismod a quam.</p>
<div class="clear"></div>
</div><!--/.card-->
</div><!--/.col-md-4-->