Hacker News Reader

I was with you up to "I do not give a shit"

What font has been more tested for quick pass-through of data than the default system fonts? To me, this simply screams "This is the main body. You can find your information here"

No. System fonts have completely different reasons for existing than fonts you would want to use to communicate with the public. System fonts were initially created for legibility at certain screen resolutions, for dot-matrix printers, etc.

But it's worse than that. What I'm trying to explain is that every typeface, even the most innocuous one gives subtle, subconscious cues to the readers. Every font. The associations can range from some childhood Disney movie to a font you saw at a hospital while you were having a really serious medical problem. But after 30 years of everyone on earth looking at system fonts, readers now get the cue when they see a system font that they are looking at a shitty MS Word document their boss just pinned to the felt board. Or else they assume the author did not bother or did not have the skill to make it look good.

I'm a writer. I've written 6 novels. I love words and ideas, unencumbered by visuals. I've written at least 500k LoC on in my life, maybe double that, I don't know. That's all pure thought and logic. So I get the agitation: All I want to get across to you, my reader, my employer, is the information, my distilled ideas. That's all that's important. Read it or don't, I don't care, it's good and the logic works.

I'm also trained as a designer. My first several jobs were in ad agencies, since I was 14 years old as an intern. How will people subconsciously interpret the ancillary visual aspects of this is something I learned early on: what will they construe? Because bad design can prejudice someone against a great piece of writing, and vice-versa.

No visual thing you can make has zero cultural reference; everything you make that other people will see drags some bundle of pre-understood tropes into it. You can't make one without referencing some aspect of culture that affected you. The job of a designer - what makes a designer different from someone who just has aesthetic chops and can tell if a web page looks good - what constitutes the black arts of design - is to know every single cultural trope you are dragging in front of the customer's target audience and to understand how it will psychologically affect their state while they read the content, so you know how to trigger certain emotional resonances in them while they absorb the information the client is trying to get across.

That's what "giving a shit" means in terms of communicating visually.

Facebook cares, right? Given their impact, their resources, their objectives, they of all companies must "give a shit". Right?

So here are the fonts of the Facebook posts listed on a Facebook user's wall:

> Helvetica, Arial, sans-serif

> system-ui, -apple-system, BlinkMacSystemFont, Segoe UI Historic, Segoe UI, Helvetica, Arial, sans-serif

Observe how there's no custom font, no weird font, and no "associations with some childhood Disney movie" to be found on a page seen and used by 2+ billions of users daily.

Funny you should bring that up, because FB is a perfect example of a visual relic from the late '00s which didn't age well. Much of the post-dot-com-crash world of design in the web and early mobile space was defined by a rejection of the excessive - wild crazy idiotic irreverent and often incoherent - typography and design of the '90s web. So, super basic fonts, white backgrounds, and what they thought was "minimalism". However, because they relied on the tooling rather than creating their own cues, (and also because their UI turned into a towering nightmare of crap) Facebook looks extremely dated to most people's eyes now. It looks like a 20 year old website...and not a particularly good one.

My outside opinion is that Meta does not give a shit at all about how Facebook looks at this point. I'm not here to make the case that revolutionizing their design would improve their onboarding rate now or something. I'm making the case that if you are some nobody with no network effects and no billion dollars, you have a better chance at getting people to read your content if you take the time to (a) get it out of system-ui fonts and (b) make a bunch of other aesthetic decisions that trigger certain pleasing feelings in your audience.

Facebook got modernized multiple times and doesn't look at all like it did 20 years ago.

hard to tell with all the cruft but I'll admit I'm not a user. The point stands about the shift in web design in the early 2000s

> System fonts were initially created for legibility at certain screen resolutions, for dot-matrix printers, etc.

I think you’ve gotten mixed up between the system-ui font and the browser default font.

The system-ui font is modern. It was only added to CSS about ten years ago. It’s not Times New Roman. It wasn’t designed for dot matrix printers.

Everybody else here is talking about something that fits in with the rest of the system. You seem to be talking about something from the early 90s.

Most current system screen fonts in major OSs - as a general group, as a set of letter forms - are not and never were printed fonts. They evolved from bitmap fonts that were created with 90s constraints in mind. They retain some of that aesthetic, and they are not usually the best candidate for the job.

Leaving it up to your user's system font is also an arguably poor choice.

> Most current system screen fonts in major OSs - as a general group, as a set of letter forms - are not and never were printed fonts. They evolved from bitmap fonts that were created with 90s constraints in mind. They retain some of that aesthetic, and they are not usually the best candidate for the job.

This couldn't be more wrong. Things have progressed since the '90s.

Apple, Google, Microsoft hired real typographers to create their new fonts. Apple uses San Francisco in their printed materials all the time.

On Apple devices, system-ui is San Francisco, a TrueType variable font with 2937 glyphs, 4 axes and 369 instances. The axes are width, optical size, grade and weight. San Francisco also has all of the goodies someone who cares about typography could want: ligatures, small caps, contextual alternatives, true fractions, etc.

I think this qualifies as "giving a shit". ;-)

BTW, you can see each named instance in the developer tools in Firefox and Chrome on macOS.

An instance is a combination of the 4 axes; the instance of San Francisco compressed thin uses can be specified in CSS as:

    font-variation-settings: "wdth" 47, "opsz" 28, "GRAD" 400, "wght" 120.702

Apple went into detail a few years ago about creating San Francisco [1][2].

So developers/designers get all the features variable fonts have to offer without having to download anything.

Google has done something similar with Noto.

[1]: "WWDC Introducing San Francisco, the New System Fonts" -- https://www.youtube.com/watch?v=OpveNRh-jXU

[2]: "Meet the expanded San Francisco font family" -- https://developer.apple.com/videos/play/wwdc2022/110381

Could you recommend any good books, video series, blogs, or other training for those that who need to understand fonts at your level professionally? Or maybe you could write one?

I know someone that is trying to break into this space but doesn’t have the past experience, and it’s almost impossible to catch up. I’d love to provide them with a resource.

In defense of Comic Sans, it’s not just for realtor pages. It can be effective for local, casual communication by appearing friendly and approachable. If I saw a flyer pinned to a corkboard advertising a fish and chips special in Comic Sans in a seaside town, my mouth would be watering, because I’d know that’s a mom and pop place that focuses more on the food and taking care of people than the marketing.

> Could you recommend any good books

The Elements Of Typographic Style by Robert Bringhurst

"Five minutes to learn, a lifetime to master" kind of thing.

>> If I saw a flyer pinned to a corkboard advertising a fish and chips special in Comic Sans in a seaside town, my mouth would be watering

Heh. You absolutely nailed the concept. This is precisely right. Comic Sans is a totally crap font, but it's great if that's the feeling you want to get across! That's exactly how thoughtful design works. Level one is to know your references. Level two is: Use the kitsch when you want it. Use the profane. Use the found art. Then use the "classy" or "expensive" when you want to show a "classy" client. Level 3 and up is knowing how to play with those high and low cultural notes to make a kitschy client still look kitschy but subconsciously implant that the fish is of a slightly better quality; or make your "classy" real estate agent still look "classy" but show that they aren't a stuffy asshole. And do this without either client outright complaining.

Far as books, I'd qualify by saying that I learned the design craft on the job from an early age and was tutored by great art directors who let me experiment and explained these things to me; why what I was communicating with a certain background or certain font was going to negatively affect a consumer in a way I hadn't considered. And I had a couple great professors in college (but I dropped out). Most of the basic theory of the higher level of how to use this stuff to influence people is contained in Marshall McLuhan's "Understanding Media", which is the quintessential work on how one - in a design role - can change perception of the content of a piece by making informed psycho-sociological choices about the way it's presented visually. Lots of master works before and since on the concept of propaganda, but for designers McLuhan helpfully narrows it down to show that presentation is often more important than content, and for designers this means your role is essentially to master content the way an audio engineer masters a band's album. Which is often as important to the final output as the original recording quality itself. This is especially hard to do if you also wrote the content because it requires a certain objectivity about the work. Anyway, McLuhan's theory is timeless and kind of essential to get into the guts of everything: How brands work, how small design choices work, etc.

Being able to explain the difference between what looks good and being able to explain why you chose it (along with all the cultural references, positive and negative, which the choice is intended to trigger in the audience) makes the difference between a $40/hr design job and a $150/hr art direction job, so mastering the technique of selling the technique has a certain benefit as well. But you must come armed to your client with examples. The best way to learn is to look at everything you see around you and question all their design choices, why did they use those colors, those fonts, etc. and also see what trends are developing. Go back to the 1950s, 60s, 70s, 80s, 90s and see what they were using then. Now who is your target audience, and what feeling do you want to give them?

[edit] Just want to add: I was a purely technical child who learned to code and run a BBS way before I knew anything real about design. I came up doing what I thought was cool ANSI art and then "designed" some stuff in Photoshop 3.0 for people when I was 12. I didn't understand anything. When you're a technical person you tend to see design as a problem to solve with programs and with code. You don't realize that design is a programming language that runs on human brains. This was a revelation for me when I was about 15, and it's informed all my choices since. So yes - fonts matter.

Rebuttal / question: what about Web1.0 sites that still exist? Is the subconscious connotation that they’re dated also carrying an air of wisdom? Or do the people using them simply not care? Personally, I feel as though I fall into the former camp, mixed with a healthy dose of nostalgia for my youth.

Some examples, in no particular order:

NIST’s page [0] on TIME Protocol (RFC868 [0.a]) - as an aside, TIME has to be the simplest (in terms of crude utilities; obviously there exist simpler ways to find the time) and most delightful way to find the current time that exists. See [4].

Great Britain’s National Grid Status [1] - warning, doesn’t render well on mobile.

No Answers In Genesis [2] - a primer on evolution / someone’s personal vendetta against creationism. Good thing it’s Web1.0, because the latency to AUS would be horrible.

Frank’s Compulsive Guide to Postal Addressss [3] - if you have any questions about the address system of any country in the world, it is answered here. An absolute treasure trove of information.

0: https://tf.nist.gov/tf-cgi/servers.cgi

0.a: https://www.rfc-editor.org/rfc/rfc868

1: https://gridwatch.templar.co.uk/

2: https://www.noanswersingenesis.org.au/

3: https://www.columbia.edu/~fdc/postal/

4: Requires GNU coreutils for `od` and `date` - also if you get round-robined onto a server that doesn’t support TIME, try again.

    nc -w1 time.nist.gov 37 | od -An -tu4 -N4 --endian=big | awk '{print $1 - 2208988800}' | xargs -I{} date -d @{}

    # EDIT: you can further shrink this by doing everything in awk, assuming GNU awk
    nc -w1 time.nist.gov 37 | od -An -tu4 -N4 --endian=big | awk '{print strftime("%c", $1 - 2208988800}'

I think you can guess the boundaries of the design answer here.

When you're experimenting with a new technology, everything looks very different and everything looks new. When you look at the net result of people experimenting with it 30 years later, you can see that they were all constrained by the same limitations, and in aggregate - despite many differences - everything takes on a recognizable aesthetic that was produced by the limitations of the day, the technology, the genre, whatever.

These sites are all wildly different and extremely creative, yet they're all recognizably from the same decade or so.

Okay. Now step back from that. Humans - you, me, everyone - have learned a very complex visual language from birth, where certain cues indicate certain things and trigger certain memories. If you show me a picture of a dude wearing bell bottoms, we're probably in the 70s. If it's a girl with a nose ring and a midriff showing it's probably 2005 - but there are smaller cues within that. 99% of people don't think about this consciously when they see an image, or a website, or whatever. They just associate it with a time or a genre.

In design for the web, we've had decades of constraints come and go - we had Flash with its own weird aesthetics, Java embeds, etc. People remember a time and they associate a design style with that time, without really knowing why. So it's a question of choosing from that historical library and constructing something that makes people see what you want them to see. If you want them to associate something with the early 90s, then totally make it look like one of these pages.

The thing I was taught in design school was to attempt to make design that was timeless. This is always kind of impossible - because you're limited technologically in ways you don't even realize at the time, and because you're always influenced by what's around you. But try to make something that will look, in 20 years, like it was new. Very hard to do. Why do it? Because in 20 years, you can always go and make funny vintage pastiche references to what people did 20 years ago. But it's quite hard to make anything that doesn't show its age.

Thank you for the sincere and in-depth response. I hadn't really meant mine to be troll-esque, but I can see how it could come across that way.

My favorite comparison of two sites from the same place is HAProxy: haproxy.com is the one meant for the C-Suite to be impressed, and haproxy.org is the one meant for people who are running it. It's also the reason that I suspect it's not just nostalgia that makes me think of text-heavy sites as being more authoritative (unless it's a share delusion by elder millenials, I guess). If you're going there, you probably are interested in finding a specific answer in technical documentation, not a sales pitch.

Zooming out to other industries entirely, look at cars: it's generally pretty easy to guess the decade of a car if you have any interest in them. However, with some, the designers have occasionally managed to blend the different eras together in a way that I would argue borders on timeless. The canonical example, IMO, is the Porsche 911. Before the 996 model, it had a certain look about it that updated, but didn't change. The 996 had the oft-mocked "fried egg headlights" (plus it was water-cooled, which angered purists), but other than that, it started a more gradual shift in the looks of the car. The 997, 991, and 992 all look remarkably similar from many angles, assuming all are wing-less. That's 21 years of models. Also, the 992 changed its rear vents to a vertical rather than horizontal configuration, which hasn't been used since the 911's predecessor, the 356 - a car that ceased production in 1966. That subtle change, along with some typography for the logo, makes it look way older than it is, but in a good way.

I didn't take your rebuttal / question as trollish in the least! Cars are a good analogy. Designers have a huge palette of historical references and callbacks to choose from, along with newer concepts and whatever is currently in vogue. The difference between a thoughtful design and a bad one is whether those things are blended meaningfully, intentionally, and finally in a pleasing and functional way. So like, not to get flamed if someone happens to be a PT Cruiser fan (because I'm friends with a guy who loves them), but I think that's an example of pastiche. The web design equivalent would be using a blatantly absurd "40s looking" font on the body text as opposed to using it judiciously on a couple of header elements, maybe.

I'm a Datsun guy myself, and I like what Nissan did aesthetically with the new Z, because it's not a replica but it's got just enough callbacks in the form.

I think in all types of design, historical reference is a large part of your "color palette". But you don't want to fall into retro nostlgia or pastiche unless that literally is the whole point of the brand (like, Johnny Rockets or something).

One of the most embarrasing things that can happen to a designer (and I know from experience) is to find out that a style they chose or an image they created because they thought it looked good was inadvertently referencing something they either didn't know about, or which they had absorbed subconsciously. When other people get a reference in your work that you didn't intend, that's a mistake. It's why when I interview graphic designers I'm not looking for whether or not their work "looks good" - which is completely subjective. I'm interested in how versatile they are at mimicking and synthesizing a broad array of visual language, and whether they can explain their choices - including their awareness of cultural callbacks and the intentionality that went into choosing them.

When I think of quirky conspiracy sites, I picture yellow-on-blue text and bright red text inside a blink element and links at the bottom to lycos and altavista.

This is the example of people trying too hard to make things "scream". Just plain Times New Roman or system font conveys a slightly different form of illiteracy...

I love that use of "legible fonts" are a indicator of illiteracy for you.

You can be the most literate person in the world, but if the way you present yourself is a bunch of flashing pink and purple Times New Roman on a lime green background, I'm going to assume you have nothing useful to tell me. There are a whole lotta legible fonts you can use that show you give a tiny fuck about how you come off to other people.