Skip to main content

Intrinsic Typography

Toucaan utilizes a singular utility variable called the --fs to scale all content. The value of the --fs unit is determined by the nature of device being served using the criteria of viewport squarishness.

The variable name --fs stands for Font Size here.

Pending documentation

More documentation w.r.t typesetting, typography, and scaling components to come here later.

Desktop

Since desktop browsers are viewed in landscape mostly, the formula for --fs is as follows:

Setting the --fs variable on a desktop browser
@media (min-aspect-ratio: 2 / 1) { /* Length : Breadth ratio > 2 */
:root {
--shorter-edge: 100vmin; /* Always pick the shorter side for better control on scalability. */
--fs: calc(var(--shorter-edge) / 100);
}
}

@media (max-aspect-ratio: 2 / 1) { /* Length : Breadth ratio < 2 */
:root {
--shorter-edge: 50vw;
--fs: calc(var(--shorter-edge) / 100);
}
}

Blockscoped Scaling

Now the --fs unit above can be used to describe any html element size like any other css unit em, px, or rem.

Example:
.square {
width: calc(20 * var(--fs));
height: calc(20 * var(--fs));
font-size: calc(20 * var(--fs) / 5); /* font size is pinned to the width of the element */
}

Observe the scaling of element and the text within. The text is always pinned to the intrinsic size of the element.

Demos

See the CSS is Awesome example with intrinsic scaling.

View the Homepage of Red Goose that demonstrates intrinsic scaling.