enough.css

Most, if not all, browsers default to Times New Roman as the typeface, with a font size of 16 pixels and a line height of 125 %. Enough.css produces larger, responsive text in a modern typeface, with more spacing between lines:

html{
  font: calc(1em + 0.25vw)/1.4 system-ui, sans-serif;
}

Smaller font sizes are great for 14″ monitors with low resolutions, but produce text that’s uncomfortable to read on modern displays.

Enough.css uses CSS’s calc() function to produce a font size based on the browser default, plus 0.25 % of the viewport width through the vw unit. That produces the following font sizes:

In practice, this means a font size of around 17 pixels on phones, maximum screen usage on tablets and a responsive font size that’s configurable by resizing the window on desktop.

The preferred font family is system-ui, which points to the operating system’s default font. This produces text in Apple’s San Fransisco font on macOS and iOS, and falls back to a sans-serif font on other platforms.

Finally, the line height is 140 %, producing a 28 pixel line height for 20 pixel body text.

Enough.css adds a maximum width to pages to keep lines from running too long, with padding that ensures there’s always some space between the text and the sides of the page, even if the window is resized:

body{
  margin: auto;
  padding: 0 1em;
  max-width: 40em;
}

A 40 em page width produces an 800-pixel wide page if for a 20 pixel font size, fitting around 85 characters per line. A 1 em padding is added to the sides, which produces 20 pixels on each side for a 20 pixel font size, which are added to the page’s width.

As the window becomes wider, the side paddings increase to keep the body in the center of the window. If the window is narrower, the body also becomes narrower. The padding remains at 1 em, but reduces in size because of responsive font sizing.

To keep images and video tags from overflowing and producing horizontal scroll bars, enough.css caps their widths to 100 % of the body width:

img, video{
  max-width: 100%;
  height: auto;
}

Doing this automatically scales images and videos down to fit the page. Setting an automatic height makes sure the images or videos keep their aspect ratio, even if they’re resized.

Code, either in <code> tags, <kbd> tags, or <pre> blocks, uses a monospace typeface and a smaller font. <pre> blocks have an outline, some padding, and scroll bars when overflowing.

code, kbd, pre{
  font-family: ui-monospace, monospace;
  font-size: 0.8em;
}

pre {
  overflow: auto;
  border: 1px inset;
  padding: 1em;
}

pre > code{
  font-size: 1em;
}

Enough.css switches code elements to the ui-monospace font family, which is Apple’s SF Mono font in Safari on macOS and iOS. Otherwise, it falls back to the system’s monospace font.

The font size is reduced to 0.8 em for both code blocks and tags. The 0.8 em size gives enough space for roughly 80 characters on bigger screens, and 50 characters on most phones. If a code block doesn’t fit the page body, a scroll bar is displayed instead of overflowing.

Tables take the full width of the page and have collapsed borders around each cell. Each cell also has a slight padding to give the data some breathing room:

table{
  border-collapse: collapse;
  width: 100%;
}

td, th{
  padding: 0.5em;
  border: 1px solid;
}

By default, the width of tables is based on their contents. Enough.css stretches tables to have them fill the page width.

Each table cell has a 1-pixel solid border, without a set color. Omitting the color reuses the body text color, which is black by default. The border-collapse property is used to combine the borders of adjacent cells.

A minified version of enough.css is bundled in enough.min.css. It’s generated by passing the source file through Minify:

minify enough.css | tr -d "\n" > enough.min.css

The minified version of enough.css should always be kept up to date. As a convenience, it’s recommended to set up the minification command as a git pre commit hook. A script for this is prepared in scripts/pre-commit. To enable it as a pre-commit hook, symlink to it from git’s hooks directory:

(cd .git/hooks && ln -s ../../scripts/pre-commit)

With the pre-commit hook set up, the minification command will be automatically run before changes are committed. To commit a change without running the hook, use the --no-verify flag.