VCL typography

Styling for basic typographical elements.

Features

Usage

Headings

Essential structuring of content with heading elements.

headings example

Anchors

Links may be combined with icons using the icogram component like the example below which indicates an external link.

anchors example

Essential

Feel free to use text tags like b or i with the following semantics: b is meant to highlight words or phrases without conveying additional importance while i is mostly for voice, terms you are referring to, etc.

essentials example

Abbreviations

Stylized implementation of HTML's abbr element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.

abbreviations example

Add the vclInitialism class to an acronym for a slightly smaller font size and a transformation to capitals.

Small Caps

small-caps example

Blockquote

A blockquote spanning over multiple lines.

blockquote example

Miscellaneous

miscellaneous example

Subscripts and Superscripts

Superscripted and subscripted text can for example be used for footnotes or chemical formulas. The same classes can be used for all other text classes as they inherit color and font sizing

sub-up example

Pre-formatted Text

Pre-formatted text using the pre element is laid out as typed in the source code i. e. white spaces inside this element are displayed as typed.

pre example

Preformatted Code

code example

Classes

• vclContentLink: A link which can carry an vcl-icogram.

Modifiers

• vclDisabled: To disabled links.
• vclSecondaryTextColor: The secondary text color.

Variables

Font Settings

• --typography-font-family
• --typography-font-family-serif
• --typography-font-family-monospace
• --typography-font-size
• --typography-line-height

Modular Scale Variants

• --typography-mod-scale-1
• --typography-mod-scale-2
• --typography-mod-scale-3
• --typography-mod-scale-4
• --typography-mod-scale-5
• --typography-mod-scale-6

Colors and Decorations

• --typography-text-color
• --typography-link-color
• --typography-link-hover-color
• --typography-link-text-decoration
• --typography-heading-color
• --typography-disabled-color
• --typography-mark-color
• --typography-mark-bg-color
• --typography-code-border-color
• --typography-code-bg-color
• --typography-selected-text-bg-color
• --typography-selected-text-color
• --typography-blockquote-border-color

Demo

example.html on GH-pages.