7 ms·
Web designers should get good training in typography (2006)
- Tactical45 3y agoCan anyone recommend a good course in typography?
- neilv 3y agoOne option is Matthew Butterick's "Practical Typography": https://practicaltypography.com/ https://practicaltypography.com/
- Beijinger 3y agoNo. 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...
- alecst 3y agoI 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.
- rednafi 3y agoSame. Not every webpage needs to look like stripe’s homepage.
- atoav 3y agoGuess 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.
- brailsafe 3y agoThe 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.
- 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 agoI’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-&...
- alecst 3y agoWhat is an example of a page with no styling, then, if not one that uses the defaults? :)
- vintagedave 3y agoI 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/ 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.
- red_trumpet 3y agoGoing 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.
- karaterobot 3y ago> next to no styling 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.
- 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 agoWhich arguments did you find puzzling? Everything seemed pretty relevant to me
- zerocrates 3y agoI'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 agoAh 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 agoIs 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 agoNot 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 agoInteractivity 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 agoTypography 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.
- lazyvar 3y ago(2006) An article about the importance of typography uses massive, unreadable font at 25px.
- bobbylarrybobby 3y agoAnd with ink traps in the title font.
- ricardobeat 3y agoPretty 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 agoI 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.
- dkarras 3y agoIt 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/
- jwells89 3y agoI 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 agoThat'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).
- dkarras 3y agoPreferring 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.
- userbinator 3y agoTurn your monitor's brightness down. 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).
- RuleOfBirds 3y agoI 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]
- xnx 3y agoTypography 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.
- thrwy_918 3y agowhat percentage of users would you estimate are interested in choosing or writing a user style sheet?
- jeroenhd 3y agoA 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 agoExcept 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.
- 3y ago
- MrVandemar 3y agoMy 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".
- Almondsetat 3y agoYeah, just another niche high school course that everyone should follow, that’s what our schools need
- blowski 3y agoIndeed. Medium has wonderful typography, but it doesn’t make me want to read them.
- Spivak 3y agoAll 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.
- brailsafe 3y agoTrue. Typographic scales, proportion, and a few other subjects would prove generally valuable for many.
- enjo 3y agoOne 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.
- brailsafe 3y agoAs 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 agoGood 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 agoTo those god wishes to punish, he first teaches typography.
- wombatpm 3y agoThose he wishes to drive mad he teaches kerning or keming depending on the type of madness desired.
- creata 3y agoThis 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.)
- fodkodrasz 3y agoThe 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.
- chrismorgan 3y agoI 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.)
- Izkata 3y agoI 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.
- tarcon 3y agoI 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]
- defanor 3y agoSeeing 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 agoThis 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 agoI 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 agoFont 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 agoThe 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.