My contention is that not only web-designers, but everyone who uses a word processor should get at least baseline training in typography and layout. It should be a short high-school course. The basic rules are not that hard.
It's possible to make decent looking documents in Microsoft Word / Libre Office / Abiword / whatever, but people with no idea what they're doing (and no idea that they have no idea what they're doing) easily create monstrous abominations that communicate nothing beyond "unprofessional" and scream "I have the aesthetic taste of a 3 year old".
Beyond the choices of what to do with them, word processors also don't really try to educate or nudge users into how to do things. "Typewriter"-type usage, where the user makes all their changes directly as they type or on small selections, is still the dominant pattern of actual user behavior when the system is really built on shared styles geared to allowing you to make document-wide changes all at once.
Ignoring that system makes perfect sense in some cases, but the "magic" that Word and friends use to try to coax some of your input into styles is a constant source of frustration and confusion both for people who do and don't want to bother with styles.
That’s not even the biggest advantage of styles - they have a semantic meaning. Eg headings show up in Word’s navigation pane or auto generated table of contents; or if you convert a word document into an epub using calibre and you used styles correctly then eg each top level heading will be a new chapter.
One of the best programming lessons I've learned was actually an attempt I made to learn something about design. Typography (which deals quite a lot with the presentation of information hierarchies) is an essential skill in making code actually readable. It gives you a framework for thinking about how to draw a readers attention to the places you want and how to signal that it is important. Which you can do even with tabs and plain-text.
I don't get it why the Microsoft Word team didn't create a good looking default template that people could just use without any fiddling necessary. They had more than 20 years at this point to create something that looks pleasing out of the box, but when you check the available templates they are all an ugly looking mess.
All school subjects are niche outside of arithmetic, spelling, grammar, reading, writing, civics, typing and recess.
Offering practical subjects that people will actually use in their day to day lives can only be a good thing. Dudes go to college and don't know how to do laundry like good lord.
I admire all the work the typographers do to make amazing-looking websites, and yet I prefer to read sites (like mathpages, or Dan Luu's site) which have next to no styling. They're just easier for me to read. I'm definitely not hating, but I feel like it's good to keep in mind where the point of diminishing returns is.
The practice of typography includes everything from the very basic of readability of body text to headlines to how everything is laid out on a page, and sometimes that means doing as little as possible, because the defaults are often great.
> Slightly more famous examples of unornamental websites that treat text as interface are: google, eBay, craigslist, youtube, flickr, Digg, reddit, delicious.
If only the article recommended doing just that.
Gradients and spinning globes, and intricately designed animations aren't typography. Though Stripe's typography is exquisite. Amusingly enough, text that takes up the full horizontal space is not.
I’ve bought a bunch of Stripe’s books and all the ones I have are beautiful objects. My one complaint is the text in some is too small for my aging eyes. I ended up getting an electronic version of Dream Machines for my ereader where I could choose a larger font.
MathPages (which I just looked up) has styling, but its styling is the _browser default_. And that default has mostly not changed for a quarter century. It is simple, and familiar, though I think a few tweaks like bigger margins against the window edges would make it more readable. One example: https://gist.github.com/JoeyBurzynski/617fb6201335779f8424ad...
May I spruik my own site? I have a very simple site, with no Javascript, that embodies what I believe are good typographical principles. It has a particular focus on typographical layout reproducing century-old-style (remembering a hundred years ago is still a modern, post-WW1 design era!) https://daveon.design/about-dave-on-design.html#typography-&...
Going on a tangent here, but may I ask why you don't have hyphens enabled? Especially with justified text, one tends gets large spacing around words without hyphens, which seems to counteract the effect of larger spacing after ending a sentence.
I get your point: there are no CSS stylesheets or style elements on MathPages at all. Thus, no styles...
The thing is, there are no pages that use no styling! Defaults are styling: they are just choices the browser manufacturer made. Resetting those has its own cottage CSS industry: https://meyerweb.com/eric/tools/css/reset/
I used to view default browser styles as not really styles. Then recently I started trying to use old HTML elements, like 'align', as a way to see if they behaved differently (solved problems with) CSS styling. It turned out that in Safari, Chrome and Firefox, the attributes behaved the same as setting CSS styles -- which makes sense from an underlying architecture point of view (why have two ways to set, say, left alignment?) but shows that the engines are CSS-based, that there is no such thing as not using styles, even using non-CSS, old-fashioned pre-CSS HTML.
Remember that "no styling" is just the default CSS styling for typography, which somebody painstakingly created so that it sort of works. Pretty much all you need to do to make perfectly readable text on the web is make the column narrower. You can certainly improve it, make it more beautiful and readable, but it's acceptable as is. The real problems arise when people override those default styles with worse ones. So, we can either force people to use their browser's proprietary typography—which is not the spirit of the web—or teach 'em to do it better, which should really take about an hour.
Guess what. Simplistic typography is also still typography.
Just like design or VFX in films people tend to think about typography when they notice it is there. But good design/VFX/typography is often invisible.
Seeing the title, I suspected that the typography will be messed up. And indeed, instead of my preferred configured font size, it is overly large and set in pixels, the line heights are higher than I would prefer as well (the font I use, Noto Sans, already has a pretty high leading). The situation with colors and margins is similar, to accompany that.
And the reason I guessed it to be that way is because it is like that much of the time: once people focus on something that is not broken too badly, more often they mess it up, rather than improve. I think a much better advice would be just to not touch it. Maybe go roll your own crypto if you feel creative, but stop messing up fonts, colors, and the rest of interfaces: plain HTML is good and sufficient for most web publishing.
Edit: though learning about typography still should not harm. Just applying it poorly--as done most of the time--may be annoying. Also same as with colors and adjacent design subjects.
This is obtuse. Why are you going from one sentence, saying the font size is disproportionate or whatever, then saying your font is Noto Sans? It's fine to pick Noto, that is not my disagreement. But if you are having one setting by the typographer and then choose to override them... yeah, it might be ugly. Because you changed it and are not a typographer. A typeset might not look good in every setting. That's why we have typographers to turn them into visually appealing fonts.
> But if you are having one setting by the typographer and then choose to override them... yeah, it might be ugly.
This can be equally viewed from the other (user's) perspective: I had the font set (along with a comfortable size), then apparently the website tried to override it, though I did not notice that. Now I had to both allow custom fonts and enable JS to see its intended font, and it is even less comfortable for me to read, adding serifs, while still having overly high lines.
The reason I mentioned Noto is to better describe what I see, though perhaps it was unnecessary. That is, I saw it in a shape I liked a little more than the one it was intended to be in.
I can agree with the parent comment that the typography on that page is atypical and not in a good way. Too large to make it easily readable on mobile, not enough margin. Perhaps that's forgivable since it was written 17 years ago before the mobile era. But even in desktop mode, size of typefaces jumps around for seemingly no real reason. Repeated use of the same graphic of historical typesetting for no apparent reason
No idea what it looked like in 2006 (what domain did they use before ia.net?), but here’s it in 2017: https://web.archive.org/web/20170322053052/https://ia.net/to.... No ridiculously large text, no gratuitous/injudicious hero image (inappropriately chosen automatically for legacy content and not reviewed or excluded), no gross inflation of low-size images (“mobile-first”), just basic sensible design. It’s the usual, a redesign/reimplementation that meshes poorly with existing content (… and honestly probably new content too, just not so badly). I bet it’s been through at least four redesigns since it was written. And there’s no way the text would have been anywhere near that big in 2006.
The cause is you got used to comically small text. That site is fine readable size (unlike the interface we are exchanging opinions on). Though it is still readable on 80% zoom, slightly eye straining on 70%, but it is far from oversized.
I consider the reasonable range of body text font-sizes to be 16–20px, but I recommend 16–18px. (On small screens, you should exclusively use 16px; the larger values are for larger screens where it can be warranted and I would almost always recommend it.) This is what just about everything is calibrated against, so you cause trouble by going much out of this range.
HN uses 12px. At 25% below the range, this is significantly undersized, and 120% scaling is about the minimum I can tolerate (though I don’t find myself going up to 133% for some reason, which I might have thought I would do, but I decided I didn’t like it).
The site in question uses 25.3px. At 26.5% above my proposed range (and 40% above my recommendation), this is significantly oversized.
If your eyes are straining at 70%, which reduces it to 17.71px, something’s wrong, probably in your setup—because that’s generally still at least 10% larger than all the rest of the text in your OS! (Linux/Sway: Firefox UI seems to be largely 14.667px with a little 15.4px, and this 14.667px seems visually to match other apps.)
No, creata is correct. This site’s text is very unreasonably and troublesomely large, and even shrinking it to 80% leaves it very mildly oversized.
(The lead paragraph is 32.2px, which does reach the point I would happily describe as comically large. The quote a couple later is 21.85px.)
I need to put it at 70% while leaning back to not strain my eyes. 40% is when it finally gets smaller than here (which I find just right) and could become eye-straining for me in the other direction.
He explained this once, but it's been years and years and I don't have a source link. His argument for using the large fonts hinges on the fact that you keep your desktop monitor farther from your eyes than you do printed materials like books and magazines. Accounting for these distances, a 16-pixel or 18-pixel font size on screen is similar to an 11-point or 12-point font on printed material. Somewhere on his site, I think he has a demonstration with a photograph of a book in front of his monitor that illustrates this, and it looked pretty convincing.
This argument is unsound: CSS already takes that into account. All of the units (px, pt, mm, in, &c.) are, for screens, defined in terms of a reference pixel, which is the visual angle of one pixel on a device with a device pixel density of 96dpi and a distance from the reader of an arm’s length. https://www.w3.org/TR/css-values-4/#absolute-lengths has some more explanation and diagrams that demonstrate what’s going on.
No, the reason why it’s customary to boost the font-size a little on larger screens is because otherwise things start to look silly because you’re using such a tiny part of the space available to you, and you have a larger viewport, so you can increase the size a bit without losing too much from the screen at any time. But if you take it too far, it starts to look silly for different reasons, because it’s unreasonably large (and more importantly, inconsistent with common practice).
There is just one big problem with that - I use a Laptop and not a Desktop, which is a similar distance away from my eyes as a newspaper. The result is a website where everything looks like it has the size of the headline of a newspaper...
I guess in 2006 the resolution of monitors wasn't the same as it is today meaning (if the website wasn't updated since then) it was never tested on a 14 inch near 4k display.
I'd say the big standout would be the section on having only a few fonts to choose from, odd both in the current context generally where there's now a paralyzingly large number of fonts to choose from as a web designer, and also in the specific context of being presented on a site that's clearly using webfonts.
The Internet Archive's closest look at the original [1] isn't quite from the day of but it's probably the same styling: a classic "Helvetica, Arial, Verdana, sans-serif" font stack.
The grandparent comment called out the usage of still-appealing examples, but the original itself viewed in its original style is a good example as well, and really a better illustration of the post's point. Despite using a single "default" font, simple things like the choices of text width, line height, and differences in size, weight, and spacing of the headings have kept it attractive and readable.
Interesting to see the original. To me, that one feels like a much clearer presentation of good typography. For example, in the "modern" version the first thing that crossed my mind is that ironically the quote at the start of the article isn't clearly presented as such. In the original it much clearer is presented as such.
Ah yes, quite a lot has happened in webfont space since then. Their original layout is a great argument for having a sense of grid systems and page layout, especially being long-before sophisticated grid css would come to browsers.
It is a bit ironic that the website has white text on black background which is no-no on screens as the very high contrast creates ghosting and eye strain / hurt for many people. Carefully read the text, then look at anywhere else and you'll see ghost lines everywhere for a few minutes. So the text should at least be gray-ish to decrease the contrast if you want to go that way. This works pretty well on paper, but sucks on screen.
That's a "prefers-color-scheme: dark" style: if your machine is set to light mode then it's black on white, well okay, very dark gray on very light gray. (Also the text in dark mode is slightly gray but it's very slight).
I don't think it's totally crazy to present text like this to users who are advertising a preference for white-on-black (though of course there's an argument to be made about the difference between "dark" as a UI choice and a content choice... really this feels like something your browser should let you opt out of despite your OS colorscheme choice).
Preferring dark mode does not necessitate presenting #f0f0f0 text on #000 background. Lots of websites out there that present a proper dark mode when they sniff the preference.
Until pandemic, most of my time was spent in dimmed rooms like edit bays which is a common lighting condition for that type of space. The dark color scheme is pretty much the default for any software you'd expect to find in that environment. Since the primary type of UI that I create is also used by people in that industry, they typically have a dark background scheme too. Now, that I no longer work in those caves, the bright colors are taking some getting used to and I'm still not there.
For you to say it sucks without saying "for me" at the end of it is just you assuming everyone has the same preferences as you. I can tell you from experience, this is just a bad belief to hold.
Those of us who have monitors which aren't left at eye-bleedingly-bright defaults shouldn't have to suffer low contrast text (which is much harder to fix).
I find this argument unconvincing for the same reason that the answer to the musical loudness war isn't "turn your speakers down". When contrast is maximized 100% of the time, there's no room for emphasis.
I find your argument unconvincing too, because having your monitor set to a comfortable brightness was the norm before designers ignorant of brightness controls started ruining it for everyone else.
The "musical loudness war" is completely irrelevant and makes no sense in this context either. Turn your speakers down if your ears are hurting.
>The "musical loudness war" is completely irrelevant and makes no sense in this context either. Turn your speakers down if your ears are hurting.
Recorded distorted sounds are still distorted regardless of your volume setting. Loudness war making people's ears hurt isn't solely due to the volume. If you can't tell the difference between piss poor mastering vs something properly mastered and being able to recognize them when you hear them is one of those "ignorance is bliss" things in life. However, once you can tell, you can't not hear it once it's present. The only way volume fixes it is when volume is set to 0.
But the problem with the loudness war isn't the loudness per se, but the loss of dynamic range: if everything is as loud as it can be, there is no room for emphasizing anything.
It's like, if you are always shouting, you can never raise your voice.
Which is exactly what is happening with full contrast websites: if everything is at max contrast, there is no room for emphasis.
Maybe for text specifically you're right, but we use screens for other media like pictures and video. If we have to tone down contrast to make high-contrast text comfortable, we are also reducing contrast of other media, and this loss may be significant.
Now, if we had reflective monitors (like e-ink etc) we could just be comfortable with maximum contrast text (like printed text). I think the display technology is a problem here.
(But still: there are some books with yellowish pages which I find more comfortable to read than ultrawhite pages. Maybe such lower contrast pages are more expensive or something, or not adequate for all lightning conditions etc)
So for your analogy, would you say the solution for compressed dynamic range in music recording would be for artists to use, say, guitar distortion or other audio choices for emphasis in music rather than playing with loudness?
The link you posted is exactly how I normally read every webpage – I have Dark Reader set up to make all text white on a black background. Light backgrounds make my eyes bleed and I actively avoid working with software that forces them on me.
I am not talking about dark / light mode difference. I too prefer dark mode in everything I use. Dark mode does not mean highest contrast text on black background though.
In my case, it’s not unusual for white on black to be more comfortably readable than the opposite, depending on ambient lighting, screen panel type, type of device, etc. As such I greatly appreciate it when sites provide a light/dark toggle or at least work well with reader mode, which I can tune to fit my needs.
Fancy typography is the realm of magazines, not books, and I can't think of a single magazine that's stuck in my memory the way real books do. If you have to use fancy typography to make your text feel more interesting it probably isn't worth reading.
A surprising amount, actually. Mobile phones rezoom and reflow text and content automatically, and if you click reader mode, take over presentation entirely.
I don't agree with the idea that all CSS should be banned, but the pixel-perfect designs, that seem to come from Photoshop, are definitely annoying because they have rarely been tested on anything but what the designer had lying around. Have a device with a different scale factor? A phone with a non-iPhone screen ratio? Perhaps you dare use a browser that shows scroll bars by default? Good luck getting use out of any of those over-designed marketing websites.
I use tree style tabs so my computer has a 1920x1080 resolution, but not the entire width of the screen is available to websites. I've had to collapse the side panel repeatedly because some websites just couldn't deal with the idea that a desktop browser had a resolution that wasn't full width. I'll take on of those Motherfucking Websites over the marketing nonsense any time.
Except that the mobile browser does all that reflowing and resizing at the direction of CSS (its own fallback CSS in the absence of supplied applicable CSS).
Restricting CSS to any degree is in no way a solution here. What you really want is for people producing websites to bother understanding CSS and how to properly direct the design in a device-independent manner. Because CSS is fully capable of doing so at this point.
Mobile browsers do all kinds of special tricks that you need to manually disable. text-size-adjust is one of those properties that was added long after browsers artificially resized fonts to be larger than specified by CSS (and is still considered experimental from a standards point of view).
I wouldn't trust websites to apply my phone's font size the same way browsers do. Websites that do override the zoom factor often end up with huge fonts on my phone because I have the font size turned down (what's the point of a 6" slab of glass if you scale up the text so you get the same amount of information as on a 3" screen?).
I would estimate a percentage far closer to ZERO than even ONE percent.
Something like 20% of users use adblockers and that takes a fair amount of effort for regular folks. So, right off the bat, we're talking << 20% as a starting point because it's much harder than using an adblocker extension.
To be able to CREATE a user style sheet that can apply to arbitrary websites without making them look like ass would be very difficult. Unless, of course, one WANTS all websites to look like ass.
I guess, somewhere, there's a nice stash of ready-to-go css that folks can apply (using developer tools or an obscure extension) on their browsers? I don't know. I never looked. But that would involving a lot of fussing I can't imagine normal folks doing that at all.
I have trouble caring about what someone says about typography when they've chosen abnormally excessive letterspacing which makes reading awkward and effortful.
Pretty sure it didn’t use that custom font back then, and the iA swiss founder would never have done this. They seem to be focused on apps lately and probably had someone new try their hand at “modernising” the old website…
Not anymore, maybe back when static sites were common. Web sites now are applications with lots of interactivity. The interactive design is often lost because designers are mostly designing for static layouts, with interactivity falling lower in priority. This then becomes a bad experience with developers having to constantly fix interactivity issues that were born from lack of design and product specs.
>Web sites now are applications with lots of interactivity.
You should prefix that with "some", or even "most". But certainly not all of them. There are plenty of static sites still around from yesteryear, and plenty still being made today.
Interactivity is important if interactivity is important, and should be given the attention it deserves, but JavaScript people have always wanted to believe it's always more important than the fundamentals of text-based information, which I'd argue it rarely surpasses in importance.
People like to conveniently forget that even if you're building a richly interactive thing that's better described as an application, all your buttons, labels, chart legends, street names, links, table data cells, blog posts, confirmation boxes, error messages, form fields, comment threads, settings screens, profile names, notifications, product specs, and many more components are going to be text, and should be treated as the venerable vehicle for information that text is. Sometimes it isn't as important as other aspects, but a great foundation in typography will allow for someone to produce great results with less resources.
Typography is still important, but I'm saying interactivity is even more important yet still is a blindspot for most designers. You can imagine two websites, one with subpar typography but excellent responsiveness and interactivity, and the other with excellent typography but is slow and interactions are confusing or don't work perfectly. It's not hard to see interactivity wins.
Many UIs are notorious for bad typography but are still successful because they are responsive and smooth. I like typography but it's useless if the site loads slowly or the navigation is not intuitive, etc.
I suppose you (or perhaps designers) are thinking of interactivity in the opposite order as I am, as though it's a sensible or a necessary step to position some possibly janky animation in-between the visitor/user and what they're trying to accomplish, and it's sufficiently high-risk as to actually cause problems. I initially couldn't think of how some piece of UI would actually ship even though it posed a risk to the user's experience, but now that I do think about it, it's always been a top-down decision, less that of an actual designer; usually it's a bunch of pointless dropdowns or sliders that just weren't given any thought, and engineers or designers were told to do it because 2 weeks gotta go fast gotta ship. There can be some really bad offenders out there, I've worked on fixing them, I just usually attribute that to pointless pressure to build specific things, where implementation details are removed from the agency of their rightful craftspeople.
Maybe I missed it but the article isn't qualifying their prescription either. So yes I agree but the point still stands, interactivity is now the most important part of any website that is not a trivial website.
The most typographical thing is stability. Look at a book. It is visually stable. The text is where the printer has put it and does not move. You can find quotes if you roughly remember where on the page they were.
Now look at a typical web page. It is scrolled! Nothing is stable. On every move everything changes. There is not a single visually fixed anchor aside from the browser window itself, which is unhelpful anyway. (E.g. with all that talk about semantic HTML it could maybe give us a standard table of contents, but does it?) With such a drastic departure from the essence of typography some fancy hanging punctuation won't help. Of course, once the main things are in place, it would be nice to have typographical niceties as well.
As true then as it is now. It's rare, even with highly interactive applications, that text isn't a fundamental component of your website or application.
I bought The Elements of Typographic Style over 20 years ago. I got about an hour in and never picked it up again. It isn't that the book is bad but typography isn't a topic that I want to self study. I think I could enjoy the topic in a classroom or study group setting but my mind just wonders to other things sitting in a chair reading about it.
I read this article in 2006. Back then, it was set in the Georgia typeface at 16px font size. It looked great.
Now it's 32px and a custom font with some ornamentation.
For me the text appears to big to read without zooming out and the typeface looks medieval. If the purpose of typography is to "honour the content" (cf. Bringhurst), this does not seem to be a good example.
It's possible to make decent looking documents in Microsoft Word / Libre Office / Abiword / whatever, but people with no idea what they're doing (and no idea that they have no idea what they're doing) easily create monstrous abominations that communicate nothing beyond "unprofessional" and scream "I have the aesthetic taste of a 3 year old".