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 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
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
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.
The base font is defined at the
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 (
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.
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.
The third-level heading is used for main headings within the main content copy.
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.
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.
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.
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 (
.underline class to default or faux headings to add a line beneath the text. This can help separate sections.
.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.
.label class to default or faux headings when you want a smaller label heading. This can be useful when space is limited.
Use these classes to alignment text at specific breakpoints.
General Text Classes
Use the abbreviation element to show the expanded meaning on hover. Use this with the title attribute or with tooltip data attributes.
Use the strong element to make text bold.
Use the citation element for the author of a source. This is often used at the end of a blockquote.
Use the code element when writing examples of code.
Use the mark element to highlight text.
Use the emphasis element to make text italicized
Use the keyboard element when creating instructions.
Use the deleted text element to add a strikethrough to text.
Use the subscript element to make text appear half a character below the normal line.
Use the superscript element to make text appear half a character above the normal line.
Use the address element when displaying contact information.
Use the blockquote element when quoting from another source. Use the footer and cite elements when identifying the source.
The default horizontal rule element includes a gradient that is darkest in the middle and lightest on the sides.
Horizontal Rule (themed)
.themed class to create a more stylized horizontal rule that is 60% wide, centered.
The paragraph element is default body text with 10px of bottom margin.
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.