Typography

Typography is the design and use of typefaces as a means of verbal commmunication.

Reference: https://www.thoughtco.com/what-is-typography-3467428

WebFonts required

The use of the Roboto font requires the user's browser to have WebFonts enabled.

Learn more

To learn more visit Bootstrap's Typography documentation.

Roboto

The GEL uses the Roboto font family with graceful degredation to a similar available platform-specific font if the browser is unable to fetch the Roboto WebFont.

Domo arigato.

Headings

Titles, subtitles, headlines, subheads, labels, and other short lines of emphasized text that identify and divide sections of a web page, application screen, form or other larger unit of content. Headings are essential to support content organization and scannability.

Reference: Adapted from http://www.adobe.com/products/type/adobe-type-references-tips/glossary.html

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Text Weights

The thickness and boldness of text can be specified with the .text-font-* classes.

Reference: https://www.thoughtco.com/web-typography-101-3470009

Light
Light Italics
Regular
Regular Italics
Bold
Bold Italics

Text Alignment

The alignment of text can be controlled with the .text-left, .text-center, and .text-right classes.

Reference: https://www.thoughtco.com/web-typography-101-3470009

Left

Center

Right

Body Text

The paragraphs of a web page, application, form, etc., that comprise the bulk its copy. Body text should be set in an appropriate and easy-to-read face, typically at 10- or 12-point size.

Reference: http://www.adobe.com/products/type/adobe-type-references-tips/glossary.html

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

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

The following snippet of text is rendered as bold text.

The following snippet of text is rendered as italicized text.

An abbreviation of the word attribute is attr.

Contextual Alternatives

Colored typefaces are used to provide additional context to the header / text message.

This is primary.

This is accented.

This is informative.

This is successful.

This is a warning.

This is dangerous.

This is muted.

Lists

An ordered or unordered list of items which can be nested.

  • Frank F. Borman, II
  • James A. Lovell, Jr.
  • William A. Anders
  1. Frank F. Borman, II
  2. James A. Lovell, Jr.
  3. William A. Anders

Blockquotes

A section of content such as a verbatim passage or quote from an attributable source that is usually indented on both sides, giving the content wider margins than other content, presenting a "block" appearance.

Reference: Adapted from https://www.w3schools.com/TAGS/tag_blockquote.asp

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Monospace

A font in which each character takes up the same amount of horizontal space. In contrast, characters of proportional fonts vary in the amount of horizontal space they consume.

Reference: http://www.proximasoftware.com/fontexpert/terms/#m

Recommended

The use of .text-monospace is strongly recommended when displaying the following:

  • Train ID
  • Station
  • Car / Locomotive / Equipment ID
  • Date / Time / Timestamp

Text can be displayed with fixed-width font and perserved whitespace by adding the class="text-monospace": H KCKBAR1 21 A

Keyboard shortcuts

Keyboard shortcuts can be documented by using the <kbd> tag.

Press Ctrl + S to save.

Code Snippets

A small section of source code that can be inserted into a program or file to provide functionality, structure or styling.

Reference:https://techterms.com/definition/snippet

An inline snippet: println 'Hello, world'

A block snippet:

println 'Hello, world'
Third-party Content Disclaimer