[HN Gopher] Web designers should get good training in typography...
       ___________________________________________________________________
        
       Web designers should get good training in typography (2006)
        
       Author : greenSunglass
       Score  : 129 points
       Date   : 2023-11-11 01:49 UTC (1 days ago)
        
 (HTM) web link (ia.net)
 (TXT) w3m dump (ia.net)
        
       | Tactical45 wrote:
       | Can anyone recommend a good course in typography?
        
         | neilv wrote:
         | One option is Matthew Butterick's "Practical Typography":
         | https://practicaltypography.com/
        
         | Beijinger wrote:
         | No. But this should give you an idea about the issues in about
         | 30-60 seconds
         | 
         | https://tex.stackexchange.com/questions/110133/visual-compar...
        
       | alecst wrote:
       | 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.
        
         | rednafi wrote:
         | Same. Not every webpage needs to look like stripe's homepage.
        
           | atoav wrote:
           | 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.
        
         | brailsafe wrote:
         | 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.
        
         | gherkinnn wrote:
         | > 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 wrote:
           | 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 wrote:
         | > 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/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-&...
        
           | alecst wrote:
           | What is an example of a page with no styling, then, if not
           | one that uses the defaults? :)
        
             | vintagedave wrote:
             | 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.
        
           | red_trumpet wrote:
           | 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.
        
         | karaterobot wrote:
         | > 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 wrote:
       | (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 wrote:
         | Which arguments did you find puzzling? Everything seemed pretty
         | relevant to me
        
           | zerocrates wrote:
           | 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://inform
           | ati...
        
             | brailsafe wrote:
             | 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 wrote:
             | 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.
        
             | creesch wrote:
             | 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.
        
       | proc0 wrote:
       | 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 wrote:
         | >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 wrote:
           | 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 wrote:
             | 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.
        
               | brailsafe wrote:
               | 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.
        
           | proc0 wrote:
           | 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.
        
       | lazyvar wrote:
       | (2006) An article about the importance of typography uses
       | massive, unreadable font at 25px.
        
         | bobbylarrybobby wrote:
         | And with ink traps in the title font.
        
           | ricardobeat wrote:
           | 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 wrote:
         | 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.
        
       | dkarras wrote:
       | 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/
        
         | jwells89 wrote:
         | 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 wrote:
         | 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).
        
           | dkarras wrote:
           | 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.
        
         | userbinator wrote:
         | Turn 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).
        
           | smrq wrote:
           | 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.
        
             | userbinator wrote:
             | 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.
        
               | nextaccountic wrote:
               | 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.
        
               | xigoi wrote:
               | There is room for emphasis: bold text, colors, different
               | font, ...
        
               | mrob wrote:
               | Printed text does just fine using maximum contrast all
               | the time, and bold and italics for emphasis.
        
               | dylan604 wrote:
               | >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.
        
             | _Algernon_ wrote:
             | Typography has a solution for emphasis that doesn't use
             | contrast, and it's called _italics_. Use that.
        
               | criddell wrote:
               | 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?
        
               | _Algernon_ wrote:
               | Text and music are two completely separate forms of
               | medium with completely different conventions. Your
               | insistence on comparing them is meaningless.
        
           | dkarras wrote:
           | Yeah, in my case that is not it. Turning the brightness up
           | makes it significantly worse though, I agree.
        
         | diego_sandoval wrote:
         | I never have this problem, but it might be because I always use
         | my monitor in the range of 15% to 30% of its maximum
         | brightness.
        
         | dylan604 wrote:
         | 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.
        
         | xigoi wrote:
         | 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 wrote:
           | 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 wrote:
             | Yes, I am talking about pure white on pure black. I find
             | gray on slightly darker gray hard to read.
        
       | RuleOfBirds wrote:
       | I have trouble caring about what someone says about typography
       | when they've chosen abnormally excessive letterspacing which
       | makes reading awkward and effortful.
        
       | xnx wrote:
       | 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.
        
         | thrwy_918 wrote:
         | what percentage of users would you estimate are interested in
         | choosing or writing a user style sheet?
        
           | jeroenhd wrote:
           | 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 wrote:
             | 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 wrote:
               | 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-t...
        
           | crispyambulance wrote:
           | 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 wrote:
           | "User agent" is the more important one. Allow the browser to
           | deal with the system it's presenting on (mobile vs desktop,
           | for example).
        
         | jen729w wrote:
         | 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 wrote:
           | 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 wrote:
             | 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 wrote:
               | 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.
        
         | velcrovan wrote:
         | The second sentence is true.
         | 
         | The first sentence is completely unsupported.
        
       | MrVandemar wrote:
       | 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".
        
         | brailsafe wrote:
         | True. Typographic scales, proportion, and a few other subjects
         | would prove generally valuable for many.
        
         | enjo wrote:
         | 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 wrote:
         | 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.
        
           | jsmith99 wrote:
           | 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.
        
         | Pamar wrote:
         | _...get at least baseline training in typography and layout. It
         | should be a short high-school course. The basic rules are not
         | that hard._
         | 
         | Can anyone suggest a concise book/course/video on this?
        
           | nicbou wrote:
           | https://practicaltypography.com/
        
         | Almondsetat wrote:
         | Yeah, just another niche high school course that everyone
         | should follow, that's what our schools need
        
           | blowski wrote:
           | Indeed. Medium has wonderful typography, but it doesn't make
           | me want to read them.
        
           | Spivak wrote:
           | 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.
        
         | RoyalSloth wrote:
         | 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.
        
       | brailsafe wrote:
       | 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 wrote:
       | Good oppty to share https://every-layout.dev/rudiments/axioms and
       | its use of a coherent typographic scale as the basis of
       | fundamentally sound web UI layout.
        
       | garrickvanburen wrote:
       | To those god wishes to punish, he first teaches typography.
        
         | wombatpm wrote:
         | Those he wishes to drive mad he teaches kerning or keming
         | depending on the type of madness desired.
        
       | creata wrote:
       | 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.)
        
         | fodkodrasz wrote:
         | 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.
        
           | chrismorgan wrote:
           | 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.)
        
           | Izkata wrote:
           | 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.
        
         | dchest wrote:
         | 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 wrote:
         | 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 wrote:
           | 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).
           | 
           | (Also: 16px = 12pt.)
        
           | Izkata wrote:
           | > desktop monitor
           | 
           | I guess that partially explains it, I'm on a laptop which is
           | naturally closer than a desktop monitor.
        
           | FinnKuhn wrote:
           | 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.
        
       | tarcon wrote:
       | 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.
        
       | defanor wrote:
       | 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 wrote:
         | 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 wrote:
           | > 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 wrote:
           | 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
        
             | chrismorgan wrote:
             | No idea what it looked like in 2006 (what domain did they
             | use before ia.net?), but here's it in 2017: https://web.arc
             | hive.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.
        
       | mmcgaha wrote:
       | 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 wrote:
       | Font selection should be left up to the browser vendor, and
       | ultimately, the user, and not be overwritten or otherwise
       | dictated by the website.
        
       ___________________________________________________________________
       (page generated 2023-11-12 23:02 UTC)