Floor Typography CSS

The floor you build style on – Floor Typography CSS is an up-to-date normalizer with the additional minimum for an intuitive default CSS for typography and today’s web-app demands. Licence: ISC

• Default CSS, as simple as needed, with CSS variables.
• Vanilla CSS only, utilizing CSS functions and variables.
• Typography ready, with more typography-handy variables.
• Bloat free. Flexible, light and minimal.
• Optional files brings more default CSS for certain elements or scenarios.
• Relative units em, rem and %.

npm

npm install floor-typography-css

Import the files you need – e.g., with postcss-import and Postcss – floor.css being the core file of Floor Typography CSS. Bundle for production. Once imported globally, Floor Typography CSS will set the default CSS.

floor.css

/* (In your global stylesheet) */
@import 'floor-typography-css/src/floor.css';

floor.css normalizes and sets intuitive CSS defaults, for narrow viewports first. Further, it provides consistent vertical spacing between the needed flow elements, using CSS variables.

Adjust line-height

:root { --added-lead: .5; }. Variable, a decimal number, is added to 1 for root line-height; falls back to .6 – :root has line-height calc(1 + var(--added-lead, .6)).

Adjust block (top and bottom) margins

article { --spacer: calc(1rem * (1 + var(--added-lead, .6))); }. Variable adjusts vertical spacing of the necessary flow elements; falls back to 1rem.

Adjust mono-font

:root { --mono-font: courier new; }. Font variable that sets font-family for pre, code, kbd, samp; falls back to monospace.

More Floor Files

/* (In your global stylesheet) */
/* For normalizing `sub` and `sup`: */
@import 'floor-typography-css/src/floor-sub-sup.css';

headings.css

/* (In your global stylesheet) */
@import 'floor-typography-css/src/headings.css';

headings.css (and related files) sets a simple, distinguishable styling for headings. Headings’ line-height are, in height, set to compute to root line-height(s) for a classically based typography.

The only classes provided with Floor Typography CSS are from the “headings” files – h1, h2, h3, h4, h5 and h6 – to style other elements as headings.

Adjust font-size

Font-sizes for headings should be customized by variables when using this file. The actual font-size is calculated from the following variables, so it’s line-height will compute to the height of one, or more, of it’s container’s normal lines (the nearest container with variable --added-lead – :root by default):

• main { --h1-min-font-size: 2em; } (--h[1,2,3,4,5,6]-min-font-size). Variable, an integer em unit, sets the minimum font size of the heading; falls back to 1em.
• main { --h1-added-lead: .1; } (--h[1,2,3,4,5,6]-added-lead). Variable, a decimal number, that will adjust line-height (and font size) the heading; falls back to .125 for h1, .25 for h2 and --added-lead for the rest.

More Headings Files

/* (In your global stylesheet) */
/* For bigger h1: */
@import 'floor-typography-css/src/headings-md.css';
/* For bigger h1, h2 and h3: */
@import 'floor-typography-css/src/headings-lg.css' (min-width: 1200px);
/* For headings margin: */
@import 'floor-typography-css/src/headings-margin.css'; /* or headings-margin-lg.css */
/* Variables `--headings-font` and `--h[1,2,3,4,5,6]-font` for setting font-families: */
@import 'floor-typography-css/src/headings-font-family.css';

Margins for headings will default to var(--spacer, 1rem) from “floor.css”. There are optional files for margins, or style them as you like, e.g., margins with calc(N * var(--spacer, 1rem)).

Related

The Elements of Typographic Style by Robert Bringhurst, The Elements of Typographic Style: Applied to the Web, text-rendering, Butterick’s Practical Typography, CSS Remedy, Open Props, sanitize.css, normalize.css.