
58 Bytes of CSS to look great nearly everywhere - JoshuaRLi
https://jrl.ninja/etc/1
======
mushufasa
Author mentions this took a long time to arrive at.

I recommend "Web Design in 4 Minutes" from the CSS guru behind Bulma:

[https://jgthms.com/web-design-in-4-minutes/](https://jgthms.com/web-design-
in-4-minutes/)

~~~
ainar-g
Disclaimer: I am not a graphic designer. I am merely a programmer with an
interest in well-crafted, understandable, and readable text. So, read this as
an outsider rant rather than an informed opinion.

    
    
      Black text on a white background can be harsh on the eyes.
    

I have to disagree about the problem here. Black text has been fine since the
first printing press. And if you do want to make a page less in-your-face with
regards to contrast, then it would be much better to dim the background. After
all, the paper we read is mostly this grey-ish, yellow-ish colour.

    
    
      The accent color can be complemented with more subtle shades, to be used on
      borders, backgrounds, or even the body text.
    

The colours they've used in the syntax highlighting just made everything a
confetti explosion. I am not against syntax highlighting, but it shouldn't be
this colourful, unless you give every identifier a computable colour to make
misprints more noticeable.

    
    
      Since text is the main content of a webpage, using a custom font gives the
      page even more noticeable identity.
    

Not a big fan of @font-face. Another host to visit. Another asset to download.
My fonts are fine. If I have the font you like, then great! If I don't, please
make it look reasonable with system defaults.

    
    
      Let's enhance our header with a nice background image from Unsplash.
    

Let's _not._ Massive headers are nothing but a waste of space.

Again, this is a rant. I am just very tired of “designers” doing “pretty”
stuff instead of solving a problem. And that problem is an aesthetically
pleasing, not-eye-hurting, reasonably dense text.

~~~
chipotle_coyote
You don't need to visit another host just because you're using @font-face! The
fonts can be stored locally. If you visit my home page, coyotetracks.org, it
loads five fonts (bold and italic Concourse, and regular, bold, and italic
Equity) for an extra 82.18K -- which, unless you're taking steps to prevent
it, your browser is going to cache from that point on. (If you visit another
page, you'll probably get the regular version of Concourse, too, for an extra
11.45K.)

I just don't get the HN hatred for downloadable fonts _in and of themselves._
If you're talking about an extra megabyte or two of JavaScript and unoptimized
fonts, okay, but that's a problem of implementation. Why this cranky "it's
just the text that matters, stop trying to make it look pretty" mindset?

~~~
Nadya
What is the username in this image? [
[https://i.vgy.me/faxIj4.png](https://i.vgy.me/faxIj4.png) ]

Many people select fonts where there isn't ambiguity between similar
characters like o/O/0 and I/l/1\. Reading the home page for the font [
[https://concoursefont.com/](https://concoursefont.com/) ] gives me a headache
personally. The lowercase 't' and 'f' fight one another. The 'f' with its
flowing curve and the 't' in its rigid straightness makes the text fail to
flow well.

My favorite font is guilty of having ambiguous characters as well - and while
I'm not _personally_ very bothered by it - I can understand and empathize with
the annoyance other people have towards issues like this.

I use Stylus to inject my own stylesheets and force every website to use my
chosen fonts - their design be damned. But I also eventually write my own CSS
for the site myself if I use it frequently so my opinion is likely invalid as
99.9999999% of users would never do that.

~~~
chipotle_coyote
I suppose, as selfish as it might be, that I would like people to at least
_try_ to see if they can bear to use a web site the way I designed it, perhaps
for the same reason a conscientious chef would very likely prefer you to at
least _try_ her food before immediately reaching for the salt and pepper.

As an aside: I don't use Concourse as a body font; it's not something that
strikes me as particularly suitable for long stretches of text. But I think
it's fine in headlines. It also has multiple letter variations you can use,
and my web site uses the "British" stylistic set, which has a different "f"
and "t" (and "l" and a few other characters) from the default used on most of
its site.

------
Raphmedia
It's a cool little snippet but it's nothing more than three run-of-the-mill
CSS declarations. The maximum width is specified, a small padding is applied
and the margins around the element are set to automatic so it centers itself
horizontally.

All the other styles applied on this pages are not part of the snippet. The
weight of the titles, the spacing under the paragraphs, etc., are all
specified on the page's CSS file but not described in the blogpost itself. [0]

I was expecting something akin to normalize.css[1] which normalize the default
styles of your page[2].

There are multiple very lightweight CSS "frameworks" that you should carry
around instead of the snippet shown here. We are talking ~5KB. See
[https://github.com/troxler/awesome-css-frameworks#very-
light](https://github.com/troxler/awesome-css-frameworks#very-light) for a
great list.

[0] [https://jrl.ninja/etc/post.css](https://jrl.ninja/etc/post.css)

[1] [http://nicolasgallagher.com/about-normalize-
css/](http://nicolasgallagher.com/about-normalize-css/)

[2] Normalize CSS aims to make built-in browser styling consistent across
browsers. Elements like H1-6 will appear bold, larger et cetera in a
consistent way across browsers. You're then supposed to add only the
difference in decoration your design needs.

------
discreditable
It's 61 bytes because you're using two spaces instead of tabs! :^)

You can shave off 2 more bytes by using em instead of rem. In your use case
they are functionally the same. Rem is em relative to the root element. Your
<main> pretty much is the root element.

~~~
JoshuaRLi
I definitely considered this! But rem feels more predictable and
straightforward. I have seen debates on em vs. rem, and there is certainly
value with em in websites that have lots of nested and/or discrete responsive
components, but for a very simple site, I quite like rem.

~~~
discreditable
Are you sure you don't have the meanings reversed? REM is the one that ignores
nesting. EM doesn't, so on a simple site it's easier to use correctly.

~~~
JoshuaRLi
I'm sure. For that reason (ignoring nesting), I think rem is easier to use
correctly. I think what you're getting at is that simple sites have little
nesting, therefore em, but I'm thinking about in terms of em being great for
say, css framework developers.

------
rident
The author actually loads 10x that much CSS (546 bytes) into the example page!
[1]

Granted that is still not much but here I've augmented the 546 byte example to
render nearly the same results with only 155 bytes. [2]

I've removed rem units as it's easier for all to understand without them.
Pixel units scale just fine across the browsers available these days so
there's no need for the mental hurdles and explained calculations. I've left
them in the source HTML all the same for the sake of testing. The real feature
making sites look good across a ever widening array of pixel densities today
is this meta tag that was also used in the example HTML: <meta name="viewport"
content="width=device-width"> [3]

Setting a font-family generically on the body tag gives the shortest path to
consistent, doesn't-look-like-times-new-roman, font styling possible.

I left the unmentioned line-height in because it's a good default. It adds a
little basic spacing between wrapping lines of text.

Styling elements that are children of the article to only have bottom margins
gives consistent spacing to all content, and since top margins collapse [4] we
can avoid dealing with them all together.

[1]: [https://jrl.ninja/etc/post.css](https://jrl.ninja/etc/post.css)

[2]: [https://jsfiddle.net/gb0ojdsL/8/](https://jsfiddle.net/gb0ojdsL/8/)

[3]: [https://developer.mozilla.org/en-
US/docs/Mozilla/Mobile/View...](https://developer.mozilla.org/en-
US/docs/Mozilla/Mobile/Viewport_meta_tag)

[4]: [https://css-tricks.com/what-you-should-know-about-
collapsing...](https://css-tricks.com/what-you-should-know-about-collapsing-
margins/)

~~~
JoshuaRLi
Haha yes, I mean 58 bytes for layout, not layout + styling.

Anyways, what you've written here is good, and definitely encompasses some
things I thought about. Two notes for you:

1\. I explicitly preferred Arial and Helvetica over the generic sans-serif is
because I found some other popular web safe fonts didn't look nearly as good,
for example, Open Sans, mainly due to the large x-height.

2\. I don't think rem incurs much cognitive overhead over px, and the main
reason is that it scales with the user-adjustable font size. Try changing your
browser's font size from 16 to say, 20. You'll notice that with px max-width,
# chars per line will decrease a lot, affecting readability. in contrast, rem
max-width will scale nicely.

------
SippinLean
There's more CSS on the page than that though.

And it _doesn 't_ look great everywhere. At 375px-wide the line-length of the
text is ~35 characters, optimal would be 50--70.

~~~
JoshuaRLi
True. By looking great nearly everywhere, I mean the layout of the elements on
most devices. What device do you have that is 375px wide?

w.r.t line-length, there's another suggestion ITT that said to relax the
padding a bit to get a bit more line-length, which I will probably be doing.

~~~
SippinLean
> What device do you have that is 375px wide?

iPhone 6/7/8 users still drives a non-negligible amount of conversion on our
site. We don't target devices, 375px is a general target for the smallest
screen size we'd be likely to encounter.

~~~
JoshuaRLi
Ooh, I just found out the very rectangular Galaxy S9/S9+ viewport is 360x740.
Just wanted to let you know.

------
dredmorbius
ObMFW:

[https://www.motherfuckingwebsite.com/](https://www.motherfuckingwebsite.com/)
[http://bettermotherfuckingwebsite.com/](http://bettermotherfuckingwebsite.com/)

[https://evenbettermotherfucking.website/](https://evenbettermotherfucking.website/)

[https://bestmotherfucking.website/](https://bestmotherfucking.website/)

[https://thebestmotherfucking.website/](https://thebestmotherfucking.website/)

[https://perfectmotherfuckingwebsite.com/](https://perfectmotherfuckingwebsite.com/)

[https://codepen.io/dredmorbius/pen/KpMqqB](https://codepen.io/dredmorbius/pen/KpMqqB)

The OP's 58 bytes _are_ a very good start.

------
theandrewbailey
> main {

Why not target <body> instead? <main> should not have content that is shown on
other pages, like headers, footers, and sidebars, but it makes sense to have
this CSS affect those areas.

~~~
ChristianBundy
Yep, I think the priorities should be <html> and <body>. Here's mine, which
centers the content both horizontally and vertically via flexbox:

    
    
        html {
          display: flex;
          align-items: center;
          justify-content: center;
          min-height: 100%;
        }
    
        @media screen {
          body {
            max-width: 40rem;
            margin: 1rem;
          }
        }
    

It's not perfect, but it works well for simple websites (e.g.
[https://colorclock.hashbase.io/](https://colorclock.hashbase.io/)).

~~~
cimmanom
IIRC, the way browsers interpret margins and widths on the <body> element
isn't consistent; and they may not support overriding block properties on the
<html> element at all. Or maybe they do now, but that certainly wasn't cross-
browser-friendly until very recently.

~~~
SquareWheel
>IIRC, the way browsers interpret margins and widths on the <body> element
isn't consistent

I know IE5.5 doesn't allow resizing of the body, but it was fixed in IE6.

If you're using flexbox it's probably not your chief concern anyway.

~~~
ChristianBundy
Yeah, I should mention that this is only for browsers that support flexbox
([https://caniuse.com/#feat=flexbox](https://caniuse.com/#feat=flexbox)) with
little regard for browsers that are behind on their updates. Thanks for
pointing this out!

------
marcus_holmes
Is it just me, then, that hates the "narrow strip of text down the middle of
my large monitor" school of web design?

I don't understand why I'm being forced to scroll when there's all this blank
space to the sides.

Even on my laptop, this looks strange to me, a huge wide expanse of nothing,
and this little strip of text down the middle of the page.

What's the reasoning behind this?

~~~
0815test
> What's the reasoning behind this?

Lack of multi-column text support on the Web. Optimal readability is around 64
characters per line - more than that hurts quite a bit, especially for long-
form text where accurate scanning is more important.

~~~
Macha
[https://caniuse.com/#feat=multicolumn](https://caniuse.com/#feat=multicolumn)

Even IE10, mobile safari, and the gingerbread android browser support it

~~~
crehn
Support is still bad. There's no easy way to fill columns left to right that
works well on both short articles and very long ones.

------
DantesKite
I think because so many of the people here are programmers, there will be some
incentive to talk about the code, but the design is lovely.

It feels very easy to read. So much clutter has been taken away.

There’s nothing pulling at the edges of your attention and ruining the
experience. I quite like it.

~~~
Eiriksmal
After seeing Gwern's website[0], I immediately knew what design I wanted for
my personal site [1]. Tufte's CSS package is much heavier than these three
rules, but it achieves the same result: Content designed to maximize
readability by removing distracting elements and respecting known typography
rules.

Because I write with an overly-large number of asides, I fell in love with the
Tufte-styled side/margin notes. The resulting text is much easier to read,
since I'm not littering the paragraphs with em-dashes and lengthy
parentheticals.

I hope more people rebel against the Medium-looking websites with massive
images and huge blocknotes in 30px fonts that may or may not just be a line
from the next paragraph or an important point to keep in mind when reading the
next paragraph.

#longformrebellion #endthelisticle

[0] [https://www.gwern.net/About](https://www.gwern.net/About)

[1] [https://lawler.io](https://lawler.io)

~~~
detritus
Lovely, but if you're making a big deal about quotes and pull-aways in your
format, might I encourage you to use proper quotation marks — eg. “The” vs.
"The"?

~~~
Eiriksmal
Thanks for pointing that out. I was under the impression that Pelican's
Markdown parser automatically used typographic quotes vs straight quotes, but
that's apparently not the case.

Edit: Ah, it's an extension to Python-Markdown that is not enabled by default:
[https://python-markdown.github.io/extensions/smarty/](https://python-
markdown.github.io/extensions/smarty/)

~~~
detritus
Ah, much more developed than I — I maintain a site that has a font similar to
yours and I need to manually amend each and every typographic conceit. Not
smart!

~~~
Eiriksmal
No worries! There's always room for improvement. Though my site now
automatically swaps in [0] the correct typographic quotes (thanks again!), I
still have to manually add <section>s and the HTML for the sidenotes, instead
of using some kind of Markdown conceit that gets automatically translated when
the site is compiled. :)

[0] [https://github.com/Eiriksmal/lawler-dot-
io/commit/593d3471e6...](https://github.com/Eiriksmal/lawler-dot-
io/commit/593d3471e66d3f5818f4c37f6e836d5c2daf3d76)

------
mrb
Doesn't look "great" on mobile. 2rem margins are way too big for a phone
screen. Too much wasted space.

~~~
charliepark
2vw would be a reasonable substitution, as it creates a dynamic margin, based
on the screen's "view width". Smaller screens → smaller margins.

~~~
JoshuaRLi
Thanks for bringing vw to my attention, it sounds great! I tried it out and
the main problem is 2vw looks much more reasonable on many mobile displays,
but puts a lot of top margin on wide screens (laptops/monitors). I still want
to retain the same size margins for top/bottom and left/right, so a happier
medium would be to vw for mobile and rem for tablets/laptops/monitors, but
then that's too much trouble for diminishing returns in my opinion.

~~~
mrb
Just use 1rem everywhere. There is no reason for the hideously large 2rem
margin. Another person said it's just opinion, but I'm sure 9 out of 10 users
would tell you 1rem is the better looking option overall.

------
Iv
Still wastes 60% of my display's width.

Sorry, if you are into minimalist design I keep getting back there, with 58
bytes less of CSS:
[https://motherfuckingwebsite.com/](https://motherfuckingwebsite.com/)

~~~
fjp
From that website:

>Yes, this is fucking satire, you fuck

> I'm not actually saying your shitty site should look like this.

~~~
Iv
> Websites aren't broken by default, they are functional, high-performing, and
> accessible. You break them. You son-of-a-bitch.

------
rococode
I notice that the author doesn't use capitals either and I'm not sure if
visually I like that or not. It makes it feel more casual which is nice, but I
think it does get harder to parse the sentences.

~~~
JoshuaRLi
I am going for the casual feel, although I am aware for some people it does
hurt readability. But I quite like it, and want to indulge a little on my own
site :)

~~~
Theodores
There is a CSS rule for everything lower case. If Google gets a snippet of
your page and puts it in the less casual results it looks silly in lower case.
The content needs to be written with capital letters and punctuation and
styled to be casual.

------
saagarjha
> font-family: Arial, Helvetica, sans-serif;

Putting Arial _before_ Helvetica :(

~~~
JoshuaRLi
I've got to save browser CPU cycles! /s

------
ape4
Can say I love the choice of background color.

~~~
JoshuaRLi
Thank you! I'm going for a pastel-like palette individual to each top level
directory, if you poke around a bit. Website is still in early stages, so
colors aren't fully thought out yet, but I'm very glad to hear you like it.

~~~
DyslexicAtheist
how would you go about choosing a color palette? do you use tools to generate
a palette[1] or is there some secret recipe or common rule set that graphic
designers follow to come to a final combination that makes sense?

[1] [https://github.com/dylanaraps/pywal](https://github.com/dylanaraps/pywal)
<\- just discovered this yesterday during a weekend effort to improve the
color combination used by my window manager, ...

~~~
frosted-flakes
In my experience, automated color palette generation tools look cool, but
don't work that well. Most applications or websites need far more colours than
people think, even if those colours are used sparingly. This example chapter
from the Refactoring UI book called "Building Your Color Palette"[0] was quite
helpful, even though I didn't buy the book.

[0] [https://refactoringui.com/previews/building-your-color-
palet...](https://refactoringui.com/previews/building-your-color-palette/)

------
Semaphor
I find it interesting that this snippet is used:

::selection { background-color: #ff0; }

Because when f.lux raises the color temperature for the evening it makes it so
I can barely see if anything is selected while the normal color works
perfectly no matter the temperature I set. At first, I thought it was one of
those JS scripts that prevent selection.

~~~
avip
f.lux makes many websites (and indeed apps in general) harder to read, or just
look awful. Not sure it's reasonable to expect an arbitrary website to be
"f.lux compatible".

~~~
Semaphor
Never had any problems with sites being hard to read. But I also don't really
visit overstyled sites.

Not to mention that you actually have to do the effort to make it incompatible
:)

------
littlestymaar
My favorite resource about minimalist CSS :
[http://bettermotherfuckingwebsite.com/](http://bettermotherfuckingwebsite.com/)

And at least it uses its own recommendations, whereas the OP isn't (it ships
way more CSS than the mere 58bytes it talks about)

------
peterwwillis
> it took me a surprising number of iterations to arrive at this point.
> perhaps that speaks to the fact that i know nothing about "modern" web
> development, or [..] just how hard it is to keep it simple in a world of
> complication.

It's the latter. Being both simple and good is not easy.

------
Nadya
I recognize some of those scrots. Funny to see another /g/ent with a
minimalist setup and website.

I have about twice the amount of CSS, but most of it was to match my personal
setup of colors/fonts:
[https://nadyanay.me/assets/css/style.css](https://nadyanay.me/assets/css/style.css)

361 characters (yours) vs 615 characters (mine)

Remove the font family and .fav classes and some of the unnecessary border
overrides and mine comes out to a more equivalent 319 characters, while still
retaining the spacing and color scheme.

------
oftenwrong
Looks great even without CSS. The only exception is a very wide viewport.

1024x768: [https://i.imgur.com/NEAenbY.png](https://i.imgur.com/NEAenbY.png)

320x568: [https://i.imgur.com/TdVjnKR.png](https://i.imgur.com/TdVjnKR.png)

3480x1600: [https://i.imgur.com/MfhxmRD.png](https://i.imgur.com/MfhxmRD.png)

~~~
spuz
Why would you want to disable the CSS?

~~~
wtallis
I think the point is that, aside from max-width, this does very little that
the browser's default stylesheet doesn't already provide.

------
nwmcsween
Please don't do this with max-width it makes printing a huge mess, I regularly
have to edit max-width on sites that set it so I don't have to print double or
triple the number of pages, at least set max-width to be a relative unit for
print.

~~~
mixmastamyk
Max-width is the correct setting for the desktop, where windows are resized to
enable proper reflow. Printing web pages should be quite rare, no?

~~~
tyre
either way:

    
    
        @media print {
          …
        }

------
msla
That text area is way too narrow. It inhibits scanning to be unable to see
very much of the text at once, because it forces you to scroll see more than
about a paragraph at a time.

Readability isn't the concern. Show me a book with margins that gigantic.

------
ascar
Cool! For my personal taste a little bit too much padding for my Galaxy S9
though. 1.25rem or 1.5rem would be sufficient and gives another 1-2 characters
per line. But that's mostly personal taste.

~~~
JoshuaRLi
Would you mind taking the time to provide a screenshot? What you suggested
sounds like a good idea to me!

~~~
ascar
Here you go [https://imgur.com/a/BzMdUtQ](https://imgur.com/a/BzMdUtQ)

I think I can't edit the styles in Chrome on Android though. (no dev tools)

This [https://imgur.com/a/I3CHas1](https://imgur.com/a/I3CHas1) is for
comparison a screenshot of the mobile HN padding.

~~~
JoshuaRLi
Cool, thanks! It's 1.5rem now if you hard refresh :)

------
long-lazuli
I would suggest you to always put a `color` when you define a `background-*`.
Now that website can support darkmode, it would be a shame to see a white text
on this yellowish background...

------
bjourne
I'm definitely going to steal your website design (please don't sue me). But I
don't like sans-serif fonts. What serif fonts do you recommend to use instead?

~~~
JoshuaRLi
I don't care and am instead flattered :) Would appreciate a mention in the
comments if you indeed do, though.

As for serif fonts, I would recommend doing what the other comment suggests.
To expand on that, if you find that a particular safe web font [1] looks
better for your site, you can explicitly prioritize it. For example, I did
Arial -> Helvetica -> sans-serif.

[1]:
[http://web.mit.edu/jmorzins/www/fonts.html](http://web.mit.edu/jmorzins/www/fonts.html)

------
natch
I’m an outsider to this world so please forgive the basic question: what is
“main”?

Does its use depend on any particular markup in the HTML?

And how far back does it go as a CSS feature?

~~~
extra88
"main" is not CSS, it's an HTML element introduced as part of HTML5. All
modern browsers support it, Firefox since 2013. No version of Internet
Explorer supports it but all versions of Microsoft Edge do. Browsers ignore
elements they don't recognize (they don't ignore what's within them) which
does mean they will ignore CSS statements that only uses "main" a selector.

Modern browsers that support the element will present it as a "main" landmark
to assistive technologies. Landmarks (header/banner, footer, main, navigation,
etc.) are a useful way for people who use assistive technologies (mostly
screen readers for the visually impaired) to get a sense of a page's layout
and to move around within a page's contents.

[https://developer.mozilla.org/en-
US/docs/Web/HTML/Element/ma...](https://developer.mozilla.org/en-
US/docs/Web/HTML/Element/main)

~~~
natch
Thanks!

------
jayrwren
This is definitely better than nothing.

I personally prefer a bit more so that It looks good on my old crappy phone
with far fewer than 600px wide. water.css is great.

------
chrisseaton
> it appears that the default font size for most browsers is 16px, so 38rem is
> 608px

What does px mean in CSS? I thought it was pixels but clearly not...

~~~
Raphmedia
"The px unit is the magic unit of CSS. It is not related to the current font
and usually not related to physical centimeters or inches either. The px unit
is defined to be small but visible, and such that a horizontal 1px wide line
can be displayed with sharp edges (no anti-aliasing). What is sharp, small and
visible depends on the device and the way it is used: do you hold it close to
your eyes, like a mobile phone, at arms length, like a computer monitor, or
somewhere in between, like an e-book reader? The px is thus not defined as a
constant length, but as something that depends on the type of device and its
typical use."

[https://www.w3.org/Style/Examples/007/units.en.html](https://www.w3.org/Style/Examples/007/units.en.html)

~~~
chrisseaton
> What is sharp, small and visible depends on the device and the way it is
> used

How can you use this vague definition to do anything useful?

I would imagine they simply mean 'it's a pixel, or something as physically
large as pixels used to be until we got retina screens' but they can't say
that as it doesn't sound technical enough!

~~~
Raphmedia
Pretty much, yes. Screens changed and evolved so now it doesn't mean much and
most people will attempt to skip using them.

------
snickerbockers
Sorry OP, but it doesn't look good everywhere. You're only using the middle
1/3 of the screen on desktops.

------
dredmorbius
Three more:

    
    
        body { font-size: medium; }
        main, article, content { font-size: 1rem;}
        p, li, dd, dt, blockquote { font-size: 1em; }
    
    

Give the user their default font size, _not_ some px-defined kludge.

Em vs rem:
[https://news.ycombinator.com/item?id=19608806](https://news.ycombinator.com/item?id=19608806)

------
WrtCdEvrydy
Interesting.

I'd recommend Water.css for a more through out-of-the box experience that
looks great anywhere.

------
vitaminCPP
Assuming that JoshuaRLi is Josh:

I really like your site. A minimalist website is surprisingly hard to achieve.

~~~
JoshuaRLi
Thank you! I've indeed sunk a surprising amount of effort and time to make
this. I have like, 5 directories of past iterations that didn't "feel like the
one" spanning a bit more than a year.

------
CozyBunneh
Looks like crap on high resolution monitors >.>

------
firexcy
Then the page is ruined by the disastrous Arial font.

------
stackzero
As someone else who is not versed in CSS this is epic

------
tasuki
Love this! 58 bytes of css... and it's typographically better than Wikipedia
and many other "styled" websites!

------
matthewhartmans
I dig it! Good job!

------
asimjalis
This is beautiful.

------
sureaboutthis
> that speaks to the fact that i know nothing about "modern" web development

I thoroughly agree with his statement and just wanted to post this to help
emphasize the fact.

------
draw_down
> max-width: 38rem

> supporting 600px displays at a minimum seems reasonable.

Max-width is just that: maximum width. That CSS is not "supporting 600px
displays at a minimum".

------
nacs
Another good resource for this "minimal" approach is:

[https://motherfuckingwebsite.com/](https://motherfuckingwebsite.com/)

.. and it's followup:

[http://bettermotherfuckingwebsite.com/](http://bettermotherfuckingwebsite.com/)

(Both are SFW sites except for the use of expletives in the URL/title).

~~~
SebiH
There's also
[https://bestmotherfucking.website/](https://bestmotherfucking.website/)

