Tips & Tricks for creating a minimal website

Unicode icons

If you want icons on your site, there are a few ways to get them. The most common is an icon font. Obviously, that's not what we want — they're usually heavy. Some of them have the option to download only the icons you need. However, then you need to get a new copy of the font every time you want to introduce a new icon, which gets annoying fast.

Another option is SVG. That's nice for standalone icon, but it's really tricky to make it look good next to text. Also, SVG icon packs often either have too few icons or mix icons with different styles, which doesn't look good.

Fortunately, if we get back to the idea of icon fonts, it turns out that there are already many characters that can be used as icons! Do you need a warning sign? Here you go: ⚠ U+26A0 Warning Sign. How about a checkmark? No problem: ✓ U+2713 Checkmark. Sometimes you'll have to get a little creative. For example, there's no “external link” icon, but ➚ U+279A Heavy North East Arrow works just fine. Or if you need a hamburger menu icon, there is the interestingly named ☰ U+2630 Trigram for Heaven. I recommend the Unicode Table website for looking up Unicode icons.

SVG images

This should go without saying, but whenever you need a simple raster image, use the SVG format. It's lightweight, especially if you write it yourself, and you can embed it directly in HTML, so you don't even need an <img> tag.

Recommended font stacks

The default fonts are ugly, but you can at least try to find a good-looking font on the user's device. Here are two nice font stacks, courtesy of the 512 KB Club and Prism:

/* Sans serif font stack */
font-family: -apple-system,BlinkMacSystemFont,"Avenir Next",Avenir,"Nimbus Sans L",Roboto,Noto,"Segoe UI",Arial,Helvetica,"Helvetica Neue",sans-serif;
/* Serif font stack */
font-family: Constantia,"Lucida Bright",Lucidabright,"Lucida Serif",Lucida,"DejaVu Serif","Bitstream Vera Serif","Liberation Serif",Georgia,serif;
/* Monospace font stack */
font-family: Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;

Choose your framework

You don't need JavaScript for writing articles, but when you want to make something interactive, you'll have to get your hands dirty. Unfortunately, making web apps in plain JS is quite painful — its mechanisms for interacting between the page and the logic are rather rudimentary. There are many frameworks that try to make this situation more pleasant, but they involve inserting a sizable script into your page. I like Vue 3, which is not that bad when it comes to size, but it's really overkill for simple pages. Here is a selection of similar frameworks in decreasing order of size and features: