Absolutely minimal CSS for readable and responsive HTML documents
Modern CSS can be really compact when approached with a cool head and enough knowledge. This website’s one and only global stylesheet is smaller than many popular CSS “resets” from the early 2010’s. New but already widely adopted features allow to achieve impressive results in a very few lines of code and give the good old HTML that markup power it always deserved.
But sometimes the goal is not to build entire website, but publish one, single, and pretty simple document. There are plenty of options available today, ranging from plain text to PDF — from easiest to make to the one that provides the most bells and whistles. On this chart HTML would cover the whole range:
- It can be truly minimalist, barely more complex than vanilla plain text, and easier than some Markdown flavors;
- It has almost endless extendability, surpassing that of PDF and Word documents;
- It will be far easier to maintain than PDF, and far easier to version control than Word’s
.docx.
Furthermore, with the help of modern CSS HTML can be made truly responsive: equally readable and accessible on tiny smartphone screens and on 65″ television. A feat unattainable by PDF, Word, and even traditionally formatted plain text.
Since we are talking about single, self-contained documents, simplicity is important. It means speed and ease of publishing and distribution. Preferably, the whole stylesheet should fit in one line of code, inlined in the <head> section of the document. And here it is:
<style>html{line-height:1.6;margin:0 max(1ch,calc((100vw - 62ch) / 2));}</style>
Exactly 80 characters, of which 15 are for the <style> tags pair. Only one rule: for <html> element. It might as well be for :root pseudo-class, but html selector is one character shorter than :root. Semantically, they are the same.
Inside this rule there are only two declarations:
The first is for the line height. line-height is one of the very few parameters that have truly awful browser defaults. line-height: 1 or normal is just way too cramped no matter how you look at it. The recommended minimum is 1.5 and I, personally, wouldn’t mind reading long texts with double line spacing. However, the double spacing would only work for the body of text and not for the headings. Styling headings separately would ruin that one-liner simplicity, this is why healthy 1.5 or slightly more “airy” 1.6 is a great middle ground value.
The second declaration controls the document margins. The first value of the short-handed property margin sets the top and bottom margins to be 0. Default margins and paddings of the text elements will give enough space between the text and the horizontal edges of the screen. The second value mimics max-width: 62ch; declaration with calc() function and tells the browser to set the left and right borders to be either 1 character wide or what would remain after centering a block with a maximum width of 62 characters, whichever value is bigger.
These two declarations will make the document look good enough on any screen: from the cheapest of smartphones where it will fill neatly entire screen to the biggest 4k or even 8k monitors, where the text will be placed in the middle of the browser window as a column fitting no more than 62 characters. Lines wider than 50 characters and narrower than 75 characters are easier to read.
Removing any one of these declarations will result in drastic reduce in readability on a wide range of devices. Any further improvements will come at a price of increased complexity.
For starters, we can add a third declaration to the html rule:
font-size:clamp(1rem,2vw,2rem);
This one will keep the base font size at its default value of 16 pixels on small screens, but will increase the font size on screens that can provide viewport wider than 800 pixels. The maximum base font size will be 32 pixels, providing the viewport width is exceeding 1600 pixels.
However, big screen devices often provide tools allowing the user to set the font size and/or content magnification ratio to their taste, so this extra step is not absolutely necessary.