Hacker News Reader

Comment by J_Darnley | Hacker News Reader

Why would it have to look the same everywhere? Browser windows come in varied shapes and sizes. No two OSes and browser combos render text the same way. Do you also use a fixed width div holding everything? One no wider than a VGA screen?

I tell my browser what font to use. I want it to render correctly. I know what does. You probably choose something that doesn't.

View on HN

Why should it look the same everywhere?

* website navigation often contains text

* User-Interface controls often contain text

I'm less concerned about trying to have my lines break in the same place or having the perfect kerning, but if giving the browser some good fonts to work with can cut down a whole ton of tricky, ongoing, hard-to-debug, hard-to-test edge cases then it's a no-brainer!

I still give the whole wishlist, so if for some reason there's no access to google it still does the best it can - my argument is that a professional/commercial web design in 2016 can't lack web fonts because it will co$t more not to have them in developer time. I am that guy that gets paid hourly to track down those bugs.

The other bit of CSS that ought to be on every website EVER, is:

    *,
    *:before,
    *:after {
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      font-kerning: auto;
    }

That bit of CSS is a little bit of magic that makes fonts look the same everywhere, and better than default. This means `font-weight: 500` looks the same in Safari, Chrome, and Firefox, on Windows, on iOS, everywhere. I almost always use `font-weight: 400` as my lightest weight.

I've got a bunch more of my snippets here: https://gist.github.com/tomhodgins/27c29ecb4aceaefe5cdf

> Do you also use a fixed width div holding everything? One no wider than a VGA screen?

Also got a giggle out of this one - I specialize in responsive web layouts, my job is making fixed-width layouts work on phones and tablets, hundreds of devices to make more $$$ :)

Thank god I can force my browser to not do what you tell it to.

…do you disable CSS?

My websites would fare a lot better unstyled than most websites built on top of frameworks like Bootstrap and their 'classy' HTML, but it's still not going to look good without CSS and no online business is going to make more money without CSS than with it.

I'm a big fan of terse, straightforward HTML, plus nice CSS on top of that. I've made (and get a lot of use out of) a basic.css stylesheet I built that supports a few basic themes: http://staticresource.com/basic-test.html

Let's see some of your HTML J_Darnley :)

Not quite. I block javascript with NoScript. I block many third-party requests with RequestPolicy. I block webfonts with uBlock. I have disabled anti-aliasing/font smoothing (almost completely) in Windows.

Some websites make me glad Palemoon still has the View -> Page Style -> No Style option. I do admit a day may come when I do disable CSS once and for all.

I really like those themes. Academic work is often left untouched for decades, so there's definite value in simple pages that look good.

I don't see a license mentioned anywhere, though. Can I use that code on my sites?

Yeah, feel free - consider it under MIT.

Those themes (and more) are included under the 'Template Factory' project over on Github: https://github.com/tomhodgins/template-factory

That package contains more than just basic.css, but also includes three additional styles, and a bunch of simply written responsive CSS + JS plugins as well.

Unfortunately browsers make it hard to actually disable CSS, you can disable it after page load but not before.

Well, by design (which sadly Chrome breaks) CSS prioritizes user styles: https://www.viget.com/articles/inline-styles-user-style-shee...

Unfortunately, as people write more and more convoluted html, and are using javascript techniques for laying out web pages and blogs, not just web applications -- it's becoming harder and harder to have the reading experience one wants, rather than the reading experience some designer fop thinks you should want -- for no good reason.

It started with Microsoft Frontpage setting the background to white without overriding the body text colour by default (so those that had a user stylsheet for reading white/light text on a dark background got zero contrast) -- and has been going steadily down hill from there.

Indeed you can! I have bookmarklets that will let you override this dastardly and unfortunately common bit of CSS:

http://alanhogan.com/bookmarklets#subpixel

(Note: my idiotic web host broke my SSL and this bookmarklet isn't working on HTTPS pages at present. I hope to fix this within the next month.)

Why would you force your users to have inferior font smoothing? This is really bad, don't do it. Subpixel rendering is there for a good reason, don't turn it off. http://usabilitypost.com/2012/11/05/stop-fixing-font-smoothi...

Be careful with optimizeLegibility - it's been the source of a number of compatibility issues over the years:

http://stackoverflow.com/a/12430050

Some of the problems I listed there are less important now that Windows XP is increasingly just a bad memory but I'd strongly recommend using the standard CSS font-features flags to enable whatever your design depends on.

It's not the 1990s anymore. The web no longer belongs to us, it belongs to the graphic design and typography crowd. If there's no guarantee how the browser will render text, that's a huge bug in the Web.

And using a fixed-width DIV -- or cramming everything into a TABLE cell in the old days -- has been recognized as a remedy to one of the Web's most glaring typographical bugs: the tendency to expand the text flow to the width of the browser, which fucks with a human reader's ability to scan the text.

Wrong. The browser is still a user agent. Users can block web fonts (a fantastic idea if you are on shitty internet, by the way), and they have long been able to set a minimum font size

Graphic designers who don’t get the web need new jobs.

Why is there no maximum font size setting? It would help with many sites and some of the current design fashion.

I dunno! But you can set page zoom to less than 100% :)

On some sites it's needed to just resize stupidly large fonts while leaving images out of it. Maybe there should be a text zoom function in browsers.

That used to be the default action of zoom many years ago. There is probably still some obscure about:config option for it.

It's browser.zoom.full in Firefox. Might be nice if it could be used on a per site basis or turned on/off with a button.

Yes. This was what IE6 offered, in fact: text-only zoom. And it only worked on pages that did not define font sizes is px, which is to say: it did nothing on a lot of sites.

> If there's no guarantee how the browser will render text, that's a huge bug in the Web.

We still live in this world. Chrome isn't even internally consistent, hitting reload in the same browser will sometimes give you different kerning.

HTML+CSS is not pdf, even with webfonts.

> If there's no guarantee how the browser will render text, that's a huge bug in the Web.

If that is what one wants, use PDF. Seriously.

I expect that User Agents will continue to give the user the option of overriding any and all styling the fetched web page wishes to apply until long after I am dead.

Exactly. HTML is fluid and dynamic for a reason. If not then it already would be more like PDF.

Where is the option to disable CSS in Mobile Safari in iOS?

Where is the option to disable CSS in Chrome on Android?

Those are limited use, constrained, black box user agents. There are very capable MUAs as well as simplistic mail clients. Maybe you can enable user scripts in some Android browsers.

Firefox on Android (Fennec) supports Stylish, Greasemonkey, and NoScript.

Reply on news.ycombinator.com