Type Scale

Heading 1

Heading 2

Downscaled 1

Heading 3

Downscaled 2

Heading 4

Downscaled 3

(Heading 5)

Downscaled 4

Text Body

By default, all text in main is formatted with as .text_body class. Strong and emphasized text is styled accordingly.

Text color

We support 3 different text colors: [default], .high-emphasis, and low-emphasis. The default text has opacity of 82%.

This paragraph has the "atomic" style .high_emphasis, and should have high emphasis, and thus opacity of 1.00

This paragraph has the "atomic" style .low_emphasis, and should have low emphasis, and thus opacity of 0.68

The .text_body class can be used to override default styles for text-elements like this h3

Body text

Quoting?

And a quote!

Lists

Ordered list

  1. An Item
  2. Another Item

Unordered list

  • An item
  • Another item

Styling lists

For condenced lists, we use class .compact

  • An item
  • Another item

Typography

A longish treatise on typography for the Cyan, Pelilauta, and Mekanismi.

Usage

The following set of Google fonts links are expected to be present at <head>

<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&family=Roboto+Mono:wght@500&display=swap" rel="stylesheet">

h1

The h1 element and the accompanying class .TypeheadLine1 are used to communicate the high-level purpose of a page or an article. Should a view consist of multiple "pages", like a book style layout with multiple chapters with titles, multiple h1's are allowed (though, not recommended).

Desktop and tablet

H1 abc

The large screen variant for 1st level headings follows google material design suggenstions, for the chosen font (Lato). Should you override the font - please also check the material font tool suggestions for full list of suggested font styles.

Mobile

Headline1, downscaled

The downscaled variant of a h1 uses font styles from material design tool level 3 headings. On mobile screens, the base varian is automatically downscaled, so there should be no difference between the variants.

Cards

A h1 is never used in a Card.

h2

The h2 element and the accompanying class .TypeheadLine2 are used for large headings in a view.

Desktop and tablet

H2 abc

The large screen variant for 2nd level headings follows google material design suggenstions, for the chosen font (Lato). Should you override the font - please also check the material font tool suggestions for full list of suggested font styles.

Mobile

Headline2, downscaled

The downscaled variant of a h2 uses font styles from material design tool level 4 headings. On mobile screens, the base varian is automatically downscaled, so there should be no difference between the variants.

Cards

Headline2, in a card

A h2 is downscaled to level 3 in a Card. Do note, that the card variant will also be downscaled to level 4 for mobile viewport.

In general, using a h2 in a card, is discouraged.

h3

The h3 element and the accompanying class .TypeheadLine3 are used for small headings in a view.

Desktop and tablet

H3 abc

The large screen variant for 3rd level headings follows google material design suggenstions, for the chosen font (Lato). Should you override the font - please also check the material font tool suggestions for full list of suggested font styles.

Mobile

Headline3, downscaled

The downscaled variant of a h3 uses font styles from material design tool level 5 headings. On mobile screens, the base variant is automatically downscaled, so there should be no difference between the variants.

Cards

Headline3, in a card

A h3 is downscaled to level 4 in a Card. Do note, that the card variant will also be downscaled to level 5 for mobile viewport.

In general card headings should default to h3.

h4

The h4 element and the accompanying class .TypeheadLine4 are used for the smallest headers available.

Desktop and tablet

H4 abc

The large screen variant for 4th level headings follows google material design suggenstions, for the chosen font (Lato). Should you override the font - please also check the material font tool suggestions for full list of suggested font styles.

Mobile

Headline4, downscaled

The downscaled variant of a h4 uses font styles from material design tool level 6 headings. On mobile screens, the base variant is automatically downscaled, so there should be no difference between the variants.

Cards

Headline4, in a card

A h4 is downscaled to level 5 in a Card. Do note, that the card variant will also be downscaled to level 6 for mobile viewport.

In general a second level heading in a card should use h4.

Column width

The width of text elements is bounded by artificial ch.

This div is 67ch wide
This div is 42ch wide (golden ratio from 67ch)
This div is 26ch wide (golden ratio from 42ch)

The three "book-sized" paragraphs lend us to following measurements:

  • 67ch is roughly 700 px (in 4px increments)
  • 42ch is roughly 440 px (in 4px increments)
  • 26ch is roughly 272 px (in 4px increments)

If a container is wider than 700px, a paragraph should have 2 columns.