Air CSS ver. 2.3.2

Font size

To create and design an easily readable interface, you only need a simple ratio-based scale to provide a wide array of visual possibilities and an efficient way to prioritize the information on anything you can build from web pages to a full-featured webapp.

A	A	A	A	A	A	A	A
.f1	.f2	.f3	.f4	.f5	.f6	.f7	.f8

Mnemonics

Bases

Modifiers

Optional extensions

f = font-size

-title = title dedicated size
-subtitle = subtitle dedicated size
1 = 1st step in size scale
2 = 2nd step in size scale
3 = 3rd step in size scale
4 = 4th step in size scale
5 = 5th step in size scale
6 = 6th step in size scale
7 = 7th step in size scale
8 = 8th step in size scale

-m = medium width container
-l = large width container

Examples

<p class="f-title">The quick brown fox ...</p>

The quick brown fox jumps over the lazy dog.

<p class="f-subtitle">The quick brown fox ...</p>

The quick brown fox jumps over the lazy dog.

<p class="f1">The quick brown fox ...</p>

The quick brown fox jumps over the lazy dog.

<p class="f2">The quick brown fox ...</p>

The quick brown fox jumps over the lazy dog.

<p class="f3">The quick brown fox ...</p>

The quick brown fox jumps over the lazy dog.

<p class="f4">The quick brown fox ...</p>

The quick brown fox jumps over the lazy dog.

<p class="f5">The quick brown fox ...</p>

The quick brown fox jumps over the lazy dog.

<p class="f6">The quick brown fox ...</p>

The quick brown fox jumps over the lazy dog.

<p class="f7">The quick brown fox ...</p>

The quick brown fox jumps over the lazy dog.

<p class="f8">The quick brown fox ...</p>

The quick brown fox jumps over the lazy dog.

Source code

/* csslint font-sizes: false */
/* generate: container-rule */
.f-title { font-size: var(--font-size-1, 2.5rem); }
.f-subtitle { font-size: var(--font-size-1, 2rem); }

.f1 { font-size: var(--font-size-2, 1.75rem); }
.f2 { font-size: var(--font-size-3, 1.5rem); }
.f3 { font-size: var(--font-size-4, 1.375rem); }
.f4 { font-size: var(--font-size-5, 1.25rem); }
.f5 { font-size: var(--font-size-6, 1.125rem); }
.f6 { font-size: var(--font-size-7, 1rem); }
.f7 { font-size: var(--font-size-8, 0.875rem); }
.f8 { font-size: var(--font-size-9, 0.75rem); }
/* end generate */