Hacker News new | past | comments | ask | show | jobs | submit login

My blog's CSS is 100k. Take out the three embedded base64 webfonts, and it's 6k.



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.

E:

800px -> 44em, see response below.


Unless you have some specific reason to otherwise, please specify container widths using ems instead of pixels.

That keeps things easy to read for users that want to override the font sizes. 40-60 is a good range.


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.

For those who don't yet know why this is a big deal, I made a Codepen to illustrate why: http://codepen.io/anon/pen/eZwxam

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.


Do you know a tool that turns Google webfonts into base64 for direct embedding?



> embedded base64

...




Consider applying for YC's Spring batch! Applications are open till Feb 11.

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: