1. 19
  1. 21

    What’s wrong with using Arial or Times for web pages? They’re easy to read, familiar and don’t require an extra download. I’d rather web pages took more inspiration from Web 1.0 rather than trying to fix things that aren’t broken.

    1. 18

      Nothing. Came here to disagree with that point as well. If people care about the default font of a web page, they should change their browser default to a better font. Then they should petition the browser to ship with a better default. I use “serif”, “sans-serif”, and “monospaced”. If you don’t like how they look, you can fix it.

      I think it’s lunacy for every web page to say Times New Roman isn’t good enough, and then have each pick a different font, some of which will surely be worse.

      1. 3

        The problem is, I don’t like how TNR or Arial look, and I can’t replace them (unless I am on a linux/bsd box with custom fontconfig.)

        1. 6

          Why not? Both Firefox and Chrome allow setting the default font.

          1. 7

            Yes, they allow setting custom sans or serif fonts (which I do), but I can’t override Arial or Times New Roman inside css.

            This actually isn’t so much of a problem, these fonts aren’t that bad. However, I actually have troubles reading "Courier New". Please, for the love of whatever you love, just use monospace.

            1. 4

              Oh, I see. Yes, that’s exactly what people should do.

        2. 1

          imho, it’s important that the browser’s user be allow to set as much as possible. semantics made this easy.

        3. 12

          I have never seen a page which was improved by the use of webfonts. The fonts I have installed are attractive, already local, and most importantly legible. And if I pick ugly or illegible fonts, that’s my own fault. Frankly, I don’t think pages should be able to make selections other than the generic categories (“serif”, “sans-serif”, “monospace”, “stupid font for stupid peoplefantasy”). The less control pages have over their own rendering, the more useful they are.

          1. 1

            Even comic sans is better than fantasy! The horror.

          2. 7

            There may not necessarily be anything wrong with the font itself, but the problem with choosing default system fonts is a lack of distinctiveness. Everyone uses the default system fonts, and so, as said by the author of this piece, Arial or Times are not font choices, but the absence of a font choice.

            If you want to optimize for page size over distinctiveness of your design, then that’s a tradeoff you choose to make, but from a purely typographical standpoint it makes sense to try and put in a bit more effort.

            1. 4

              Nothing. I’m not sure that’s an argument against using webfonts, though.

            2. 13

              I’m not sure I like putting the nav at the top like that. It means every time I read a page, the first thing I have to do is page forward. It also seems to put the nav more “out of reach” when I get to the end and want to go somewhere else. Sure, I usually have to scroll with the side nav anyway, but it feels like I’m scanning within the side nav; it doesn’t feel like I’m leaping to another part of the page. When it’s not on the page, it feels more detached.

              1. 5

                In that particular example of documentation too, it seems very likely that one would want to be jumping around a lot and hence having an always-visible ToC would be useful.

                1. 2

                  As much as I’ve been hating on floating top bars lately, having something simple with a drop down for the nav might be nice in that situation.

                  1. 8

                    The ginormous top bars which then try to fold up into smaller versions have a tendency to break, among other obnoxious behaviors. But I’ve rarely been bothered by fixed size absolute divs that float above the page.

                    The folding header seems like a sad skeumorphic newspaper headline. Interfaces that simply float over content seem much more futuristic.

                    Perhaps nothing is worse than janky sidebars which use JavaScript to reposition themselves, but never in sync with scrolling.

                2. 11
                  3 and #5 shouldn’t in my opinion be used by most websites.

                  There are still plenty of bandwidth constrained devices (including ones where I have to pay based on data downloaded) that will suffer as we continue to bloat pages more and more with extraneous content. Some websites are very much about typography and aesthetics and for them, it seems reasonable to use webfonts, more images etc. Many sites however its just pure annoyance to have them take so long to download on more constrained bandwidth.

                  1. 1

                    Can web fonts be embedded into pages? I use web fonts on my blog, but I really dislike that they block reading of the page until they download. This is more noticeable on mobile networks. I guess I hoped that web fonts would be a progressive enhancement to the page, rather than slowing it down.

                    1. 5

                      You can let the browser render the page with the system fonts until the webfont is ready.

                      1. 3

                        After the first visit, there’s a strong chance they’ll be cached. If you’re using Google Fonts, this has been taken care of for you (cf. https://developers.google.com/fonts/faq#Performance ); otherwise, conduct your own experiments and figure out which headers and possibly manifest files are helpful.

                    2. 10

                      I don’t get this. It reminds me of every time someone proposes to “fix” Wikipedia by posting their great alternative design for it. The result is always beautiful and never appropriate.

                      At least with wikipedia, the use-case is mostly long-form reading. Whenever I look up python docs, I’m focused on fast navigation. Things like extra “redundant” highlighting of headers makes it easier and faster to process the page when I grab the scroll-bar and zip from top to bottom. The sticky side-nav makes it easy and fast to jump between sections on the page. More boxes with more colours makes it easy to pick out the kind of content I’m looking for. The last thing I need to look at on the page is the body text – it’s ok if it’s not the focal point! It only needs to be there. It’s not beautiful. Maybe it could be made beautiful and still functional. But things don’t just start working better because they look pretty.

                      I don’t get the assertion that things are moving so slowly and that devs are using support arguments as excuses. I’m excited for the web’s future! It’s actually moving pretty fast! I love when I can finally use the cool new features! But I care about my users more than I care about the beauty of my page when rendered only in ideal conditions.

                      I don’t get that this is supposedly an internet-wide issue, something that we as web developers have to band together and move forward on. Not everyone is making Medium, or the Huffington Post, or other long-form reading-focused sites.

                      Only because it’s a post about typography: I found the font chosen for the post actually pretty distracting when I was trying to read it. And the SMALL-CAPS – irritating.

                      1. 6

                        I hate this current trend towards large body text sizes. It bifurcates the web between old sites with small text and new sites with large text, where the whole point of HTML (rather than e.g. PDF) is that the user should be in control. It makes it almost impossible for a user to get what they almost certainly want, which is the same body text size for every website they go to.

                        Stick with the default body size, and make sure your site zooms correctly (and make sure it handles non-default DPI correctly as well). Browser makers are also partially to blame here: the default, traditional body text sizes should be appropriate to the screen resolution on a modern display.

                        1. 5

                          Common problem. One party abdicates responsibility, then everybody else works around it. Poorly.

                          Browsers could have scaled up to screen size long ago, but now that so many sites change default font to 2em, they’d look ridiculous with a body size of 4em. Perhaps they still should, though, since sites that care will adapt and switch back.

                          1. 2

                            Eh, tend to disagree. Some designs rely on a smaller difference between header size and body size. You can do this either by shrinking the size of the headers, or increasing the size of the body. Both are fine IMO. Plus if you don’t like large text, zoom out.

                            1. 1

                              I don’t like having to zoom out on some sites and not on others. Body text is what people are most likely to care about, so it should be the thing that’s the same on every site.

                              1. 2

                                The nice thing is that Chrome (and possibly other browsers) will save the most recent zoom level for each domain name I visit. I definitely agree with you that body text is the most important, for probably everything except a photography website.

                                1. 1

                                  And yet you expect the rest of us to have to zoom in? Web developers have a right to control what you see to a certain extent, hence CSS.

                                  1. 2

                                    I expect the rest of you to set your default zoom level to a value that makes sense. I wouldn’t mind if every site had big text (I’d just set my default zoom level to small), but realistically there are billions of pages with text at the default size that are never going to change, and having half the web one size and half the web another is really annoying.

                                    1. 2

                                      The thing is that current CSS semantics and prevalent practice is that web developers want to have all the control. I imagine this is usually a decision made with the involvement of the marketing department, so blaming developers may not be correct, but never mind…. For whatever reason, most sites are happy to say that they don’t want visitors or customers who can’t read their typography. It’s pretty obnoxious really.

                                2. 2

                                  I essentially agree with this point, but I at least find large default sizes preferable to small default sizes which don’t zoom correctly. The latter is pretty common.

                                  I happen to use (and need!) an 18pt minimum, 24pt typical font for the entire web, so I feel pretty strongly that sites should zoom better! But they don’t. :(

                                3. 4

                                  Smaller text increases information density. On devices with small screens, sure, information density isn’t an initial design goal. On a desktop? Density is king, hence the very fast adoption of high density displays.

                                  Headings? Meh. As long as you can distinguish the heading from the rest of the text, you’re probably fine doing whatever you want.

                                  System fonts? Sure, use a webfont because the overhead of downloading and rendering is worth the hit to battery life on mobile devices, and sheer annoyance of watching the text snap instantly from one font to the next. There’s absolutely nothing wrong with system fonts.

                                  Layout built on color. This is a tricky issue. Color is one indicator that designers can use to say “this thing is different, so you should pay a different kind of attention to it,” but it is not the only indicator, and it’s frequently misused because of this mixup. If you consistently use a different type of indicator for navigation, such as underlining, bolding, strikethrough, etc., then replacing color is fine. If you’re just trying to make a statement that monochrome websites are somehow mysteriously better for user experience, you’re dead wrong. (One of my favorite mis-designs on the web to heckle is “this thing changes when you hover over it, but otherwise has few/no distinguishing characteristics,” which this website loves to showcase with its use of unbolded typewriter fonts as link labels, while using the same font bolded as header text.)

                                  What’s also incredibly important that these visual designers forget about is the act of using the webpage. His redesign of Python’s documentation page is less usable, period. I now have to scroll or type-behind-find a vast distance to get back to the next reference. This is literally the exact problem that hypertext was invented to solve - how to better interlink documents such that this kind of “shuffling” behavior wasn’t necessary. This type of single-page layout is better for manpage-type information, where a single functionality is described on the page, and then has plenty of links to get you to related functionality. This might feel like it interacts poorly with information density, but it doesn’t: Irrelevant data isn’t information, it’s noise.

                                  A better design for that page wouldn’t just relayout the page, it’d also relayout the information. When I go to a page about Built-in types, I want to see a list of built in types, as links, that I can click and then get more information about primitive manipulation of that type. I then click the link and get that information, but still have all of the navigational markers to get to the other types. Subcategories of those types can be folded so I’m not immediately assaulted with all of that information at once. Verbiage can be trimmed down because you can assume a certain level of informedness in the readers, so “Boolean Operations, and, or, not” can just be “Boolean Operations”, which can happily include the information about truth-testing.

                                  What really needs to be abandoned as an obsolete habit is the “moving the furniture” approach to design and human interaction.

                                  1. 1

                                    Oh the tangled web2.0 we weave :)