4 ms·
Why should it look the same everywhere? * website navigation often contains text * User-Interface controls often contain text I'm less concerned about trying
by err4nt 11y ago
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 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 $$$ :)
- J_Darnley 11y agoThank god I can force my browser to not do what you tell it to.
- err4nt 11y ago…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 http://staticresource.com/basic-test.html Let's see some of your HTML J_Darnley :)
- J_Darnley 11y agoNot 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.
- slavik81 11y agoI 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?
- err4nt 11y agoYeah, 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 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.
- chei0aiV 11y agoUnfortunately browsers make it hard to actually disable CSS, you can disable it after page load but not before.
- e12e 11y agoWell, by design (which sadly Chrome breaks) CSS prioritizes user styles: https://www.viget.com/articles/inline-styles-user-style-sheets-and-accessibility 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.
- alanh 11y agoIndeed you can! I have bookmarklets that will let you override this dastardly and unfortunately common bit of CSS: http://alanhogan.com/bookmarklets#subpixel 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.)
- dchest 11y agoWhy 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-smoothing/ http://usabilitypost.com/2012/11/05/stop-fixing-font-smoothi...
- anon4 11y agoWhen Microsoft fixes subpixel smoothing to not introduce colour fringing, then maybe. But I'm not going to hold my breath. Edit: and yes, I can see it here: http://img.usabilitypost.com.s3.amazonaws.com/1211/antialiased.png http://img.usabilitypost.com.s3.amazonaws.com/1211/antialias... in the screenshot of the article saying not to "fix" broken text rendering. Red on the left, blue on the right, clear as day - it's absolutely atrocious. I want monochrome text, not clown text.
- acdha 11y agoBe careful with optimizeLegibility - it's been the source of a number of compatibility issues over the years: http://stackoverflow.com/a/12430050 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.