Typography is one of the most Important and fundamental aspects of design. If you strip away all of the pictures, all of the flashy interactions, all of the cool features of any kind of design, typography remains.
That's because the content—the text on the page—is always the most important part of a design.
It seems like this concept is getting lost on new designers, especially, but can you blame them? When AI is taking care of more and more things, when apps make everything so smooth and sleek, why bother with the hard, boring basics?
Well, I'm trying to fight these same impulses in myself. I also needed a place to put all of my previous CYBORG_ newsletters.
So here's the announcement of the grand opening of:
Aside from plugging my own website, I thought I'd offer a couple things that make typography beautiful. Maybe you'll notice these details (or lack thereof) in other applications or websites.
Readability
Type doesn't have to be readable. But the typographic system of an entire website or book absolutely does. Have you ever been to a website that was just frustrating to read? Maybe you don't know why, but it just made you more tired and it was really easy to give up and scroll somewhere else.
I was trying to research viruses on this website but it was exhausting to do so despite my high intent to stay and read. The reason? The type spreads all the way across the page. In fact, it's generally advised to keep your line widths somewhere around 50–75 characters long. This website's template is almost twice that, making it really hard to sustain deep reading.
It's details like knowing how to lay out type that can make a huge impact. The reason line length matters is that your eye fatigues the longer the line stretches out, and especially as you try to go from the end of a line to a new one. It's so much easier to lose your place and re-read lines or skip lines when the start and the end of the lines are so far away from each other, like in the example above.
A lot of website designers either don't know about this, or still offend this rule because of horror vacui (fear of empty space). If you don't have a strong understanding of typography, you're more likely to center-align your paragraphs and let the text stretch as wide as possible to fill up the space. Ironically, this is yet another readability disaster, adding more fatigue to the eye as you read (and don't get me started on center-aligned type—just leave it left-aligned if you're typing in English).
We need empty space to be able to rest our eyes. Cherish that negative space, don't fill it up ;)
Subtext
There's often meaning to be found in a text that isn't directly in the physical words. For example, knowing the historical or political context of a book or an article adds meaning to the message. Works like Animal Farm become more than just an interesting exploration of greed, rebellion, and social dynamics. If we put it in historical context, we can draw connections to real-world events and people.
Typography offers us a chance to insert more meaning into plain old words, a subtext of its own. We use things like bulleted lists to group multiple ideas together. We can use bold or italic styles to add emphasis within a sentence.
My favorite part about web typography is that you can add even more meaning through the use of HTML semantics. In case you're not familiar with HTML, it's the structure of the web. It uses tags to mark the beginning and the end of something: paragraphs, links, bold formatting, all use these tags to surround the text that you want to give extra meaning.
HTML semantics refers to tags that have this extra meaning (there are some tags that have no meaning, like the famous <div> tag). For example, the abbreviation tag, <abbr> is a way to mark an abbreviation in the text and provide the user with the expansion of that abbreviation, like how HTML is an acronym for Hypertext Mark-up Language.
I know that's getting into the weeds, but it serves multiple purposes, my favorite being accessibility. When we take care of the visual aspect of typography, we help people read the message. When we take care of the HTML (arguably another aspect of typography), we help people with ranges of ability to still access the content on the page—whether they have low or no vision, cognitive concerns, or any number of other circumstances.
You'll notice this on my site and these emails most easily with the captions under images. It's a way to help people who aren't sighted or who have low vision understand the image and gain the context that sighted users get by looking at the image in context.
Design elements
There is beauty in simplicity. Typography taught me this viscerally. My goal on the website is to lean on the strength of simple things—kind of a meta-message in relation to the CYBORG_ newsletter. It's not perfect, and I will be working on it continuously, but it is a success in my attempt to go back to the basics.
I can always add more flourishes and visual interest by using classic design elements. But I want to see how far typography can take me. How much can I squeeze out of the text on the page?
You'll have to let me know how you like it—and you'll want to visit it at least once on a computer. Phones don't allow for the kind of space needed for nice typographic layouts!
If nothing else, I hope this brief intro to typographic ideas helps you notice the world around you. Text and type is an integral part of our environment—physical and digital. How often have you stopped to look at what you're looking at? What are the extra messages you get when you read something? Can you believe how amazing it is that we can read at all?
P.S. There are people even in advantaged countries that aren't literate. I highly recommend looking for ways to help both children and adults get the resources they need to gain those skills. Whether through organizations or through policies affecting education and access to education.