44 ms·

How Changing WebFonts Made Rubygems.org 10x Faster

159 points by rtcoms 11y ago

J_Darnley 11y ago
Even faster: not using any.
- 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.
    - 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.
- bluedino 11y ago
  spoiler alert: they end up only using them in one place. And switched to Gooogle fonts.
- Angostura 11y ago
  Why not just use Lynx?
robgering 11y ago
I've worked with numerous projects using Typekit or Google Fonts, and a few that used typography.com by Hoefler & Co. Google Fonts has far and away been the best experience, both for development and for the users. Kudos to the Google Fonts team. I wonder if Google plans to add a paid collection of premium fonts to its library – while I prefer open source fonts, I know a number of designers who use very specific fonts outside of what's currently available for free.
matt4077 11y ago
Oh wow. This guy changed the font to Arial(!) because "Using WebFonts for "body" text - paragraphs, h3 and lower - seems like a loser's game to me. The visual differences to system fonts are usually not detectable at these small size". It's not just the font that's grotesque here. Of course a 'normal user' isn't usually noticing the fonts a website uses. In fact, they shouldn't. But fonts still influence how people perceive the website. Using this guy's insane logic, we could get rid of all craftsmen, because nobody notices the details anyway. Even more tragic: Rubygems was apparently loading 12 styles&weights of that font and only using two. He could've thrown out the 10 unused variations and gotten almost the same result without resorting to violating someone's design. Why exactly is Rubygems giving idiots access to it's source code?
- schneems 11y ago
  > Using this guy's insane logic, we could get rid of all craftsmen, because nobody notices the details anyway. Hyperbolic much? > Why exactly is Rubygems giving idiots access to it's source code? It's open source https://github.com/rubygems/rubygems https://github.com/rubygems/rubygems all idiots have access to the source code, even you. I think the words you're looking for are "Thanks for taking the time to make Rubygems faster, and for doing a write up on it to show the costs and benefits of using a webfont. Now I see that style can come at the cost of performance. I'm curious what the speed differences would have been if they had gotten rid of the 10 unused font variations and kept the current webfonts." Even better would have been "I ran the benchmarks for my suggested change and found it to be nearly as fast, I don't think we should sacrifice all visuals for the sake of performance, here's a link to my PR to Rubygems to re-instate the webfonts with a script on how to reproduce my findings. Thanks everyone for all your free open source work, and for sharing what you've learned." I get what you're trying to say, blowing it out of proportion and being highly critical of people doing free work for you in their free time while doing nothing to remedy the situation isn't going to help anyone.
  - Angostura 11y ago
    No, what he is trying to say is that the approach that was taken appears misguided. The speed improvement is largely gained by not downloading unwanted font variants. All the work mucking about with the designer's body copy style isn't going to have much effect - unless I'm missing something.
comex 11y ago
It might be nice if browsers automatically kept a running estimate of connection speed based on previous page loads, and exposed it to new pages via JavaScript or even as a CSS media query. That way sites could serve their fancy webfonts (and other large assets) to users on fast connections who won't notice the difference, and omit them for slower users without making them wait for the load to time out. Of course, the speed estimate could be wrong if the bandwidth bottleneck (on either previous sites or the current one) is further than the last mile, especially for e.g. Chinese users whose Internet speeds are drastically slower with international peers than domestic ones. Or alternately if the user is on a mobile connection and is moving quickly between areas with good and poor reception, going on and off Wi-Fi, etc., although in that case the browser could incorporate signal strength data from the OS. Still, on an Internet whose users have wildly varying connection speeds, I think it makes sense to allow leveraging the difference somehow.
- nateberkopec 11y ago
  Hm, you could probably hack something together with the PerformanceTiming API, which makes a lot of these timings available to JavaScript: https://developer.mozilla.org/en-US/docs/Web/API/PerformanceTiming https://developer.mozilla.org/en-US/docs/Web/API/Performance...
- deleted 11y ago
  [deleted]
- IanCal 11y ago
  A flip for that might be to move the decision to the client instead. If you could tag up resources that are expensive but not totally necessary and provide alternatives (more than just for images). For the server-side, perhaps you could make use of the quality parameter in the content-type headers to play about?
dwightgunning 11y ago
"As developers, our job isn't to tell the designers "Hey, you're dumb for including over 500KB of WebFonts in your design!" ... As performance-minded web developers, our job is to deliver the designer's vision in the most performant way possible." Design is all about trade-offs. Performance is part of the experience and that's something all designers should care about. Developers should definitely raise this type of issue when it arises (albeit without the name-calling and in a collaborative manner).
- alanh 11y ago
  Yes. In particular, it can be effective to use network conditioning to show and share the "flyover state small-town internet experience" with said designer, who doubtless has insanely fast internet at work (and home). http://alanhogan.com/slow-it-down-gain-empathy http://alanhogan.com/slow-it-down-gain-empathy ⁂ And to your point, I do love this Brad Frost quote (which I share in my article above): > Ultimately, performance is about respect.
  - nateberkopec 11y ago
    Worth noting Chrome DevTools makes this super easy now - network throttling is built-in to the tool and can be applied any time DevTools is open.
    - stephenr 11y ago
      On OSX there is a system-wide prefpane (part of Xcode extras) called Network Link Conditioner that allows you to quickly simulate different connection speeds, even different levels/quality of wireless signal. Any Browser-testing that only works in a single browser is honestly worthless.
      - lstamour 11y ago
        Not true. I could make the comeback "any network throttling that only works on a single OS is honestly worthless," since people browse on non-Apple OSes. Though I will agree the prefpane is a cool tool if you can find it on the Apple Dev Downloads site. It can even run on iOS, for any app, not just the web. The Chrome solution will work on Windows too, though, or use Fiddler. More such tools can be found at http://stackoverflow.com/questions/3536249/simulating-slow-internet-connection http://stackoverflow.com/questions/3536249/simulating-slow-i...
swanson 11y ago
For those curious, the relevant PRs/issues appear to be: https://github.com/rubygems/rubygems.org/issues/1095 https://github.com/rubygems/rubygems.org/issues/1095 https://github.com/rubygems/rubygems.org/pull/1109 https://github.com/rubygems/rubygems.org/pull/1109
lifthrasiir 11y ago
> Is WOFF2 just that good? Regardless of the following paragraphs (which give a primary reason of `unicode-range` CSS property), it is that good. Brotli, a compression algorithm used by WOFF2, is a very good fit for regular-looking but non-repetitive data---that includes many binary formats including OpenType. I have seen at most 10--20x improvements over uncompressed TTF.
tater_sent_me 11y ago
This is why i just force my browser to use comic sans for everything.
losvedir 11y ago
Are there any good resources for what fonts are loaded by default in different versions of Windows, Linux, OS X, iOS, Android, etc? Do people have good "web safe font stacks" that specify relatively similar fonts that are commonly installed in the different browsers out there? It seems like a nice middle ground to provide a somewhat unique and nicely styled experience, without forcing the user to download a bunch of extra stuff, and also possibly keeping it a little more "native" looking in whatever browser they're using.
- lucaspiller 11y ago
  On Android the only fonts available on all systems are the Droid fonts (which are mapped to the generic serif, sans-serif etc in CSS). Apps can bundle their own fonts, but they aren't available at a system level.
- rangibaby 11y ago
  I have started using just system "sans-serif" as much as possible. You can get far better returns from having correct for your specific design font sizes and leading, rhythm, etc. than using the current trendy not-Helvetica.
csense 11y ago
> As developers, our job isn't to tell the designers "Hey, you're dumb for including over 500KB of WebFonts in your design!" Yes. Yes it is. I want to browse the web of 2006 with an Internet connection of 2016. I really wish websites wouldn't require me to download hundreds of different JavaScript libraries, fonts, Flash, video files, and who knows what responsive AJAX nonsense. I really like minimalist websites that do what they need to do without tens of megabytes of cruft. Like this one.
- seanwilson 11y ago
  To give a suggestion in the middle, a good approach is to inform the designers about the technical implications of their designs and present options that work around the technical issues so a compromise can be found.
  - deleted 11y ago
    [deleted]
  - 50CNT 11y ago
    Loading times/responsiveness are certainly a design constraint, and designers need to be aware of this. Imagine a print designer that didn't know about bleed, DPI or colour showing through paper. They may not personally be in charge of printing things, but they absolutely need to have domain knowledge or work with someone that does.
  - matt4077 11y ago
    It feels like designers really have a bad rep here and I have no idea why. I mean, yes, there are horrible websites out there – but those are just made by bad designers. If I look at the actually ambititous people, those comparable to the HN crowd of programmers, I just see enourmous competence. They no longer do web design with a desktop publishing mindset (that's a clich=e of the 90ies). They've rebranded to User Interface Design, to Interaction Design and to whatever "Service Design" may be. Which means: they usually know better than most programmers that design isn't about something being pretty, but that it's part of an interaction of machines, data & humans. I seriously don't know any designer who isn't obsessed with usability, load times, discoverability and so on. You also can't get a degree today without at least a few semesters of python. Do they always hit the right balance between performance and features? I don't know. But it appears as if there's a fundamental principle: Just like some would like to surf the 90ies web with the 2016 connection, others may want to run Windows 2000 on today's computers, or get a car from the 60ies produced in today's effiecient factories. In all these areas, the creative people as well as (too an overwhelming extend) the consumers have chosen a balance that appears to work ok. And anyone complaining here be better only writing in C & Assembly.
iamleppert 11y ago
- Using Google for your fonts has been proven to be a nightmare for me in the past. Google does a good job at serving their own interests but don't expect them to put up a consistently good effort for their free shit. - The OP makes some weird kind of pedantic performance argument about moving script tags around in the head for some possible optimizations. Anyway, it wouldn't make any difference and your page would still be blocked if Typekit failed to load. - The text parameter to Google web fonts would render any prior cache-ability gains moot and could potentially change the unique ID of the resource as the text of your site changes. I'm not trying to be too negative, but I don't see what all the fuss is about with this article? Yeah, someone added a big bloated third party font service. You found it, and removed it. Shouldn't Rubygems be using some unicode or built in serif font anyway? They're going to need all the perf improvements they can get when their time to first byte is 300+ ms. ;-)
- elaus 11y ago
  > Using Google for your fonts has been proven to be a nightmare for me in the past. How so? I had only good experiences with Google fonts, especially compared to other services or just plain self-hosting of font files.
Throwaway14530 11y ago
I disable web fonts for all my browsing. For the most part, it's fine and speeds up responsiveness. In rare cases, I run into problems when a website has decided to replace its icons with fonts, but generally, those sites are overly designed and I usually avoid them. If I absolutely need to visit a site that uses mission-critical webfonts, I'll just open IE, do my business, and get out.
technicolor 11y ago
FWIW, Typekit has an async loader script that doesn't block the rendering. Same is the case with Google web fonts. Both services use the open source WebFontLoader[1] library behind the scenes (which is mentioned in the article). Typekit has a feature they call language subsetting which reduces the file size of a particular typeface family by removing language support based on user selection. This can reduce font sizes quite a bit. >Google Fonts doesn't use any JavaScript (by default, anyway), which makes it faster than almost any JavaScript-enabled approach This involves a stylesheet which means the rendering is blocked until it is downloaded and processed and the users will see a page with blank text until that happens. Sometimes it is better to show the content (even in a fallback font) instead of a blank page. 1: https://github.com/typekit/webfontloader https://github.com/typekit/webfontloader
b1530678 11y ago
Funnily enough replacing a 61 byte gif with a 168 byte png reduced loading times of one of my sites by 150ms.
stegosaurus 11y ago
This article is a good example of just how bonkers the 'modern web' is. In a reasonable world my browser would instantaneously load the content (text fits in a couple of TCP packets) and I'd have an option to choose Shiny Mode (or a bar to toggle it on permanently with). Instead, half of the 'articles' I come across on the web don't work without animated full page transitions, pop-ups within the page, blah blah. I preferred the MARQUEE tag, quite frankly.

159 points by rtcoms 11y ago

J_Darnley 11y ago

Even faster: not using any.

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.
  - 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.
bluedino 11y ago
spoiler alert: they end up only using them in one place. And switched to Gooogle fonts.
Angostura 11y ago
Why not just use Lynx?

robgering 11y ago

I've worked with numerous projects using Typekit or Google Fonts, and a few that used typography.com by Hoefler & Co. Google Fonts has far and away been the best experience, both for development and for the users. Kudos to the Google Fonts team. I wonder if Google plans to add a paid collection of premium fonts to its library – while I prefer open source fonts, I know a number of designers who use very specific fonts outside of what's currently available for free.

matt4077 11y ago

Oh wow. This guy changed the font to Arial(!) because "Using WebFonts for "body" text - paragraphs, h3 and lower - seems like a loser's game to me. The visual differences to system fonts are usually not detectable at these small size". It's not just the font that's grotesque here. Of course a 'normal user' isn't usually noticing the fonts a website uses. In fact, they shouldn't. But fonts still influence how people perceive the website. Using this guy's insane logic, we could get rid of all craftsmen, because nobody notices the details anyway. Even more tragic: Rubygems was apparently loading 12 styles&weights of that font and only using two. He could've thrown out the 10 unused variations and gotten almost the same result without resorting to violating someone's design. Why exactly is Rubygems giving idiots access to it's source code?

schneems 11y ago
> Using this guy's insane logic, we could get rid of all craftsmen, because nobody notices the details anyway. Hyperbolic much? > Why exactly is Rubygems giving idiots access to it's source code? It's open source https://github.com/rubygems/rubygems https://github.com/rubygems/rubygems all idiots have access to the source code, even you. I think the words you're looking for are "Thanks for taking the time to make Rubygems faster, and for doing a write up on it to show the costs and benefits of using a webfont. Now I see that style can come at the cost of performance. I'm curious what the speed differences would have been if they had gotten rid of the 10 unused font variations and kept the current webfonts." Even better would have been "I ran the benchmarks for my suggested change and found it to be nearly as fast, I don't think we should sacrifice all visuals for the sake of performance, here's a link to my PR to Rubygems to re-instate the webfonts with a script on how to reproduce my findings. Thanks everyone for all your free open source work, and for sharing what you've learned." I get what you're trying to say, blowing it out of proportion and being highly critical of people doing free work for you in their free time while doing nothing to remedy the situation isn't going to help anyone.
- Angostura 11y ago
  No, what he is trying to say is that the approach that was taken appears misguided. The speed improvement is largely gained by not downloading unwanted font variants. All the work mucking about with the designer's body copy style isn't going to have much effect - unless I'm missing something.

comex 11y ago

It might be nice if browsers automatically kept a running estimate of connection speed based on previous page loads, and exposed it to new pages via JavaScript or even as a CSS media query. That way sites could serve their fancy webfonts (and other large assets) to users on fast connections who won't notice the difference, and omit them for slower users without making them wait for the load to time out. Of course, the speed estimate could be wrong if the bandwidth bottleneck (on either previous sites or the current one) is further than the last mile, especially for e.g. Chinese users whose Internet speeds are drastically slower with international peers than domestic ones. Or alternately if the user is on a mobile connection and is moving quickly between areas with good and poor reception, going on and off Wi-Fi, etc., although in that case the browser could incorporate signal strength data from the OS. Still, on an Internet whose users have wildly varying connection speeds, I think it makes sense to allow leveraging the difference somehow.

nateberkopec 11y ago
Hm, you could probably hack something together with the PerformanceTiming API, which makes a lot of these timings available to JavaScript: https://developer.mozilla.org/en-US/docs/Web/API/PerformanceTiming https://developer.mozilla.org/en-US/docs/Web/API/Performance...
deleted 11y ago
[deleted]
IanCal 11y ago
A flip for that might be to move the decision to the client instead. If you could tag up resources that are expensive but not totally necessary and provide alternatives (more than just for images). For the server-side, perhaps you could make use of the quality parameter in the content-type headers to play about?

dwightgunning 11y ago

"As developers, our job isn't to tell the designers "Hey, you're dumb for including over 500KB of WebFonts in your design!" ... As performance-minded web developers, our job is to deliver the designer's vision in the most performant way possible." Design is all about trade-offs. Performance is part of the experience and that's something all designers should care about. Developers should definitely raise this type of issue when it arises (albeit without the name-calling and in a collaborative manner).

alanh 11y ago
Yes. In particular, it can be effective to use network conditioning to show and share the "flyover state small-town internet experience" with said designer, who doubtless has insanely fast internet at work (and home). http://alanhogan.com/slow-it-down-gain-empathy http://alanhogan.com/slow-it-down-gain-empathy ⁂ And to your point, I do love this Brad Frost quote (which I share in my article above): > Ultimately, performance is about respect.
- nateberkopec 11y ago
  Worth noting Chrome DevTools makes this super easy now - network throttling is built-in to the tool and can be applied any time DevTools is open.
  - stephenr 11y ago
    On OSX there is a system-wide prefpane (part of Xcode extras) called Network Link Conditioner that allows you to quickly simulate different connection speeds, even different levels/quality of wireless signal. Any Browser-testing that only works in a single browser is honestly worthless.
    - lstamour 11y ago
      Not true. I could make the comeback "any network throttling that only works on a single OS is honestly worthless," since people browse on non-Apple OSes. Though I will agree the prefpane is a cool tool if you can find it on the Apple Dev Downloads site. It can even run on iOS, for any app, not just the web. The Chrome solution will work on Windows too, though, or use Fiddler. More such tools can be found at http://stackoverflow.com/questions/3536249/simulating-slow-internet-connection http://stackoverflow.com/questions/3536249/simulating-slow-i...

swanson 11y ago

For those curious, the relevant PRs/issues appear to be: https://github.com/rubygems/rubygems.org/issues/1095 https://github.com/rubygems/rubygems.org/issues/1095 https://github.com/rubygems/rubygems.org/pull/1109 https://github.com/rubygems/rubygems.org/pull/1109

lifthrasiir 11y ago

> Is WOFF2 just that good? Regardless of the following paragraphs (which give a primary reason of `unicode-range` CSS property), it is that good. Brotli, a compression algorithm used by WOFF2, is a very good fit for regular-looking but non-repetitive data---that includes many binary formats including OpenType. I have seen at most 10--20x improvements over uncompressed TTF.

tater_sent_me 11y ago

This is why i just force my browser to use comic sans for everything.

losvedir 11y ago

Are there any good resources for what fonts are loaded by default in different versions of Windows, Linux, OS X, iOS, Android, etc? Do people have good "web safe font stacks" that specify relatively similar fonts that are commonly installed in the different browsers out there? It seems like a nice middle ground to provide a somewhat unique and nicely styled experience, without forcing the user to download a bunch of extra stuff, and also possibly keeping it a little more "native" looking in whatever browser they're using.

lucaspiller 11y ago
On Android the only fonts available on all systems are the Droid fonts (which are mapped to the generic serif, sans-serif etc in CSS). Apps can bundle their own fonts, but they aren't available at a system level.
rangibaby 11y ago
I have started using just system "sans-serif" as much as possible. You can get far better returns from having correct for your specific design font sizes and leading, rhythm, etc. than using the current trendy not-Helvetica.

csense 11y ago

> As developers, our job isn't to tell the designers "Hey, you're dumb for including over 500KB of WebFonts in your design!" Yes. Yes it is. I want to browse the web of 2006 with an Internet connection of 2016. I really wish websites wouldn't require me to download hundreds of different JavaScript libraries, fonts, Flash, video files, and who knows what responsive AJAX nonsense. I really like minimalist websites that do what they need to do without tens of megabytes of cruft. Like this one.

seanwilson 11y ago
To give a suggestion in the middle, a good approach is to inform the designers about the technical implications of their designs and present options that work around the technical issues so a compromise can be found.
- deleted 11y ago
  [deleted]
- 50CNT 11y ago
  Loading times/responsiveness are certainly a design constraint, and designers need to be aware of this. Imagine a print designer that didn't know about bleed, DPI or colour showing through paper. They may not personally be in charge of printing things, but they absolutely need to have domain knowledge or work with someone that does.
- matt4077 11y ago
  It feels like designers really have a bad rep here and I have no idea why. I mean, yes, there are horrible websites out there – but those are just made by bad designers. If I look at the actually ambititous people, those comparable to the HN crowd of programmers, I just see enourmous competence. They no longer do web design with a desktop publishing mindset (that's a clich=e of the 90ies). They've rebranded to User Interface Design, to Interaction Design and to whatever "Service Design" may be. Which means: they usually know better than most programmers that design isn't about something being pretty, but that it's part of an interaction of machines, data & humans. I seriously don't know any designer who isn't obsessed with usability, load times, discoverability and so on. You also can't get a degree today without at least a few semesters of python. Do they always hit the right balance between performance and features? I don't know. But it appears as if there's a fundamental principle: Just like some would like to surf the 90ies web with the 2016 connection, others may want to run Windows 2000 on today's computers, or get a car from the 60ies produced in today's effiecient factories. In all these areas, the creative people as well as (too an overwhelming extend) the consumers have chosen a balance that appears to work ok. And anyone complaining here be better only writing in C & Assembly.

iamleppert 11y ago

- Using Google for your fonts has been proven to be a nightmare for me in the past. Google does a good job at serving their own interests but don't expect them to put up a consistently good effort for their free shit. - The OP makes some weird kind of pedantic performance argument about moving script tags around in the head for some possible optimizations. Anyway, it wouldn't make any difference and your page would still be blocked if Typekit failed to load. - The text parameter to Google web fonts would render any prior cache-ability gains moot and could potentially change the unique ID of the resource as the text of your site changes. I'm not trying to be too negative, but I don't see what all the fuss is about with this article? Yeah, someone added a big bloated third party font service. You found it, and removed it. Shouldn't Rubygems be using some unicode or built in serif font anyway? They're going to need all the perf improvements they can get when their time to first byte is 300+ ms. ;-)

elaus 11y ago
> Using Google for your fonts has been proven to be a nightmare for me in the past. How so? I had only good experiences with Google fonts, especially compared to other services or just plain self-hosting of font files.

Throwaway14530 11y ago

I disable web fonts for all my browsing. For the most part, it's fine and speeds up responsiveness. In rare cases, I run into problems when a website has decided to replace its icons with fonts, but generally, those sites are overly designed and I usually avoid them. If I absolutely need to visit a site that uses mission-critical webfonts, I'll just open IE, do my business, and get out.

technicolor 11y ago

FWIW, Typekit has an async loader script that doesn't block the rendering. Same is the case with Google web fonts. Both services use the open source WebFontLoader[1] library behind the scenes (which is mentioned in the article). Typekit has a feature they call language subsetting which reduces the file size of a particular typeface family by removing language support based on user selection. This can reduce font sizes quite a bit. >Google Fonts doesn't use any JavaScript (by default, anyway), which makes it faster than almost any JavaScript-enabled approach This involves a stylesheet which means the rendering is blocked until it is downloaded and processed and the users will see a page with blank text until that happens. Sometimes it is better to show the content (even in a fallback font) instead of a blank page. 1: https://github.com/typekit/webfontloader https://github.com/typekit/webfontloader

b1530678 11y ago

Funnily enough replacing a 61 byte gif with a 168 byte png reduced loading times of one of my sites by 150ms.

stegosaurus 11y ago

This article is a good example of just how bonkers the 'modern web' is. In a reasonable world my browser would instantaneously load the content (text fits in a couple of TCP packets) and I'd have an option to choose Shiny Mode (or a bar to toggle it on permanently with). Instead, half of the 'articles' I come across on the web don't work without animated full page transitions, pop-ups within the page, blah blah. I preferred the MARQUEE tag, quite frankly.