7 ms·

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 diff

by err4nt 11y ago

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 :)

J_Darnley 11y ago
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.
- bitwize 11y ago
  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.
  - alanh 11y ago
    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.
    - cm3 11y ago
      Why is there no maximum font size setting? It would help with many sites and some of the current design fashion.
      - alanh 11y ago
        I dunno! But you can set page zoom to less than 100% :)
        cm3 11y ago
        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.
        J_Darnley 11y ago
        That used to be the default action of zoom many years ago. There is probably still some obscure about:config option for it.
        cm3 11y ago
        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.
        alanh 11y ago
        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.
  - esrauch 11y ago
    > 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.
  - simoncion 11y ago
    > 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.
    - cm3 11y ago
      Exactly. HTML is fluid and dynamic for a reason. If not then it already would be more like PDF.
    - err4nt 11y ago
      Where is the option to disable CSS in Mobile Safari in iOS? Where is the option to disable CSS in Chrome on Android?
      - cm3 11y ago
        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.
        NoGravitas 11y ago
        Firefox on Android (Fennec) supports Stylish, Greasemonkey, and NoScript.
- 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 ago
    Thank 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 :)
tomc1985 11y ago
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.
- RandomBK 11y ago
  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.
  - bzbarsky 11y ago
    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.
    - RandomBK 11y ago
      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.
alanh 11y ago
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.
pdkl95 11y ago
> cuts down on a lot of cross-browser layout bugs 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.
- err4nt 11y ago
  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 Yes, this is how I introduce it to others: http://codepen.io/tomhodgins/post/an-introduction-to-html http://codepen.io/tomhodgins/post/an-introduction-to-html 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 :)
  - pdkl95 11y ago
    > Looking at the last month's Google Analytics Which means you're ignoring the people that either block GA specifically or don't run javascript. > how could you even possibly keep track of what system fonts they all have available? You don't. That's why you design for em/ex/rem units, or use designs that don't care. > are actually of better quality than most system fonts as well That's personal opinion. > but you get the same font everywhere No, you don't. For example, I have a long list of entries like this in my ~/.fonts.conf <match target="pattern" > <test name="family" qual="any"> <string>Helvetica Neue</string> </test> <edit name="family" mode="assign_replace"> <string>Ubuntu</string> </edit> </match> You also don't know if the CSS or webfont actually loaded - you shouldn't ignore network errors.
codedokode 11y ago
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).
bobwaycott 11y ago
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.
- err4nt 11y ago
  > 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.
  - bobwaycott 11y ago
    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.
paulddraper 11y ago
How do you have cross-browser layout bugs but not cross-language bugs? German vs Japanese makes a bigger difference than a font with half a pixel more kerning.

by err4nt 11y ago

J_Darnley 11y ago

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.

bitwize 11y ago
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.
- alanh 11y ago
  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.
  - cm3 11y ago
    Why is there no maximum font size setting? It would help with many sites and some of the current design fashion.
    - alanh 11y ago
      I dunno! But you can set page zoom to less than 100% :)
      - cm3 11y ago
        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.
        J_Darnley 11y ago
        That used to be the default action of zoom many years ago. There is probably still some obscure about:config option for it.
        cm3 11y ago
        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.
        alanh 11y ago
        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.
- esrauch 11y ago
  > 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.
- simoncion 11y ago
  > 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.
  - cm3 11y ago
    Exactly. HTML is fluid and dynamic for a reason. If not then it already would be more like PDF.
  - err4nt 11y ago
    Where is the option to disable CSS in Mobile Safari in iOS? Where is the option to disable CSS in Chrome on Android?
    - cm3 11y ago
      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.
      - NoGravitas 11y ago
        Firefox on Android (Fennec) supports Stylish, Greasemonkey, and NoScript.
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 ago
  Thank 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 :)

tomc1985 11y ago

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.

RandomBK 11y ago
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.
- bzbarsky 11y ago
  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.
  - RandomBK 11y ago
    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.

alanh 11y ago

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.

pdkl95 11y ago

> cuts down on a lot of cross-browser layout bugs 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.

err4nt 11y ago
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 Yes, this is how I introduce it to others: http://codepen.io/tomhodgins/post/an-introduction-to-html http://codepen.io/tomhodgins/post/an-introduction-to-html 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 :)
- pdkl95 11y ago
  > Looking at the last month's Google Analytics Which means you're ignoring the people that either block GA specifically or don't run javascript. > how could you even possibly keep track of what system fonts they all have available? You don't. That's why you design for em/ex/rem units, or use designs that don't care. > are actually of better quality than most system fonts as well That's personal opinion. > but you get the same font everywhere No, you don't. For example, I have a long list of entries like this in my ~/.fonts.conf <match target="pattern" > <test name="family" qual="any"> <string>Helvetica Neue</string> </test> <edit name="family" mode="assign_replace"> <string>Ubuntu</string> </edit> </match> You also don't know if the CSS or webfont actually loaded - you shouldn't ignore network errors.

codedokode 11y ago

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).

bobwaycott 11y ago

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.

err4nt 11y ago
> 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.
- bobwaycott 11y ago
  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.

paulddraper 11y ago

How do you have cross-browser layout bugs but not cross-language bugs? German vs Japanese makes a bigger difference than a font with half a pixel more kerning.