|

Typography

UX4G sets basic global display, typography, and link styles. When more control is needed, check out the textual utility classes.

Global settings #

  • Employ a native font stack chooses the ideal font family for every OS and device.
  • Using the browser's default root font-size, which is commonly 16px, to provide a more inclusive and accessible type scale. Visitors can change their browser defaults as necessary.
  • As the typographic base for the body>, use the $font-family-base, $font-size-base, and $line-height-base properties.
  • Using $link-color, change the color of all links.
  • To change the background color of the body>, use $body-bg (#fff by default).

The global variables are defined in _variables.scss, and these styles can be found in _reboot.scss. Make sure $font-size-base is set to rem.

Headings #

When there is a need to match the font styling of a heading but are unable to utilize the related HTML element, alternatively use the .h1 through .h6 classes.

Heading Example
<h1></h1> h1. UX4G heading
<h2></h2> h2. UX4G heading
<h3></h3> h3. UX4G heading
<h4></h4> h4. UX4G heading
<h5></h5> h5. UX4G heading
<h6></h6> h6. UX4G heading
<h1>h1. UX4G heading</h1>
<h2>h2. UX4G heading</h2>
<h3>h3. UX4G heading</h3>
<h4>h4. UX4G heading</h4>
<h5>h5. UX4G heading</h5>
<h6>h6. UX4G heading</h6>

.h1 through .h6 classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.

RESULT

h1. UX4G heading

h2. UX4G heading

h3. UX4G heading

h4. UX4G heading

h5. UX4G heading

h6. UX4G heading

Customizing headings #

Use the included utility classes to recreate the small secondary heading text from UX4G 3.

<h3>
Fancy display heading
<small class="text-muted">With faded secondary text</small>
</h3>

Display headings #

The bulk of pages content is where traditional heading components are intended to function best. Consider utilizing a show heading—a bigger, marginally more opinionated heading style—when you need a heading to stand out.

Display 1
Display 2
Display 3
Display 4
Display 5
Display 6
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>

Display headings are configured via the $display-font-sizes Sass map and two variables, $display-font-weight and $display-line-height.

Display headings are customizable via two variables, $display-font-family and $display-font-style.

$display-font-sizes: (
  1: 5rem,
  2: 4.5rem,
  3: 4rem,
  4: 3.5rem,
  5: 3rem,
  6: 2.5rem
);

$display-font-family: null;
$display-font-style:  null;
$display-font-weight: 300;
$display-line-height: $headings-line-height;

Lead #

Make a paragraph stand out by adding .lead.

RESULT

This is a lead paragraph. It stands out from regular paragraphs.

Inline text elements #

Styling for common inline HTML5 elements.

RESULT

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the class="d-color-black" document.

This line of text will render as underlined.

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

Be careful to use those tags just for semantic purposes.

  • <mark> stands for text that has been underlined or highlighted for notation or reference.
  • The text in <small> type, such as copyright and legal text, represents side comments and small print.
  • The symbol <s> stands for elements that have lost their accuracy or relevance.
  • A stretch of inline text with the symbol <u> should be shown to show that it has a non-textual annotation.

Instead, you ought to make use of the classes listed below to style your text:

  • The same styles as <mark> will be applied by.mark.
  • "small" will be used by "small."
  • .text-decoration-underline apply the same style as <u> and <s>
  • text-decoration-line-through apply the same styles as <u> and <s>

Although not seen above, feel free to use HTML5's <b> and <i> tags. While <i> is usually used for voice, technical jargon, etc., <b> is intended to draw attention to specific words or phrases without adding any additional significance.

Text utilities #

The [text utilities] and [color utilities] allows to change the alignment, transformation, style, weight, line-height, decoration, and color of the text.

Abbreviations #

Implementation of the HTML's <abbr> element for acronyms and abbreviations that is styled to display the expanded version upon hover.

Abbreviations now feature a help pointer and a default underline to give users of assistive technologies and users of hover context more information.

<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>
RESULT

attr

HTML

Blockquotes #

For quoting blocks of content from another source within your document. Wrap <blockquote class="blockquote"> around any HTML as the quote.

RESULT

A well-known quote, contained in a blockquote element.

Naming a source #

According to the HTML specification, blockquote attribution must appear outside of the <blockquote> tag. Use a <figcaption> or a block level element (such as a <p>) with the .blockquote-footer class to provide attribution when using a block quote. Make careful to include the source work's name in the <cite> tag as well.

RESULT

A well-known quote, contained in a blockquote element.

Alignment #

Use text utilities as needed to change the alignment of your blockquote.

RESULT

A well-known quote, contained in a blockquote element.

RESULT

A well-known quote, contained in a blockquote element.

<figure class="text-end">
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
<figcaption class="blockquote-footer">
Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
</figure>

Lists #

Unstyled #

Remove the immediate children's only list's left margin and default list style. The class must also be added for any nested lists since this only applies to items in immediate children lists.

RESULT
  • This is a list.
  • It appears completely unstyled.
  • Structurally, it's still a list.
  • However, this style only applies to immediate child elements.
  • Nested lists:
    • are unaffected by this style
    • will still show a bullet
    • and have appropriate left margin
  • This may still come in handy in some situations.

Inline #

Remove a list's bullets and apply some light margin with a combination of two classes, .list-inline and .list-inline-item.

RESULT
  • This is a list item.
  • And another one.
  • But they're displayed inline.

Description list alignment #

Use the preset classes (or semantic mixins) of the grid system to align terms and descriptions horizontally. Add a .text-truncate class to the document to ellipsis the text for lengthier phrases.

RESULT
Description lists
A description list is perfect for defining terms.
Term

Definition for the term.

And some more placeholder definition text.

Another term
This definition is short, so no extra paragraphs or anything.
Truncated term is truncated
This can be useful when space is tight. Adds an ellipsis at the end.
Nesting
Nested definition list
I heard you like definition lists. Let me put a definition list inside your definition list.

Title headings #

Lorem..

        
    <div class="title-1 pb-3 mb-3 border-bottom">Title 1</div>
    <div class="title-2 pb-3 mb-3 border-bottom">Title 2</div>
    <div class="title-3 pb-3 mb-3 border-bottom">Title 3</div>
        
    
RESULT
Title 1
Title 2
Title 3

Label headings #

Lorem..

        
    <div class="label-1 pb-3 mb-3 border-bottom">Label 1</div>
    <div class="label-2 pb-3 mb-3 border-bottom">Label 2</div>
    <div class="label-3 pb-3 mb-3 border-bottom">Label 3</div>
        
    
RESULT
Label 1
Label 2
Label 3

Body headings #

Lorem..

        
    <div class="body-1 pb-3 mb-3 border-bottom">Body 1</div>
    <div class="body-2 pb-3 mb-3 border-bottom">Body 2</div>
    <div class="body-3 pb-3 mb-3 border-bottom">Body 3</div>
        
    
RESULT
Body 1
Body 2
Body 3

Responsive font sizes #

With responsive font sizes set by default in UX4G 5, text may now scale more organically across devices and viewport widths. See the RFS page to learn more about how this functions.