Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

339 Bytes of Responsive CSS

blog.koley.in

Post reply on HN
Print view View original

71–80 of 101 posts

Re: 339 Bytes of Responsive CSS

#71

Post by tw20190409mhbcd »

new_here wrote: post #25

All this CSS minimalism reminds me of Dan Luu's post about Web Bloat: https://danluu.com/web-bloat/ His website is refreshingly light and fast, but that's still no excuse for Times New Roman. Maybe it's a retro irreverence thing.

Hardly anyone is writing their styles to set the body text to Times New Roman. Aside from serif typefaces not actually being so bad, if you're seeing Times New Roman on sites like these, it's because you haven't set your default font and your browser is falling back to it on your system.

Fixing this in Firefox is as easy as opening about:preferences in a new window and selecting your preferred sans font. Dan's site will instantly be transformed, and every other site like his (e.g. http://cr.yp.to/ https://motherfuckingwebsite.com etc) will be rendered similarly for all future visits.

Re: 339 Bytes of Responsive CSS

#72

Post by arendtio »

Sometimes I wish some of those markdown viewers would come with such an effective CSS. For example, the KDE document viewer Okular can display markdown files but they look just awful.

Once I tried finding the source of the Okular style but ended up creating a custom script to convert Markdown files to PDF files with a custom CSS (via Chromium...).

Re: 339 Bytes of Responsive CSS

#73

Post by arendtio »

dxxvi wrote: post #65

Personally, I hate max-width which is a way to waste the screen estate, I think.

Kinda funny... While I understand your point I feel the opposite. I hate it when people do not include a max-width because then I have to care about it. Yes, the Firefox reader view makes it quite easy, but I still prefer having a ready-to-read layout by default.

But you are right, in this case, it all comes down to personal preference.

Re: 339 Bytes of Responsive CSS

#74

Post by gb »

caillou wrote: post #58

There is a small accessibility problem with the CSS presented on this page. The author set `text-decoration: none;` on the links, relying only on color to identify them. This should be avoided. C.f. https://accessibility.oit.ncsu.edu/it-accessibility-at-nc-st...

Also related, the link/background colour combination fails WCAG contrast guidelines.

Re: 339 Bytes of Responsive CSS

#75

Post by crehn »

asattarmd wrote: post #3

Good, but I'd replace that font with the default: `font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif` It'd remove the unnecessary font and still look good.

Nowadays `font-family: system-ui, sans-serif` is good enough.

Re: 339 Bytes of Responsive CSS

#76

Post by DanBC »

mort96 wrote: post #34
onion2k wrote: post #5

It's ironic that the author chose to use a page that loads 1.5Mb of data, including 12 separate stylesheets, to write about a minimal stylesheet.

It's 339 bytes of CSS which loads 2.3k of font css which loads 21k of woff2. 23k requiring two round trips (three if the stylesheet is in a separate file, four including the initial HTML load), and to prevent FOUT, the browser won't show any text at all until all the round trips are completed (or it decides it's taking too long and shows the wrong font). Plus you're adding a dependency on Google for no good reason. I…

Fira looks fucking terrible.

Light weight, small, skinny, sans-serif is hard to read for most of the population.

It might be okay for 20 years olds with great monitors. It's tedious for everyone else.

Re: 339 Bytes of Responsive CSS

#77

Post by deftnerd »

vladocar wrote: post #22

Here is something similar: https://github.com/vladocar/Basic-CSS-Typography-Reset

This is spectacular, thank you. It's small enough to just inline into the webpage and provides a nice enough experience to just leave it alone for a very basic page.

Re: 339 Bytes of Responsive CSS

#78

Post by DanBC »

r0bbbo wrote: post #35
new_here wrote: post #25

All this CSS minimalism reminds me of Dan Luu's post about Web Bloat: https://danluu.com/web-bloat/ His website is refreshingly light and fast, but that's still no excuse for Times New Roman. Maybe it's a retro irreverence thing.

Times New Roman is fine - serif fonts are supposedly more readable - it's the line widths that kill me here - figuring out which line you're due to start on next really disrupts flow

You can resize the window and the text flows to fit, which is something a weird amount of websites prevent you doing. You can ctrl+ to increase font size if it's too small, or ctrl- if it's too big.

I dislike the white background, but otherwise it's very readable for the way I use web browsers -- one of some open windows.

Re: 339 Bytes of Responsive CSS

#80

Post by DanBC »

arkokoley wrote: post #44
andrepd wrote: post #43

Why such thin grey text? Why sacrifice readability as a matter of principle? What's wrong with black on white, like a regular f*cking book or newspaper?

Because paper is paper and screens are different. The white paper is slightly on the grey side compared to white on screen. And that hurts to look at for long. Thin text is a personal preference that I made here. No principles there.

The problem isn't the colour choice for the font. The problem is with the colour choice of the background combined with the weight of the font and a thin-stroked sans font.

It's hard to read for many people.

Post reply on HN