typography

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…)

Methods for Controlling Spacing in Web Typography

If you were developing sites in 2006, then you may have worked with a designer like me who was all up in your business about fonts not looking exactly the same in the browser as they did in mockups.

Then you may have tried explaining to me the pains of cross-browser compatibility and how different browsers render fonts differently from one another. In response, I likely would have sent you an image file that contains the content instead to make sure everything looked the same in all browsers. Yes, I was one of those designers.

Web fonts have come a very long way since then and we now have tools to tweak the way fonts render in browsers. Some have been around for quite a while. I remember my mind nearly bursting with excitement when I discovered FitText.js and Lettering.js way back when.

There are still plenty of situations today where adjusting fonts is needed to ensure the best legibility despite having all these fancy tools. We're going to cover a few of those in this post along with methods for how to deal with them.

(more…)

System Fonts in SVG

There was a time when the smart move in picking fonts for a website was to a font-family that was supported across as many platforms as possible. font-family: Tahoma; and whatnot. Or even better, a font stack that would fall back to as-similar-as possible stuff, like font-family: Tahoma, Verdana, Segoe, sans-serif;.

These days, an astonishing number of sites are using custom fonts. 60%!

No surprise, there is also a decent amount of pushback on custom fonts. They need to be downloaded, thus there are performance/bandwidth hits. There is loads of nuance on how you load them.

Also no surprise, there is some advocacy for the return to local fonts. Fast! Good enough! Let's look at that for a sec, then also look at using them within SVG.

(more…)

“OpenType Variations Fonts”

Over on the Typekit Blog, Tim Brown has written about an exciting development in the world of web fonts: an improvement to the OpenType font file specification.

This might not sound all that exciting at first, but “variable fonts” allows designers and developers to embed a single font file into a webpage and then interpolate the various widths and weights we need from a single file. That means smaller files, fewer requests, and more flexibility for designers. However, this format isn’t available to use in browsers yet. Instead, it shows that there’s a dedicated effort from Google, Microsoft, Apple and Adobe moving forward:

Imagine condensing or extending glyph widths ever so slightly, to accommodate narrow and wide viewports. Imagine raising your favorite font’s x-height just a touch at small sizes. Imagine sharpening or rounding your brand typeface in ways its type designer intended, for the purposes of art direction. Imagine shortening descenders imperceptibly so that headings can be set nice and tight without letters crashing into one another. Imagine this all happening live on the web, as a natural part of responsive design.

If you’re interested in learning more, we wrote about the call for a responsive font format which explains why it’s going to be so darn helpful in the future. John Hudson also wrote a long overview of the whole story, and the spec is here.

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