Posts tagged “typography”

Ollie Williams welcomes the new CSS properties for styling underlines:

Finally we can demarcate links without sacrificing style thanks to two new CSS properties.

• text-underline-offset controls the position of the underline.
• text-decoration-thickness controls the thickness of underlines, as well as overlines, and line-throughs.

I’ve been working on a blog post about this topic, and Ollie does a good job of covering some of the points I want to make. But I want to go further and explore implementation quirks, the details where the new properties don’t quite go far enough, and make a case for why underlines shouldn’t be pixel-aligned.

Ethan Marcotte:

When I’m asked to describe design systems work, I say the word that springs immediately to mind is mapmaking. As designers like Matthew Ström and Alla Kholmatova have argued, every website has a design system underneath it. Take yours, for example: your website’s interface is built from a library of components, each shaped by a series of design decisions and business needs. Your design system may not be explicit—maybe you don’t have a polished pattern library, or a set of well-defined design principles, or maybe your documentation’s not as robust as you’d like it to be—but it’s still a system. And in order to improve that system, you have to research it before you can begin to gradually, slowly improve it.

Richard Rutter:

There is more to setting hyphenation than just turning on the hyphens. The CSS Text Module Level 4 has introduced the same kind of hyphenation controls provided in layout software (eg. InDesign) and some word processors (including Word). These controls provide different ways to define how much hyphenation occurs through your text.

This is great news. I’ve always avoided CSS hyphenation because of how aggressive the algorithms are. Using these new properties in concert with @supports we can get well-controlled hyphenation as a progressive enhancement while avoiding the half-baked hyper-hyphenated middle ground we’ve had so far.

Kevin Marks:

There’s a widespread movement in design circles to reduce the contrast between text and background, making type harder to read. Apple is guilty. Google is, too. So is Twitter.

My plea to designers and software engineers: Ignore the fads and go back to the typographic principles of print — keep your type black, and vary weight and font instead of grayness. You’ll be making things better for people who read on smaller, dimmer screens, even if their eyes aren’t aging like mine. It may not be trendy, but it’s time to consider who is being left out by the web’s aesthetic.

Vincent De Oliveira:

Line-height and vertical-align are simple CSS properties. So simple that most of us are convinced to fully understand how they work and how to use them. But it’s not. They really are complex, maybe the hardest ones, as they have a major role in the creation of one of the less-known feature of CSS: inline formatting context.

No kidding, this stuff is complex.

Florian goes over a set of confusingly named properties and values from the css-text-3 specification that control what happens to white spaces when laying out text, and how line breaking works. He explains the logic of the system, different ways the properties can be used to achieve various results, and looks into some of the complication caused by incomplete implementations.

I care about this topic a lot, but it really tests my patience. If only browser support for these properties were consistent, I could start to build a mental model that takes them all into consideration. As it stands, it’s such a mess that I routinely have to spend time reading about it, and still not be super confident with the results.

Sebastian Morr:

Pixels of LCD monitors are usually composed of three stripes of the colors red, green, and blue. Tech enthusiast Matt Sarnoff used this property to his advantage when inventing a subpixel text encoding font. Its glyphs are comprised of colored strips only one pixel wide.

Arun Venkatesan:

During my research process, I noted down the keywords used to describe some of the typefaces. As I read through the list, the same words kept coming up over and over: friendly, modern, clean, simple, human. It’s like everyone wants something that they can use to define their brand, yet they really just want a slightly different version of what everyone has.

David Jonathan Ross:

One of the major things I’ve learned over the last years is that how a font is licensed can have a huge effect on how it ends up being used, (sometimes even more so than its design). This is a tough pill to swallow.

So these days I truly consider licensing and marketing to be a part of my type design process. This started with my typeface Input, where I worked with Font Bureau to create a license that allowed programmers to use it in their code editors for free, with a separate license for published use.

I use David’s wonderful Input Sans Narrow on this site (and my business card!), and I can confirm that both the free code-editing license and the all-in-one desktop/web commercial licensing terms played an important part in that decision.

Toshi Omagari at TYPO Berlin 2018:

Limitation is a fantastic ingredient for creativity. In the early days of video games, you did not have a luxury to use retail fonts on screen and developers had to make their own in a pixel grid of multiples of 4, the most common being 8*8 pixels in monospace letter width.

Paul McCann:

Nobody was sure where they came from. These are what came to be known as the ghost characters (幽霊文字).

I’ve been working with CJK characters for the first time for the Open House Macau website, and finding everything about these writing systems to be fascinating.

Avi Selk, for the Washington Post:

Note: An earlier version of this story published incorrectly because, seriously, putting two spaces in the headline broke the web code.

Frank Chimero:

I find that the more input I have in the content and strategy of the project, the less burden I place on the aesthetics. Perhaps this is because I believe the aesthetic of the work should be an extention of its objectives, so if you get the strategy right, the look follows. Since I like to tackle problems sideways, I must risk being plain and rely on direct visuals to keep the work comprehensible.