Tags: fonts

136

sparkline

Inside CSS | Clearleft

If you’ve ever wondered what it would be like to be a fly on the wall at a CSS Working Group meeting, Richard has the inside scoop.

The consensus building is vital. Representatives from all the major browsers were in the room, collaborating closely by proposing ideas and sharing implementations. But most fundamentally they were agreeing together what should go in the specifications, because what goes in the specs is what gets built and ends up in the hands of users.

Ampersand: Interview with Mandy Michael – Clear(left) Thinking – Medium

I’m soooo excited that Mandy is speaking at Ampersand here in Brighton in June!

Be there or be square.

Variable Fonts

A simple resource for finding and trying variable fonts.

FontDrop!

A handy browser-based tool for examining font files to see which features they support.

It’s Dangerous to Go Stallone. Take Glyphhanger | Filament Group, Inc., Boston, MA

You’ll need to be comfortable with using the command line, but this is a very useful font subsetting tool from those clever folks at Filament Group.

Shipping system fonts to GitHub.com · @mdo

A look at the font stack that Github is using.

How to use variable fonts in the real world | Clagnut

The gorgeous website for this year’s Ampersand conference might well be one of the first commercial uses of variable fonts in the wild. Here, Richard documents all the clever things Mark did to ensure good fallbacks for browsers that don’t yet support variable fonts.

Ampersand Web Typography Conference | 29 June 2018 | Brighton, UK

Save the date! The best web typography conference in the world is back in Brighton on June 29th, and this time it’s at the best venue: The Duke Of York’s.

In fact, you can do more than saving the date: you can snap up a super early bird ticket for whopping £85 saving.

Silly hover effects and the future of web typography – Pixelambacht

These experiments with transitioning variable font styles on hover might be silly, but I can see the potential for some beautiful interaction design.

V6: Typography and Proportions | Rob Weychert

Rob walks us through the typographic choices for his recent redesign:

Most of what I design that incorporates type has a typographic scale as its foundation, which informs the typeface choices and layout proportions. The process of creating that scale begins by asking what the type needs to do, and what role contrasting sizes will play in that.

eBay’s Font Loading Strategy | eBay Tech Blog

Here’s the flow that eBay use for the font-loading. They’ve decided that on the very first page view, seeing a system font is an acceptable trade-off. I think that makes sense for their situation.

Interestingly, they set a flag for subsequent visits using localStorage rather than a cookie. I wonder why that is? For me, the ability to read cookies on the server as well as the client make them quite handy for situations like this.

Visions - A Literary Science Fiction Magazine

This forthcoming sci-fi quarterly publication looks intriguing:

Each issue contains a part of a previously untranslated novel as well as essays looking at the world through the lens of different writers.

I’m loving their typeface. It’s called Marvin. It was specially made for the magazine, and available to download and use for personal use for free.

Marvin gets its distinctive voice not only from its Art Nouveau vibe but also from its almost geometrically perfect construction. Its roundness and familiarity with Bauhaus typefaces shows its roots in geometric sans serifs at the same time.

The story of its (re)construction is fascinating. (Thanks for the heads-up, Jason.)

User Interfaces for Variable Fonts · An A List Apart Article

A good introduction to variable fonts, and an exploration of the possible interface elements we might use to choose our settings: toggles? knobs? sliders? control pads?

If you really dislike FOUT, `font-display: optional` might be your jam | CSS-Tricks

Everyone’s been talking about font-display: swap as a way of taking the pain out of loading web fonts, but here Chris looks at font-display: optional and font-display: fallback as well.

The Equilateral Triangle of a Perfect Paragraph | Better Web Type

This is a fun game (I scored a measly 73/100). The idea is to develop a feeling for the balance between font-size, line-height, and line length …just like the three sides of an equilateral triangle.

Too many of them still set line-height, font size and line width as independent features when in fact they should all be considered together. The equilateral triangle is a perfect representation of how the three features work in harmony.

Font Map · An AI Experiment by IDEO

Fontlandia is yours to explore.

By leveraging AI and convolutional neural networks to draw higher-vision pattern recognition, we have created a tool that helps designers understand and see relationships across more than 750 web fonts.

Color fonts! WTF? 🌈

I only just wrapped my head around the idea of variable fonts and now here’s colour fonts to really mess with my mind.

Get started with variable fonts – Medium

Rich has posted a sneak peek of one part of his book on Ev’s blog.

The Futures of Typography

A wonderfully thoughtful piece from Robin, ranging from the printing technologies of the 15th century right up to the latest web technologies. It’s got all my favourite things in there: typography, digital preservation, and service workers. Marvellous!