My blog's 2.4kb. It's way too big (and my blog sucks on mobile). I've been rethinking about how I can redesign my blog to be as close to http://bettermotherfuckingwebsite.com/ as possible.
965 bytes for mine. I should (but didn't, will tonight) minify the CSS, which will bring it down to 650 bytes. My site is very much in line with BMFW and IMO it looks pretty nice. But it's also very, very basic.
There are very few things that I would style for a text-based website:
1) The h1, h2, p, strong, and a elements. Font-family, font-size, color, a:hover, and line height attributes only.
2) Create a container (eg: max-width 44em, margin: 0-auto, width: 100%) to wrap everything in.
From there the "heaviest" parts of the blog would be navigation and how accessible you want a complete archive list to be or if Previous/Next links would be suffice.
Yes! You're completely right and I've argued something similar against sites that like to set 62.5% font size on body. Thank you for calling out my poor example! I'll update it if it lets me.
Change the font size from 18px to 12px and then to 24px to simulate users with varying default font sizes set in their browser. Note how the containers change. While it will vary from person to person, a fixed 800px width of a container with 12px font size is far too wide for my taste and far too narrow for 24px. While I find 44em is better for both.
Note: I do not suggest ever changing the font size of body but it makes the example easy to use.