42 ms·

As much as I believe font matters, I really think people should just use system fonts in general. No content is definitely more annoying than ugly content, but

As much as I believe font matters, I really think people should just use system fonts in general. No content is definitely more annoying than ugly content, but I have a seething hatred for webpages who jump around as content loads. "Let's click on this link... ah, not that link, let's go back. Yes, this link... NO! STOP MOVING!" Besides, I'm used to my fonts. I know your fonts are a deliberate design choice, but I'm here for content. Maybe I'm just a neophyte, because I think a smaller cleaner website is better than a reactive design that has to constantly change to cram everything in. I don't care though, it's stupid when I have to wait 10 seconds for a page to load on my home connection because you've got so much crap going on, and all the while the content is jumping around like a frog with it's butt on fire. If your site sucks, I'm not going to whine about it on twitter, I'm just going to stop visiting.

smacktoward 10y ago
> I know your fonts are a deliberate design choice, but I'm here for content. Categorizing type as "a design choice" dismisses it as fashion rather than function, which I don't think is the case. Type can put fashion over function, but it can also enhance function by making text more readable, or perform a mix of both functions by expressing a point visually that reinforces the point the page is making textually. It is possible to remove meaning from a document by stripping away design. > Maybe I'm just a neophyte, because I think a smaller cleaner website is better than a reactive design that has to constantly change to cram everything in Responsive design and web fonts are different issues; you can use Web fonts on a page without any responsive design elements, and vice versa. > I don't care though, it's stupid when I have to wait 10 seconds for a page to load on my home connection because you've got so much crap going on, and all the while the content is jumping around like a frog with it's butt on fire. This is a real problem, but it has much less to do with either responsive design or Web fonts than with the absolute crap-ton of JavaScript sites lard themselves down with these days to do things like load ads (which is what causes all that jumping around, as slow-loading ad units pop into place and the document has to re-flow everything else to accommodate them). Try turning JavaScript off in your browser some time and you will see this immediately. Here's an example: I was just on Rotten Tomatoes (which uses Web fonts), and was getting annoyed by precisely the kind of spastic layout you rightly decry. As an experiment, I tried loading the home page from a cold cache with JavaScript on, and then again with it off. With scripts on, it took more than 12 seconds for the page to finish loading. Without scripts: under 1 second.
- lomnakkus 10y ago
  > Categorizing type as "a design choice" dismisses it as fashion rather than function, which I don't think is the case. I think it's a question of how often it's one vs. the other. There are precious few good examples of web font usage -- so few, in fact, that I can't even think of one off the top of my head. > Type can put fashion over function, but it can also enhance function by making text more readable, How so? I mean, I've literally chosen my system fonts based on readability (to me, on my screen, with my eyesight, with my lighting conditions, etc!). I'm also used to those fonts. > [...] by expressing a point visually that reinforces the point the page is making textually Do you have any good examples of this? I don't think I've ever seen it "in the wild", so to speak. Disclosure: I'm so annoyed by web fonts that I use a browser plugin which actually overrides fonts chosen by web pages, so I may not have been experiencing a representative sample of "what's out there". I had to have a quick-toggle for that plugin because suddenly it became fashionable to use goddamn fonts for icons. Ugh. Don't get me started :).
  - phkahler 10y ago
    >> > Type can put fashion over function, but it can also enhance function by making text more readable, How so? I mean, I've literally chosen my system fonts based on readability (to me, on my screen, with my eyesight, with my lighting conditions, etc!). I'm also used to those fonts. Oh come on, the "designer" knows what's best for you. ;-) I was going to make a similar response, but you beat me so sarcasm.
    - mbrock 10y ago
      Designers don't typically design for people who change their default fonts because most people don't know how and on some platforms it's not even possible.
  - matt4077 10y ago
    https://www.wired.com https://www.wired.com is excellent in how they use fonts to subtly indicate importance/recency/category. Many newspapers use fonts very consciously, which usually has the effect that it doesn't enter the reader's consciousness. It's a subtle cue indicating the brand and the image it wants to project. oCmpare the NYT and the Economist – they aim to reach almost identical populations, but the NYT uses serifs (tradition, dependence, gravity) vs. the Econmist's sans (modern, fast, business).
cperciva 10y ago
"Let's click on this link... ah, not that link, let's go back. Yes, this link... NO! STOP MOVING!" This is my #1 complaint about reddit. Not due to fonts; but rather when I load reddit on my phone, a "get the reddit app" banner appears... timed perfectly so that my attempt to view my messages sends me off to the app store.
- Mahn 10y ago
  Heck, this is my #1 complaint of almost anything on a mobile browser. It's easily the worst offender when it comes to mobile in general; I wish browser vendors put a bigger focus on fixing this, somehow.
  - wruza 10y ago
    Browser vendors against adclicks, mice against cheese, bees against honey, what you gonna do now?
    - paublyrne 10y ago
      Mice aren't really interested in cheese.
      - haimez 10y ago
        Please, describe how this "mouse" consumes anything other than "cheese" for sustenance.
        saghm 10y ago
        Actually, I think he meant it literally: http://www.earthkind.com/blog/fact-or-fiction-do-mice-really-love-cheese-or-is-this-just-a-myth-cartoons-have-been-feeding-us http://www.earthkind.com/blog/fact-or-fiction-do-mice-really...
        wruza 10y ago
ChuckMcM 10y ago
My experience has been web designers are strongly in either the "system fonts are an abomination before God" camp, or the "the user picked the system fonts, lets use those." camp. Oddly pulling them from one camp into the other seems very very difficult.
- zanny 10y ago
  What happens when a user makes their system font esoteric-new-age-web-sans-font-#523626263278 and your page and the system itself are using the same font?
  - shakna 10y ago
    Its clearly what they want to use. And with em and rem, vw and vh, a change in font doesn't have to screw up the entire page. What I used to see in some early 90s sites, and would love to see again, is customisations. You use the system fonts, your own stylesheets, but have a button that loads and activates a WebFont, changes display colours and the like. It also means that when JS is disabled, or unavailable for some other reason, you can gracefully fallback to a useable site.
  - GrinningFool 10y ago
    Then your page looks like crap - but since it's a guest on the user's system, that's entirely up to them.
  - bandrami 10y ago
    Then the user gets the font she has instructed her system to use, and why the @(*# do you think you know better than her?
- tracker1 10y ago
  I generally prefer a specific font, but will fallback to sans-serif, serif or monospace depending on what I'm styling... I also tend not to have a bunch of fallthrough fonts... ex: specifying helvetica and/or arial should be an offense punishable by a mild beating. Another thing I hate is when people don't specify the weight for black/bold fonts... which makes the fallback even more hideous.
fontsthrowawya 10y ago
I always set browser.display.use_document_fonts = 0 in Firefox. Surfing the web is a more pleasant experience without WebFonts.
- simooooo 10y ago
  What about icon sets? Never find empty buttons?
angry-hacker 10y ago
You can async your fonts and fallback. The jumping issue still remains. You can have similar line height and font word / letter width to jump less. Mozilla has something called font height (?) that should help too. But it's Mozilla only. The jumping task is for browser vendors to fix. Chrome already has an experimental flag to remember position.
beefsack 10y ago
Using system fonts becomes a minefield once you realise they tend to be unique to each platform.
- nikanj 10y ago
  Depends on whether you want to display information or show off design.
- HelloNurse 10y ago
  Typical users vomit and faint when they see text set in Tahoma that was clearly meant for Helvetica, or when a paragraph is one line taller or shorter than the one and only official layout. Telepathic sensitivity to designer intent is extremely common! Don't let elastic, robust CSS layout techniques mess with your pixel-perfect templates!

smacktoward 10y ago

> I know your fonts are a deliberate design choice, but I'm here for content. Categorizing type as "a design choice" dismisses it as fashion rather than function, which I don't think is the case. Type can put fashion over function, but it can also enhance function by making text more readable, or perform a mix of both functions by expressing a point visually that reinforces the point the page is making textually. It is possible to remove meaning from a document by stripping away design. > Maybe I'm just a neophyte, because I think a smaller cleaner website is better than a reactive design that has to constantly change to cram everything in Responsive design and web fonts are different issues; you can use Web fonts on a page without any responsive design elements, and vice versa. > I don't care though, it's stupid when I have to wait 10 seconds for a page to load on my home connection because you've got so much crap going on, and all the while the content is jumping around like a frog with it's butt on fire. This is a real problem, but it has much less to do with either responsive design or Web fonts than with the absolute crap-ton of JavaScript sites lard themselves down with these days to do things like load ads (which is what causes all that jumping around, as slow-loading ad units pop into place and the document has to re-flow everything else to accommodate them). Try turning JavaScript off in your browser some time and you will see this immediately. Here's an example: I was just on Rotten Tomatoes (which uses Web fonts), and was getting annoyed by precisely the kind of spastic layout you rightly decry. As an experiment, I tried loading the home page from a cold cache with JavaScript on, and then again with it off. With scripts on, it took more than 12 seconds for the page to finish loading. Without scripts: under 1 second.

lomnakkus 10y ago
> Categorizing type as "a design choice" dismisses it as fashion rather than function, which I don't think is the case. I think it's a question of how often it's one vs. the other. There are precious few good examples of web font usage -- so few, in fact, that I can't even think of one off the top of my head. > Type can put fashion over function, but it can also enhance function by making text more readable, How so? I mean, I've literally chosen my system fonts based on readability (to me, on my screen, with my eyesight, with my lighting conditions, etc!). I'm also used to those fonts. > [...] by expressing a point visually that reinforces the point the page is making textually Do you have any good examples of this? I don't think I've ever seen it "in the wild", so to speak. Disclosure: I'm so annoyed by web fonts that I use a browser plugin which actually overrides fonts chosen by web pages, so I may not have been experiencing a representative sample of "what's out there". I had to have a quick-toggle for that plugin because suddenly it became fashionable to use goddamn fonts for icons. Ugh. Don't get me started :).
- phkahler 10y ago
  >> > Type can put fashion over function, but it can also enhance function by making text more readable, How so? I mean, I've literally chosen my system fonts based on readability (to me, on my screen, with my eyesight, with my lighting conditions, etc!). I'm also used to those fonts. Oh come on, the "designer" knows what's best for you. ;-) I was going to make a similar response, but you beat me so sarcasm.
  - mbrock 10y ago
    Designers don't typically design for people who change their default fonts because most people don't know how and on some platforms it's not even possible.
- matt4077 10y ago
  https://www.wired.com https://www.wired.com is excellent in how they use fonts to subtly indicate importance/recency/category. Many newspapers use fonts very consciously, which usually has the effect that it doesn't enter the reader's consciousness. It's a subtle cue indicating the brand and the image it wants to project. oCmpare the NYT and the Economist – they aim to reach almost identical populations, but the NYT uses serifs (tradition, dependence, gravity) vs. the Econmist's sans (modern, fast, business).

cperciva 10y ago

"Let's click on this link... ah, not that link, let's go back. Yes, this link... NO! STOP MOVING!" This is my #1 complaint about reddit. Not due to fonts; but rather when I load reddit on my phone, a "get the reddit app" banner appears... timed perfectly so that my attempt to view my messages sends me off to the app store.

Mahn 10y ago
Heck, this is my #1 complaint of almost anything on a mobile browser. It's easily the worst offender when it comes to mobile in general; I wish browser vendors put a bigger focus on fixing this, somehow.
- wruza 10y ago
  Browser vendors against adclicks, mice against cheese, bees against honey, what you gonna do now?
  - paublyrne 10y ago
    Mice aren't really interested in cheese.
    - haimez 10y ago
      Please, describe how this "mouse" consumes anything other than "cheese" for sustenance.
      - saghm 10y ago
        Actually, I think he meant it literally: http://www.earthkind.com/blog/fact-or-fiction-do-mice-really-love-cheese-or-is-this-just-a-myth-cartoons-have-been-feeding-us http://www.earthkind.com/blog/fact-or-fiction-do-mice-really...
        wruza 10y ago

ChuckMcM 10y ago

My experience has been web designers are strongly in either the "system fonts are an abomination before God" camp, or the "the user picked the system fonts, lets use those." camp. Oddly pulling them from one camp into the other seems very very difficult.

zanny 10y ago
What happens when a user makes their system font esoteric-new-age-web-sans-font-#523626263278 and your page and the system itself are using the same font?
- shakna 10y ago
  Its clearly what they want to use. And with em and rem, vw and vh, a change in font doesn't have to screw up the entire page. What I used to see in some early 90s sites, and would love to see again, is customisations. You use the system fonts, your own stylesheets, but have a button that loads and activates a WebFont, changes display colours and the like. It also means that when JS is disabled, or unavailable for some other reason, you can gracefully fallback to a useable site.
- GrinningFool 10y ago
  Then your page looks like crap - but since it's a guest on the user's system, that's entirely up to them.
- bandrami 10y ago
  Then the user gets the font she has instructed her system to use, and why the @(*# do you think you know better than her?
tracker1 10y ago
I generally prefer a specific font, but will fallback to sans-serif, serif or monospace depending on what I'm styling... I also tend not to have a bunch of fallthrough fonts... ex: specifying helvetica and/or arial should be an offense punishable by a mild beating. Another thing I hate is when people don't specify the weight for black/bold fonts... which makes the fallback even more hideous.

fontsthrowawya 10y ago

I always set browser.display.use_document_fonts = 0 in Firefox. Surfing the web is a more pleasant experience without WebFonts.

simooooo 10y ago
What about icon sets? Never find empty buttons?

angry-hacker 10y ago

You can async your fonts and fallback. The jumping issue still remains. You can have similar line height and font word / letter width to jump less. Mozilla has something called font height (?) that should help too. But it's Mozilla only. The jumping task is for browser vendors to fix. Chrome already has an experimental flag to remember position.

beefsack 10y ago

Using system fonts becomes a minefield once you realise they tend to be unique to each platform.

nikanj 10y ago
Depends on whether you want to display information or show off design.
HelloNurse 10y ago
Typical users vomit and faint when they see text set in Tahoma that was clearly meant for Helvetica, or when a paragraph is one line taller or shorter than the one and only official layout. Telepathic sensitivity to designer intent is extremely common! Don't let elastic, robust CSS layout techniques mess with your pixel-perfect templates!