Web designers should get good training in typography (2006)
ia.net
ia.net
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".
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.
Can anyone suggest a concise book/course/video on this?
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.
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.
> 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.
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-&...
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.
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 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.
(Maybe I've just misconfigured my browser.)
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.)
Although, I'm not sure how they can read text on UI elements at the same time.
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).
(Also: 16px = 12pt.)
I guess that partially explains it, I'm on a laptop which is naturally closer than a desktop monitor.
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.
In case you, like me, miss the dateline at the top and become more and more puzzled by the arguments and examples presented.
I will credit the article for using examples that are still visually appealing today, even (especially?) the 2004 blog.
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.
[1] https://web.archive.org/web/20070628195031/https://informati...
Whenever I see such content, I send them this link which demonstrates the issue in a fun way: https://www.ironicsans.com/owmyeyes/
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.
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).
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).
The "musical loudness war" is completely irrelevant and makes no sense in this context either. Turn your speakers down if your ears are hurting.
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.
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)
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.
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.
Attempts to make sites "pixel perfect" is the worst habit from the print-world that designers brought online with them.
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.
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.
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?).
The more power you give to CSS, the more power you give designers like this: https://stackoverflow.com/questions/68936634/how-to-ignore-t...
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.
The web isn’t just about the words. It’s about the look and the feel and the imagination.
Just like print was, and still is.
Nowhere in the article it talks about making it visually interesting.
The first sentence is completely unsupported.
One of the few pages where I don't need to scale up at least one step in my browser.
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.
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.
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.
You calling my website trivial?
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.
https://tex.stackexchange.com/questions/110133/visual-compar...
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.