Faster to load, but expensive to support. Using the same font everywhere cuts down on a lot of cross-browser layout bugs which stem from different fonts on different systems.
I use web fonts everywhere and can't imagine trying to build any kind of layout relying on system fonts alone. When doing CSS I have to use a giant wishlist like this to try to target a 'nice' font on each system:
font-family: "Source Sans Pro", "Open Sans", Roboto, "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Myriad Pro", "Segoe UI", Myriad, Helvetica, "Lucida Grande", "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, Arial, sans-serif;
Or I could supply the font via @fontface and know it looks identical everywhere :)
What's with this "it has to look identical everywhere" mentality? Do your margins really need to be precisely 10px on every single display? I've always thought one of those most beautiful things about a well-designed layout was how adapts to a variety of viewing scenarios, yet it seems the majority of conversation on the matter is about making sure things are absolutely identical.
Your fonts and even colors could change. Webfonts are great and all til the idiot designer picks some "nice" ultra-thin that, while probably looked real sweet on his/her fancy Retina Cinema Display, looks like ass on mine.
To concur with your point from a somewhat different angle:
> Your fonts and even colors could change. Webfonts are great and all til the idiot designer picks some "nice" ultra-thin that, while probably looked real sweet on his/her fancy Retina Cinema Display, looks like ass on mine.
A colleague made a comment: she's a Chinese speaker with great English. I'm an English speaker with pretty functional Chinese.
"Why are the letters so small. I don't even want to look at it."
This was a default setting. So we increased it to 16px. It was good. It is a pain reading in a script you're familiar with, but not intimately so you've read 1000s-10000s of thousands of words in it per day since childhood. Everyone in the office (in China) appreciated the change.
Then I got the reverse shock, of a colleague releasing an internal website in all I can describe as thin font, grey, light blue background, and around 10px. Chinese characters at 10px are a pain. A massive pain. And I felt the pain that my colleague experienced. He: "Oh, I see. But it looks cool." Me: "Look at how everyone in the office [native Chinese readers] bends their neck when they read this site."
This was an extreme difference, but also should be considered. If you're creating something for an international audience, accommodate those that may have grown up with a different script, and simply read differently. Not a different language - a different script.
I have no idea why this has become a thing, because I completely agree with you. The result of "it has to look identical everywhere" has resulted in lowest-common-denominator design and duplo-style interfaces[1], and it makes me really sad.
I agree with your dislike for thin fonts, as they're unreadable on my screens.
However, the web is more than just text articles, and the precise positioning and display of text is quite important for web applications. It's important for me to know if the text on a button is wrapping or being cut off, and even more important for me know that my application will look the same on every screen.
You mean except for the screen of the user who has weak eyesight (e.g. due to being over the age of 40) and has set a 16px minimal font size in their browser?
I set a 13px minimum font size in my browser (the smallest size I can read comfortably on my screen) and I constantly run into web applications that try to go for the level of control you describe and totally fail because they think 10ps fonts are a good idea. Of course my usual response is to close that tab and never use that web application again if I can help it.
Then what would you suggest? Tradeoffs have to be made between font size and information density. If I was writing a web app for seniors for example, then yes, font size is a major concern. However, the vast majority of people do not set minimum font sizes. From my experience, most users tend to zoom the entire page if they need a larger font, which scales all UI elements (almost) evenly.
Ultimately, web applications (particularly enterprise and other B2B services) are designed to replace a lot of functionality normally relegated to native applications. While it is important to present a nice, clean interface, material design UIs with nice, large fonts and generous margins won't let me show what I need to show without making the user search through menus or scroll across a massive page.
> Tradeoffs have to be made between font size and information density
Well, sure. My personal suggestion is to have lower information density if the higher one can't be achieved without going below the 16px default font size of browsers and allowing scrolling as needed. After all, that's what you end up with _anyway_ if people full-page-zoom. Except now they typically need to scroll in two directions, not one, if the page hardcoded some widths in.
> However, the vast majority of people do not set minimum font sizes.
This is through lack of knowledge, not lack of desire. All the people I've showed this feature too were incredibly happy to see it. All of the older relatives I've set up computers for have minimum font sizes set up.
Keep in mind that as of the 2010 census there were about 309 million people in the US, of whom 74 million were under 18. Of the remaining 234 million, 40 million were over 65 years old: that's about one in 6 adults. Another 59 million were 50-64 years old. Another 22 million were 45-50. So over half the adults are over the age of 45. Oh, and another 21 million were 40-45. See http://www.census.gov/prod/cen2010/briefs/c2010br-03.pdf page 4 or so.
Age-related problems with vision start in the early 40s. So unless you yourself are already experiencing them (and hence can evaluate how usable your web app is), or unless you know your web app will only be used by Silicon Valley startups all of whose employees are in their 20s or something, you should probably assume that a large fraction of your users can't read smaller fonts.
I appreciate that this is a hard problem. I'm just saying that browsers allow users to override whatever styling the web page is doing, they will continue to do that, and as the population ages even further I expect it to become more and more common for users to do just that.
Note that generous margins are not as important as not too small fonts (not to be confused with "large fonts"; the default 16px font of browsers is not a "large font" in any reasonable sense, and yet people keep insisting on having text that is _much_ smaller than that) for purposes of readable text.
> While it is important to present a nice, clean interface, material design UIs with nice, large fonts and generous margins won't let me show what I need to show without making the user search through menus or scroll across a massive page.
Why is 'material design' itself important? It's an arbitrary standard cast by Google, and in the opinion of many of us, it's ugly-as-hell. Same with large fonts and generous margins!
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.
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:
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.
> 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 $$$ :)
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
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.
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.
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.
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.
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.
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.
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.
I'll just point out that your "giant wishlist" is 240 bytes. One web font, even just for one face in one style, can be 20–100 thousand bytes, plus a DNS lookup and at least one additional roundtrip, both of which will block page rendering because at some point we decided it's better to stare at a white page than see a blip of the wrong font.
Which then get reintroduced when the font doesn't load or it gets replaced by local fontconfig. Even though many people like to pretend otherwise, the web is semantic markup, not a precise layout tool. The client controls the rendering - CSS (and the markup) is only a suggestion.
So should we try not to cut down on edge cases then? Looking at the last month's Google Analytics we were visited by over a thousand unique mobile device hardware layouts - how could you even possibly keep track of what system fonts they all have available?
The truth is, some fonts like Source Sans Pro, Open Sans, Source Code Pro, and PT Serif are actually of better quality than most system fonts as well - so not only are you moving toward a font that is going to show up better, but you get the same font everywhere - making sizing and spacing a LOT more predictable.
> the web is semantic markup, not a precise layout tool
I get paid lot to fix these problems so really it's in my be$t intere$t to tell you NOT to use web fonts, and to hire me over and over again fixing sizing and spacing bugs that pop up like whack-a-mole for $$$/hour … but I'd rather be building new things than duct-taping old solutions. If you don't want to have to hire me, use web fonts from the start. It's how I'm going to come in and $olve the problem for you, so why not $ave your$elf the trouble :)
> how could you even possibly keep track of what system fonts they all have available?
CSS declares special pseudo fontnames like serif, sans-serif, monotype that you can set as a backup font. They should work in all browsers.
> I get paid lot to fix these problems so really it's in my be$t intere$t to tell you NOT to use web fonts, and to hire me over and over again fixing sizing and spacing bugs
It only means the person that programmed original CSS code was not qualified enough to do this properly. Why "fix" this by adding multikilobyte download instead of fixing the code?
Egad. That's kind of insane. Wouldn't it be far simpler and cheaper to support to loosen up your layout so you don't need 18 font faces specified? I mean, c'mon.
I think a good layout/design that works with system fonts alone ought to be considered a greater success than a pixel-tight layout that only works with 1 forced-download font that eats up bandwidth, or a questionably "cheaper to support" layout that has a 275-character-long font-family rule.
> Wouldn't it be far simpler and cheaper to support to loosen up your layout so you don't need 18 font faces specified? I mean, c'mon.
Simpler, yes. Cheaper, no, not if you're a business that makes money from their website.
> I think a good layout/design that works with system fonts alone ought to be considered a greater success than a pixel-tight layout that only works with 1 forced-download font that eats up bandwidth
Me too from a technical standpoint, however there is no system font in the same quality as the web fonts I use available on most systems. I'm supplying a font that fixes font issues, it would be amazing if I could install better fonts on every system in the world so I didn't need to supply it.
> a questionably "cheaper to support" layout that has a 275-character-long font-family rule.
Oh that font rule still goes in there in case there's any issue with the webfont. That wishlist I posted is right out of my own CSS files, that's what I use. I can guarantee you that using that font stack with Source Sans supplied via fontface _will_ look better on every system than whatever system font would display from that list if Source Sans is missing. It's literally the best produced font I've ever used (in a technological way, I'm not even considering style here) which makes it very versatile.
I design things all the time that don't include webfonts, it's called my non-professional work. In 2016 if you're paying a professional to create a web layout and they aren't supplying you with a professional-level typeface to work with inside layout, they aren't giving you a complete frontend solution.
Everything you've said throughout this thread is a series of highly opinionated, subjective rationalizations. Yet you continue to deliver these rationalizations as if they're incontrovertible facts. Most of your comments honestly read as if you think you're talking with people who don't deal with this stuff—gasp!, including design and designers—every day ... like you're pitching a sale with a client. Come off it. We are all professionals here, and most of us can see our way through the pitch.
> Everything you've said throughout this thread is a series of highly opinionated, subjective rationalizations.
They are, but they are opinions based on a decade and a half of working with these technologies, and being currently employed as a specialist in responsive CSS. I'm not just giving you my opinions, I've been linking directly to open-source solutions I get paid to provide for clients. No pitch, I've done the opposite—I've given you the jewels. You won't need to hire me to fix these things now if you use my code for free ;)
> Yet you continue to deliver these rationalizations as if they're incontrovertible facts.
Based on hundreds of hours of testing across different browsers and devices, you're going to have to trust me that what I have left is thoroughly tested and proven to work.
I have nothing to gain or lose from what I've said here, but some of the insight and code samples I've provided might help people avoid or fix a whole class of common website bugs - the kind that are hard to reproduce, and hard to test because they usually pop up on exotic hardware or software configurations.
I Hope my opinions, tested code, and experience have helped some professionals in this thread :)
I'm curious how you would approach building a website that isn't broken when viewed on dozens of devices and browsers. Do you have any opinions, code, or suggestions to contribute to the discussion?
Now you're attempting to argue from authority, and it reads like trying to shutter disagreement by implying I'm not contributing to the discussion in your closing graf. That's fairly insulting, friend. Kudos on you for sharing some code you're proud of, but others have also provided the same kinds of critique I would to some of the suggestions you've offered in this thread. And these jewels you speak of don't strike me as such. Design is inherently subjective. There's also a dizzying amount of subjectivity inherent in many people's "proven" technical solutions.
If someone is getting layout bugs from font rendering differences they should learn CSS better. The idea of CSS is to program layout independent from platform or device differences like font rendering or pixel density.
By the way I think downloadable fonts should not be used on technical sites and manuals. As a user I would like to get information as fast as possible and custom fonts make page display slower - browser doesn't render text until font is loaded. It would be nice if Chromium allowed to disable loading fonts on a per-site basis as it does with javascript (which I have disabled by default).
I use web fonts everywhere and can't imagine trying to build any kind of layout relying on system fonts alone. When doing CSS I have to use a giant wishlist like this to try to target a 'nice' font on each system:
Or I could supply the font via @fontface and know it looks identical everywhere :)