typography

An Introduction to the `fr` CSS unit

With all the excitement around CSS Grid, I haven't seen as much talk about the new fr CSS length unit (here's the spec). And now that browser support is rapidly improving for this feature, I think this is the time to explore how it can be used in conjunction with our fancy new layout engine because there are a number of benefits when using it; more legible and maintainable code being the primary reasons for making the switch.

(more…)

The Equilateral Triangle of a Perfect Paragraph

Still, too many web designers neglect the importance of typography on the web. So far, I've only met a few that really understand typography and know how to apply that knowledge to their work. And the lack of knowledge about typography doesn't come from ignorance. I learned that web designers are commonly either self-taught and haven't grasped the importance of typography yet, or they actually studied design but typography was just one of the classes they had to attend.

I created the Better Web Type course to help raise awareness of the important role typography plays on the web. (more…)

Tracing the History of CSS Fonts

Chen Hui Jing has written an excellent post on the history of CSS fonts and the way that the W3C writes the specification and strange CSS properties like font-effect, font-emphasize and font-presentation.

As part of my perpetual obsession with typography, as well as CSS, I've been looking into how we got to having more web fonts than we can shake a stick at. What I love about how the W3C does things is that there are always links to previous versions of the specification, all the way back to the first drafts.

Although those are missing the full picture of the various discussions and meetings among all the individuals involved in crafting and implementing the specifications, it does offer some clues to how things got to where they are.

Combining Fonts

Another one from Jake Archibald!

This one is using two @font-face sets for the same font-family name. The second overrides the first, but only select characters of it, thanks to unicode-range.

You know how designers love ampersands? It's a thing. Dan Cederholm once pointed out some advice from Robert Bringhurst:

Since the ampersand is more often used in display work than in ordinary text, the more creative versions are often the more useful. There is rarely any reason not to borrow the italic ampersand for use with roman text.

Then Drew McLellan showed how to do that (without a <span>), using unicode-range.

Design Your Content Typography First (and a Look at Type Nugget)

How often have you seen a "completed" site that still has lorem ipsum text lurking in the quiet corners? While we often strive for perfection in our designs and code, I am reminded every time I stumble across a garbled bit of lorem ipsum that not all aspects of web development process are given the attention they deserve.

Developing a complete and detailed suite of typographic elements is an often-overlooked aspect of the process. While not always as prominent or exciting as other graphic elements, typography is an essential part of every site and does most of the heavy lifting to fulfill each page's purpose: transferring information.

While I can't do anything about lazy lorem ipsum use, I've been working on a tool that helps develop beautiful and robust online typography.

(more…)

System Font Stack

Defaulting to the system font of a particular operating system can boost performance because the browser doesn't have to download any font files, it's using one it already had. That's true of any "web safe" font, though. The beauty of "system" fonts is that it matches what the current OS uses, so it can be a comfortable look.

What are those system fonts? At the time of this writing, it breaks down as follows:

(more…)

Has the Internet Killed Curly Quotes?

Glenn Fleishman:

At an increasing number of publications, [curly quotes have] been ironed straight. This may stem from a lack of awareness on the part of website designers or from the difficulty in a content-management system (CMS) getting the curl direction correct every time. It may also be that curly quotes' time has come and gone.

I know it's highly uncool in this community to get quotes wrong and highly cool to remind people how to type them. I'm on the uncool side of the fence on this one. I go so far as to standardize on straight quotes on this site. I'm not worried about the encoding, but laziness is some part of it. It's a weird key command (⌥ [) especially for coders who are so used to straight quotes being required. Not to mention a different key command for the closing version (e.g. ⌥ ⇧ ]), and both are even harder on any non-macOS system). Straight quotes of both varieties have a dedicated key.

You know what is a cool-these-days sentiment? The fact that language evolves, including written language. I'm not anti-curly-quotes, I just don't care. If you'd like to write in straight quotes, but publish in curly quotes because "algorithmically, it’s a solved problem", be my guest. Perhaps written English, on the web, has evolved to "whatever, either way". Oooooo look at that period outside the straight quotes. I'm a loner, Dottie. A rebel.

That Fluid Type Stuff Again

There have been a couple of articles lately regarding fluid type.

Matt Smith (calling it "flexible type"):

My preferred approach for more flexible type is to calculate the font size based on the viewport height and width using the :root selector

Richard Rutter (calling it "Responsive Display Text"):

In one fell swoop you can set the size of a display heading to be proportional to the screen or browser width, rather than choosing from a scale in a series of media queries.

Both are all about leveraging viewport units to size type that doesn't jump from size to size at breakpoints, but gracefully scales.

I'd highly recommend checking out Mike Riethmuller's Fluid type though, which is nearly just as simple but allows for setting minimum and maximum sizes, which feels like the way to go for me.

(more…)

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag