6 ms·
It took me a while to figure out that links in the text were ALL CAPS instead of underlined and/or blue. The hover effect was so subtle that I didn't notice it
by ggreer 8y ago
It took me a while to figure out that links in the text were ALL CAPS instead of underlined and/or blue. The hover effect was so subtle that I didn't notice it at first. I ended up hovering over acronyms pretty often, as I was never sure if those were also links. That is not good design.
There's also the issue that while the site may look pretty, it requires downloading 5 megabytes of CSS.
At every job I've had, designers who talked about typography created more problems than they solved. They picked fonts that were less readable but more unique, "To emphasize our brand." They chose web fonts that hurt page load times and had kerning and hinting issues on platforms besides macOS. They chose thin font weights and gray text colors because those looked nice when viewed indoors on retina displays with young eyes.
Almost every site could be improved by doing less with fonts, not more. For long form text, use a popular serif font. For user interfaces, use the system font stack.[1] Don't ship web fonts except for icons. Most importantly: Use high contrast and normal font weights. Thin gray fonts are extremely hard to read if you're outdoors or using an older/cheaper screen.
1. https://bitsofco.de/the-new-system-font-stack/ https://bitsofco.de/the-new-system-font-stack/
- SSLy 8y agoDon't ship icons as fonts either. SVG was made for a reason.
- ggreer 8y agoI agree that icon fonts are a hack, but the web is made of countless hacks. This specific one seems benign. Users won't notice or care whether you use icon fonts or images. Icon fonts are approximately the size of the equivalent images, they work alright across platforms, and they're pretty easy to use and deploy.
- RandomInteger4 8y agoMaybe I'm mistaken, but f I recall correctly, I think the issue with icons as font was accessibility, rather the average user with full sensory capabilities.
- ggreer 8y agoSimilar to icon images, you'd use aria-label, aria-hidden, and title attributes.
- danShumway 8y agoIt's not benign -- icon fonts are bad for accessibility because screen readers will read out the actual glyph unless you use pseudo-elements or extra markup. Additionally, many users on limited connections will turn off web fonts, and then your icons will break. It's a hack that was necessary at one point, but has been largely displaced, like table layouts or image-based drop-shadows. SVG is just better nowadays[0]. You can even use the same pseudo-element tricks to insert them purely in CSS, which is yet another accessibility win. [0]: https://css-tricks.com/icon-fonts-vs-svg/ https://css-tricks.com/icon-fonts-vs-svg/
- anoncake 8y agoAt least in Firefox, the user can enforce their font preferences and ignore the fonts specified by the web page. Icon fonts break that.
- microcolonel 8y agoOne benefit of shipping icons as fonts is that you can use hints to make them work on non-multiple grids.
- deltron3030 8y agoThe system font stacks might look good on Apple and Google devices, with San Francisco and Roboto being great fonts. But Gnome's Cantarell for Linux and Segoe on Windows are both very ugly. Dalton Maags Ubuntu font OTOH is quite nice, kinda surprised it's not in the native stack.. The difference in experience between platforms is so great with the native stack that it indicates carelessness for users of platforms that aren't Apple or Google based. The first thing I'd do in an untouched Gnome or in Windows is replace those fonts, and I'm surely not the only one. "Bahnschrift" is actually a nice replacement for Segoe on Windows, from MS.
- saagarjha 8y agoBy utilizing the system font, you’re using a font that the user already spends time staring at for a significant portion of the time they spend interacting with that device. Presumably if they found that font ugly they’d change it, and in doing so your website would change as well.
- deltron3030 8y ago>Presumably if they found that font ugly they’d change it, and in doing so your website would change as well. Not everybody with a sense for style is techy enough to change it, or even in a position to do so. E.g. people who are stuck with Windows for work and aren't allowed to mess with the system. If you use JS and design sites you could check out Typography.js, you can include webfonts through NPM. Performance is better than fetching them from a CDN.
- androidgirl 8y agoIronically, I haven't changed my system font on Linux because the majority of webpages load web fonts. I did change my terminal to use Hack, however.
- tptacek 8y agoThe author of this book probably agrees with most of your critique, apart from the importance of whether or not his book costs you 5Mb to download (I imagine doesn't care so much about that). But most of his recommendations --- many of which distill to "less is more, make careful rather than flashy choices" --- won't cost you a nybble to implement.
- xrayspec 8y agoRespectfully dude, I clicked through to your sites because I was curious to see how you apply your own design advice. It seems that mostly, you don't. Your blog [1] even employs the monochrome, typo-centric style that Butterick seems to like. [1] https://geoff.greer.fm https://geoff.greer.fm
- ggreer 8y agoWhat part of my own advice don't I follow? I don't use web fonts. I use a popular serif font (Baskerville[1], falling back to other serif fonts if the user lacks that). I use the default font weight so text isn't too thin. I use high contrast (#000 on #fff) for readability with dim screens or old eyes. Links are underlined to make them obvious in body text. My CSS is 4.7KB, though only 1.8KB is transferred because I use gzip content encoding. Honestly, I don't think my site looks as good as Butterick's, but I'm not a designer and I didn't spend much time on it. Also, my implementation is 1,000x more efficient. 1. I picked Baskerville because it's slightly more convincing than other fonts: https://opinionator.blogs.nytimes.com/2012/08/08/hear-all-ye-people-hearken-o-earth/ https://opinionator.blogs.nytimes.com/2012/08/08/hear-all-ye...
- choochootrain 8y agoi think the low contrast in your Geoff.Greer.fm logo and the "go dark" button might be what GP is talking about. i didn't realize the button had words until i saw the hover state had opacity: 1
- xrayspec 8y ago> I don't use web fonts. Well, actually ... yes you do (Proxima Nova). Some of it is even thin! https://floobits.com/ https://floobits.com/
- ggreer 8y agoI thought we were talking about my personal site. Floobits looks the way it does because of a designer. It doesn't reflect my personal tastes very well. That said, I'll probably fix those fonts soon. Thanks for pointing that out.
- mrhappyunhappy 8y agoIn my many years of design and development I have NEVER seen a 5mb css file, yet alone one as a result of a custom font. If we left typography up to developers then we’d have the web equivalent of Linux - “good enough”. Typography has a place in design. What you see with grey thin fonts is amateur work by designers who follow trends. To generalize this observation to the whole of design is not fair.
- pcwalton 8y ago> They chose web fonts that hurt page load times and had kerning and hinting issues on platforms besides macOS. Could you elaborate? macOS doesn't typically do TrueType or CFF hinting. Kerning should be identical for modern rasterizers on all platforms nowadays.
- ggreer 8y agoThat was exactly the problem. The web font (a variant of Open Sans) had bad TrueType hinting, which macOS ignored. I viewed the site using Edge and it almost looked as if all antialiasing and subpixel rending was disabled.
- aasasd 8y agoTIL TrueType was developed by Apple, already with hinting as far as I can tell. Apparently the Mac font renderer ignores most of the hints but not all.
- pcwalton 8y agoApple's rasterizer doesn't do grid fitting, which essentially means it ignores the hinting instructions, but it does do pixel snapping in some cases.
- danShumway 8y agoI have issues with these criticisms. > There's also the issue that while the site may look pretty, it requires downloading 5 megabytes of CSS. 3.4MB, and all but 5KB are web fonts which will be cached across the entire site. And while that's heavy for a normal site, it's probably not all that heavy for site specifically about typography. The extra fonts are included because they're used for interactive examples and comparisons, and downloading fonts is cheaper than downloading images. Web browsers on limited connections are now smart enough to avoid downloading web fonts (on mobile Firefox, there's just a checkbox in settings you can click to turn them off universally). I honestly can't think of a single case where me checking that box has ever broken a webpage. Opera Mini (which is popular in the parts of the world people are most often referring to when they talk about limited connections) disables web fonts as well, so no harm to those users. Given that there is a readily available, easy to use, safe, user-controlled solution to your problem, I do not see why forcing everyone to use system fonts helps anyone. If you have a problem with the defaults, go to Firefox/Google and tell them to check the box by default. > Don't ship web fonts except for icons. My feeling is that on the web we give control to the user, not the developer. And as mentioned above, you can not trust that your icon fonts will be downloaded, so you should not use fonts for icons. It is almost universally better to use SVG for icons. Your icon font is going to be a wrapper around SVG glyphs anyway, so skip the middleman and ship the glyphs directly -- you can still bundle them into a single SVG if you're worried about multiple network requests. > At every job I've had, designers who talked about typography created more problems than they solved. Having read the book, none (or at least very few) of the issues you're talking about apply here. The default fonts are heavy and have high contrast (with the exception of footnotes, fair point). They render well on Linux and Windows. They're large and display well on small screens. The book actually goes into detail about a number of your issues, talking about why bad color and unreadable "brand" fonts are a problem. The biggest valid criticism I see here is that links aren't underlined, which... yeah, there are probably better ways to do that, but underlined links do genuinely interrupt reading flow. I view that criticism as a matter of opinion.
- Sharlin 8y ago> It took me a while to figure out that links in the text were ALL CAPS instead of underlined and/or blue. Nitpicking, but in this context I can't help myself: they're not ALL CAPS but sᴍᴀʟʟ ᴄᴀᴩs instead :)
- jimbo1qaz 8y agoI prefer when websites use "serif" or "sans-serif" (as opposed to "system font stacks") and respect my personal font choices. Sadly some people never change them from Times/New Roman and Arial.