Skip to Main Content

Fonts & Font Styles

Using Fonts & Font Styles

Coming soon!

Font Family

This attribute allows you to assign a specific font-family to an element. Font family arguments can be customized using the variables found in the themeing section of the documentation.

Usage:

<div data-c-font="STYLE"></div>

Practical Example:

<p data-c-font="serif"></p>

Available Arguments

# STYLE

sans
serif
script
mono / monospace

Scale & Line Height

Clone provides a built in means of controlling a typography scale based on a ratio. The system sets the base font to the user's default browser setting to begin with. By default, Clone uses a 1.333 scale for determining the size of the typography. This can be changed by modifying the $clone-font-scale variable. This scale appears as follows:

Heading 01

Heading 02

Heading 03

Heading 04

Heading 05

Paragraph Copy

Captions & Labels

Please note that this scale is not automatically applied to the heading elements and must be applied manually using the data-c-font-size="SIZE" property. Headings can also be modified using the data-c-heading="HEADING" attribute described below.

# SIZE

h1
h2
h3
h4
h5
normal / regular
small

Line height defaults to 1.5, but can manually changed using the $clone-line-height variable.

Headings

This attribute allows you to assign consistent styles to an element that represents a heading. This attribute is designed in a way that it can be applied to any text element, but generally, it should be used to consistently style the headings in your project to ensure typographic consistency.

Usage:

<h1 data-c-heading="HEADING"></h1>

Practical Example:

<h2 data-c-heading="h2"></h2>

Available Arguments

# HEADING

h1
h2
h3
h4
h5

Theme Variables

The following variables allow you to customize the way headings are displayed project wide. These variables are available for headings 1 through 5, but the example below only shows heading level 1 (replace the number) for brevity.

# THEME VARIABLES

$clone-heading-1-border-color
$clone-heading-1-border-style
$clone-heading-1-border-width
$clone-heading-1-color
$clone-heading-1-font
$clone-heading-1-font-size
$clone-heading-1-font-weight

Font Colour

This attribute allows you to assign a font colour to an element and all of its children.

Usage:

<div data-c-color="COLOR"></div>

Practical Example:

<p data-c-color="c1"></p>

Available Arguments

# COLOUR

white
gray / grey
black
c1 (Theme Colour 01)
c2 (Theme Colour 02)
c3 (Theme Colour 03)
c4 (Theme Colour 04)
c5 (Theme Colour 05)
stop
slow
go

Font Style

This attribute allows you to assign a text style to an element. You can use data-c-font-weight="bold" (found below) to bold items instead.

Usage:

<div data-c-font-style="STYLE"></div>

Practical Example:

<p data-c-font-style="underline"></p>

Available Arguments

# STYLE

italic
underline

Font Weight

This attribute allows you to assign a font weight to an element.

Usage:

<div data-c-font-weight="WEIGHT"></div>

Practical Example:

<p data-c-font-weight="bold"></p>

Available Arguments

# WEIGHT

100
200
300
400 / normal
500
600
700 / bold
800
900

Changelog

Version 2.4.11

Version 2.3.9

Version 2.3.8

Version 2.3.6

Version 2.3.4

Version 2.3.1