24 ms·

Web designers should get good training in typography (2006)

144 points by greenSunglass 3y ago

xnx 3y ago
Typography should be left to the user agent and user style sheet. Attempts to make sites "pixel perfect" is the worst habit from the print-world that designers brought online with them.
- velcrovan 3y ago
  The second sentence is true. The first sentence is completely unsupported.
- thrwy_918 3y ago
  what percentage of users would you estimate are interested in choosing or writing a user style sheet?
  - crispyambulance 3y ago
    What percentage? 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.
  - Izkata 3y ago
    "User agent" is the more important one. Allow the browser to deal with the system it's presenting on (mobile vs desktop, for example).
  - jeroenhd 3y ago
    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.
    - velcrovan 3y ago
      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.
      - jeroenhd 3y ago
        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?). The more power you give to CSS, the more power you give designers like this: https://stackoverflow.com/questions/68936634/how-to-ignore-the-phones-font-size-setting-with-css https://stackoverflow.com/questions/68936634/how-to-ignore-t...
- jen729w 3y ago
  That sounds really boring, so I’ll say no thanks. 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.
  - mrob 3y ago
    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.
    - ricardobeat 3y ago
      Have any web pages stuck in your memory like real books do? The web is akin to magazines and not books. Nowhere in the article it talks about making it visually interesting.
      - mrob 3y ago
        Yes, but not any with typography like the article. I use custom CSS and Firefox's Reader View to disable a lot of design/typography.
defanor 3y ago
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.
- shadowbanned0 3y ago
  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.
  - defanor 3y ago
    > 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.
  - kuhewa 3y ago
mmcgaha 3y ago
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.
dusted 3y ago
Font selection should be left up to the browser vendor, and ultimately, the user, and not be overwritten or otherwise dictated by the website.
Mikhail_Edoshin 3y ago
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.
lazyvar 3y ago
(2006) An article about the importance of typography uses massive, unreadable font at 25px.
- bobbylarrybobby 3y ago
  And with ink traps in the title font.
  - ricardobeat 3y ago
    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…
- mfru 3y ago
  I think it is more readable than most pages. One of the few pages where I don't need to scale up at least one step in my browser.
Tactical45 3y ago
Can anyone recommend a good course in typography?
- Beijinger 3y ago
  No. But this should give you an idea about the issues in about 30-60 seconds https://tex.stackexchange.com/questions/110133/visual-comparison-between-latex-and-word-output-hyphenation-typesetting-ligat https://tex.stackexchange.com/questions/110133/visual-compar...
- neilv 3y ago
  One option is Matthew Butterick's "Practical Typography": https://practicaltypography.com/ https://practicaltypography.com/
alecst 3y ago
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.
- gherkinnn 3y ago
  > Treat text as user interface > 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.
  - criddell 3y ago
    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.
- vintagedave 3y ago
  > next to no styling 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/617fb6201335779f8424ad9528b72c41 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-&-layout:-spacing https://daveon.design/about-dave-on-design.html#typography-&...
kderbe 3y ago
(2006) 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.
- brailsafe 3y ago
  Which arguments did you find puzzling? Everything seemed pretty relevant to me
  - zerocrates 3y ago
    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. [1] https://web.archive.org/web/20070628195031/https://informationarchitects.jp/the-web-is-all-about-typography-period/ https://web.archive.org/web/20070628195031/https://informati...
    - brailsafe 3y ago
      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.
    - BetaPictoris 3y ago
      Is it just me or does the original look much better? I think it's the text size, but also the spacing of the new version just feels... wasted.
proc0 3y ago
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.
- MrVandemar 3y ago
  >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.
  - brailsafe 3y ago
    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.
    - proc0 3y ago
      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.
dkarras 3y ago
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. Whenever I see such content, I send them this link which demonstrates the issue in a fun way: https://www.ironicsans.com/owmyeyes/ https://www.ironicsans.com/owmyeyes/
- xigoi 3y ago
  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.
  - dkarras 3y ago
    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.
    - xigoi 3y ago
      Yes, I am talking about pure white on pure black. I find gray on slightly darker gray hard to read.
- jwells89 3y ago
  I think this varies between individuals. 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.
- zerocrates 3y ago
  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).
RuleOfBirds 3y ago
I have trouble caring about what someone says about typography when they've chosen abnormally excessive letterspacing which makes reading awkward and effortful.
dangbackup 3y ago
[flagged]
MrVandemar 3y ago
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".
- RoyalSloth 3y ago
  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.
- amelius 3y ago
  Might as well teach people how to dress properly.
- brailsafe 3y ago
  True. Typographic scales, proportion, and a few other subjects would prove generally valuable for many.
- enjo 3y ago
  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.
- zerocrates 3y ago
  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.
brailsafe 3y ago
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.
chrisweekly 3y ago
Good oppty to share https://every-layout.dev/rudiments/axioms https://every-layout.dev/rudiments/axioms and its use of a coherent typographic scale as the basis of fundamentally sound web UI layout.
garrickvanburen 3y ago
To those god wishes to punish, he first teaches typography.
- wombatpm 3y ago
  Those he wishes to drive mad he teaches kerning or keming depending on the type of madness desired.
creata 3y ago
This site, and many other typography-adjacent sites, have comically large text on my desktop computer. What's up with that? (Maybe I've just misconfigured my browser.)
- dchest 3y ago
  My theory is that these designers use very large displays with very high resolutions and put them meters away from their eyes. Although, I'm not sure how they can read text on UI elements at the same time.
- vandahm 3y ago
  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.
  - chrismorgan 3y ago
    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 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). (Also: 16px = 12pt.)
  - 3y ago
tarcon 3y ago
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.
- deleted 3y ago
  [deleted]

144 points by greenSunglass 3y ago

xnx 3y ago

Typography should be left to the user agent and user style sheet. Attempts to make sites "pixel perfect" is the worst habit from the print-world that designers brought online with them.

velcrovan 3y ago
The second sentence is true. The first sentence is completely unsupported.
thrwy_918 3y ago
what percentage of users would you estimate are interested in choosing or writing a user style sheet?
- crispyambulance 3y ago
  What percentage? 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.
- Izkata 3y ago
  "User agent" is the more important one. Allow the browser to deal with the system it's presenting on (mobile vs desktop, for example).
- jeroenhd 3y ago
  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.
  - velcrovan 3y ago
    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.
    - jeroenhd 3y ago
      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?). The more power you give to CSS, the more power you give designers like this: https://stackoverflow.com/questions/68936634/how-to-ignore-the-phones-font-size-setting-with-css https://stackoverflow.com/questions/68936634/how-to-ignore-t...
jen729w 3y ago
That sounds really boring, so I’ll say no thanks. 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.
- mrob 3y ago
  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.
  - ricardobeat 3y ago
    Have any web pages stuck in your memory like real books do? The web is akin to magazines and not books. Nowhere in the article it talks about making it visually interesting.
    - mrob 3y ago
      Yes, but not any with typography like the article. I use custom CSS and Firefox's Reader View to disable a lot of design/typography.

defanor 3y ago

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.

shadowbanned0 3y ago
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.
- defanor 3y ago
  > 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.
- kuhewa 3y ago

mmcgaha 3y ago

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.

dusted 3y ago

Font selection should be left up to the browser vendor, and ultimately, the user, and not be overwritten or otherwise dictated by the website.

Mikhail_Edoshin 3y ago

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.

lazyvar 3y ago

(2006) An article about the importance of typography uses massive, unreadable font at 25px.

bobbylarrybobby 3y ago
And with ink traps in the title font.
- ricardobeat 3y ago
  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…
mfru 3y ago
I think it is more readable than most pages. One of the few pages where I don't need to scale up at least one step in my browser.

Tactical45 3y ago

Can anyone recommend a good course in typography?

Beijinger 3y ago
No. But this should give you an idea about the issues in about 30-60 seconds https://tex.stackexchange.com/questions/110133/visual-comparison-between-latex-and-word-output-hyphenation-typesetting-ligat https://tex.stackexchange.com/questions/110133/visual-compar...
neilv 3y ago
One option is Matthew Butterick's "Practical Typography": https://practicaltypography.com/ https://practicaltypography.com/

alecst 3y ago

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.

gherkinnn 3y ago
> Treat text as user interface > 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.
- criddell 3y ago
  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.
vintagedave 3y ago
> next to no styling 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/617fb6201335779f8424ad9528b72c41 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-&-layout:-spacing https://daveon.design/about-dave-on-design.html#typography-&...

kderbe 3y ago

(2006) 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.

brailsafe 3y ago
Which arguments did you find puzzling? Everything seemed pretty relevant to me
- zerocrates 3y ago
  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. [1] https://web.archive.org/web/20070628195031/https://informationarchitects.jp/the-web-is-all-about-typography-period/ https://web.archive.org/web/20070628195031/https://informati...
  - brailsafe 3y ago
    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.
  - BetaPictoris 3y ago
    Is it just me or does the original look much better? I think it's the text size, but also the spacing of the new version just feels... wasted.

proc0 3y ago

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.

MrVandemar 3y ago
>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.
- brailsafe 3y ago
  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.
  - proc0 3y ago
    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.

dkarras 3y ago

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. Whenever I see such content, I send them this link which demonstrates the issue in a fun way: https://www.ironicsans.com/owmyeyes/ https://www.ironicsans.com/owmyeyes/

xigoi 3y ago
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.
- dkarras 3y ago
  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.
  - xigoi 3y ago
    Yes, I am talking about pure white on pure black. I find gray on slightly darker gray hard to read.
jwells89 3y ago
I think this varies between individuals. 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.
zerocrates 3y ago
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).

RuleOfBirds 3y ago

I have trouble caring about what someone says about typography when they've chosen abnormally excessive letterspacing which makes reading awkward and effortful.

dangbackup 3y ago

[flagged]

MrVandemar 3y ago

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".

RoyalSloth 3y ago
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.
amelius 3y ago
Might as well teach people how to dress properly.
brailsafe 3y ago
True. Typographic scales, proportion, and a few other subjects would prove generally valuable for many.
enjo 3y ago
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.
zerocrates 3y ago
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.

brailsafe 3y ago

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.

chrisweekly 3y ago

Good oppty to share https://every-layout.dev/rudiments/axioms https://every-layout.dev/rudiments/axioms and its use of a coherent typographic scale as the basis of fundamentally sound web UI layout.

garrickvanburen 3y ago

To those god wishes to punish, he first teaches typography.

wombatpm 3y ago
Those he wishes to drive mad he teaches kerning or keming depending on the type of madness desired.

creata 3y ago

This site, and many other typography-adjacent sites, have comically large text on my desktop computer. What's up with that? (Maybe I've just misconfigured my browser.)

dchest 3y ago
My theory is that these designers use very large displays with very high resolutions and put them meters away from their eyes. Although, I'm not sure how they can read text on UI elements at the same time.
vandahm 3y ago
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.
- chrismorgan 3y ago
  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 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). (Also: 16px = 12pt.)
- 3y ago

tarcon 3y ago

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.

deleted 3y ago
[deleted]