This must be paired with `height: auto`, or your image’s aspect ratio will be messed up if the width gets capped.
> img, svg, video { max-width: 100%; }
… but beware, Chrome 141 has CSS width/height work on nested SVG elements, and auto is being miscalculated. Workaround is to change the `svg` to `svg:where(:not(svg svg))`.
> We’ll just use a basic system-ui for this example. It has pretty good support these days, and looks good on every system without having to worry about loading in any extra fonts.
Please don’t. system-ui is a font for matching the system UI. The UI font is often not good for long content, and in some less common OS/language combinations it’s almost unusable. Stick with sans-serif if that’s what you want. People have been using system-ui as a proxy for a maybe-better sans-serif. This is not what it is, and it is bad to use it so.
> In general, the font-size is a little small as well, so we can bump it up
This is acceptable for larger screens. I reckon 18–20px is a reasonable target, so 1.25rem is fine. But on small screens, please don’t go above 1rem, it’s the platform’s customary size and you don’t have the space to waste.
> the default line-height is always a bit tight, so anything within the 1.5 to 1.7 range should do
Ouch. 1.7 is huge on smaller displays. If you want a single value, I suggest 1.4–1.5. If you want to vary by width, 1.4 on small displays up to 1.6 on large will be reasonable.
> font-family: System UI;
That’s a second glaring error you should instantly observe if you use the stylesheet. I am not encouraged about its quality.
> Some people prefer a dark system theme, but light website themes, and vice-versa.
Sensible browsers let you separate the two. Firefox defaults to having content follow the system theme, but you can change it to just light or just dark.
This is effectively giving a minimum 2rem margin. Well, actually 2rem + 8px once including the default body margin. That’s way too much, and applied in the wrong way.
If you wanted to apply it to the main element, it would be easier and I think more logical to use padding:
main {
max-width: 70ch;
padding-inline: 2rem;
margin-inline: auto;
}
But I doubt that you actually wanted to apply it to main: if you have a site header or footer outside that, you probably still want the same side padding. So it’s probably better to use body margin:
body {
margin: 1rem;
}
main {
max-width: 70ch;
margin-inline: auto;
}
… and I have there decreased it from the wildly-excessive ~40px to the reasonable ~16px.
Realistically much of those layout differences and fine tunings would be handled by media queries, but by that point the amount of code compared to a decently written website with a "regular" amount of CSS would be pretty minimal.
This must be paired with `height: auto`, or your image’s aspect ratio will be messed up if the width gets capped.
> img, svg, video { max-width: 100%; }
… but beware, Chrome 141 has CSS width/height work on nested SVG elements, and auto is being miscalculated. Workaround is to change the `svg` to `svg:where(:not(svg svg))`.
> We’ll just use a basic system-ui for this example. It has pretty good support these days, and looks good on every system without having to worry about loading in any extra fonts.
Please don’t. system-ui is a font for matching the system UI. The UI font is often not good for long content, and in some less common OS/language combinations it’s almost unusable. Stick with sans-serif if that’s what you want. People have been using system-ui as a proxy for a maybe-better sans-serif. This is not what it is, and it is bad to use it so.
> In general, the font-size is a little small as well, so we can bump it up
This is acceptable for larger screens. I reckon 18–20px is a reasonable target, so 1.25rem is fine. But on small screens, please don’t go above 1rem, it’s the platform’s customary size and you don’t have the space to waste.
> the default line-height is always a bit tight, so anything within the 1.5 to 1.7 range should do
Ouch. 1.7 is huge on smaller displays. If you want a single value, I suggest 1.4–1.5. If you want to vary by width, 1.4 on small displays up to 1.6 on large will be reasonable.
> font-family: System UI;
That’s a second glaring error you should instantly observe if you use the stylesheet. I am not encouraged about its quality.
> Some people prefer a dark system theme, but light website themes, and vice-versa.
Sensible browsers let you separate the two. Firefox defaults to having content follow the system theme, but you can change it to just light or just dark.
> main { max-width: min(70ch, 100% - 4rem); margin-inline: auto; }
This is effectively giving a minimum 2rem margin. Well, actually 2rem + 8px once including the default body margin. That’s way too much, and applied in the wrong way.
If you wanted to apply it to the main element, it would be easier and I think more logical to use padding:
But I doubt that you actually wanted to apply it to main: if you have a site header or footer outside that, you probably still want the same side padding. So it’s probably better to use body margin: … and I have there decreased it from the wildly-excessive ~40px to the reasonable ~16px.