Groundbreaking new tools for web typographers

Slide 1

Groundbreaking New Tools for Web Typographers

A talk by Jen Simmons, Designer Advocate at Mozilla. Presented at Ampersand Conference on 29 June 2018

Slide 2

I'm @jensimmons on Twitter

Slide 3

Variable Fonts. They are cool.

Slide 4

You can play around with Variable Fonts, and find a lot of information about fonts and what they can do on many new playground websites. Axis-Praxis. V-Fonts. Typeshift. What Can My Font Do. And more.

Slide 5

These new sites remind me of Typecast.com — a site I used a lot to choose fonts while testing out thousands of typography adjustments. This tool made it much easier to test a font before paying for it. But once I'd use my chosen font on the real project, things were completely different.

Slide 6

Same with using Photoshop or Sketch. Typography details and choices made in these programs always translate to something slightly different on the web.

Slide 7

There is nothing like using real HTML and CSS to see how a project will work. There's nothing like making choices on your real project, with your real content and branding to figure out what to do.

Slide 8

For that, you have to get into the browser.

Slide 9

This is what today's developer tools for CSS and HTML look like. HTML on the left. CSS on the right.

Slide 10

Today's HTML & CSS tools look an awful lot like they did a decade ago, when Firebug first came out and the Inspector was brand new. Not much has changed in that decade.

Slide 11

For typography, we know we can change the CSS properties in the DevTools. Those changes appear on the page. If we know the properties we want to use, and the values that are available, it's easy. But what if we don't have all that memorized?

Slide 12

CSS Fonts level 3 brought Open Type Features to the web. All kinds of options for numbers, ligatures, alternative styles... but you have to already know what a font has to offer. If you don't, it's extremely hard to figure out.

Slide 13

How can web designers discover what a font can do?

Slide 14

These new font demo sites are helpful for showing what a font can do — especially "What Can My Font Do". But you have to have access to the font file, and you have to know about these sites, and you have to take the time to go exploring... very often, the fonts we use on the web are hosted by a 3rd-party service, and we don't have the file.

Slide 15

Fonts come with user manuals — that PDF that was downloaded when the font was bought. It's one of the best places to find out what features and options a font has, but almost no one reads it.

Slide 16

Most of what’s needed is hidden.

Slide 17

It takes a large investment of time to use these font features. You have to know you want it.

Slide 18

What if instead it were easy…

Slide 19

What if it were easy to use Variable Font axis and Open Type Features?

Slide 20

What if we had robust, powerful tools for playing, experimenting, and exploring while in the process of making your website.

Slide 21

Enter Firefox. We at Firefox have been working on just such a Font Editor all year. Along with tools for making it easy to explore options for layout.

Slide 22

We have three tools: the Firefox Font Editor, the Firefox Grid Inspector, and the Firefox Shape Path Editor.

Slide 23

Time for a Live Demo

Slide 24

(This is when I switched to Firefox Nightly and did a live demo.)

Slide 25

When are these tools coming out?

Slide 26

The Grid Inspector is already out.

We are shipping the Shape Path Editor, support for CSS Shapes, and the new Firefox Font Editor with Variable Font support in Firefox 62, on 5 Sept 2018.

The new Firefox Font Editor will ship in Firefox 63, on 23 Oct 2018.

Slide 27

You can use the tools today. They are currently in Firefox Nightly.

The regular version of Firefox is what your website’s users have.

Firefox Nightly is what you can have. It's two versions in the future.

Slide 28

Firefox Beta and Firefox Dev Edition are one version in the future. You can use them, but they are neither what your users have, nor the latest version of what our teams are working on.

Slide 29

By using Firefox Nightly, you can get updates and changes right away. It might also be occasionally buggy, so be patient. It's the equivalent to a dev server when making a website.

Slide 30

You can download Nightly at: http://nightly.mozilla.org

Slide 31

In Firefox Nightly, there's actually two levels of "in the future" — 1) Stuff that’s already on by default, and 2) Stuff that's "behind a flag"

Slide 32

To turn on the even-more-cutting-edge features that are half built, put "about:config" into the URL bar (as if that were a website URL).

Slide 33

You'll get this warning sign that reminds you things might be a bit broken. Say yeah, yeah, that's fine. I won't be mad.

Slide 34

Then you can see this giant list of everything that is in progress.

Slide 35

Start typing something in the search box, to narrow down the list — in this case, let's type "font". And you can see everything that has to do with fonts, which is still a long list.

Slide 36

Actually, let's type "fonteditor" (all one word), and there — there's one option for turning on the font editor. See how it says "false" by "default"? That means by default, the font editor is off.

Slide 37

Double-click on the word false. (It's a terrible user interface, I know. Nerds.) And it will change to "true". Now you can open a new tab, and the Font Editor will exist in your copy of Firefox.

Slide 38

So everything that's on by default will simply show up when you download Nightly. Anything that's also in-progress, but is off by default, you can turn it on by going to "about:config" — to "flip the flag". What is on or off by default changes all the time, so it's hard to keep up with what needs the flag flipped. You can always go to "about:config" to check.

Slide 39

If you find bugs or problems, or have requests for features, we'd love to hear from you. File an issue at bugzilla.mozilla.com. (And don't worry about filing a dup. It's ok. We'll be nice about it.)

Slide 40

There's really great documentation about all our new tools at MDN web docs: developer.mozilla.org

Slide 41

There's a page about the Firefox Grid Inspector

Slide 42

Another page about the Firefox Shape Path Editor

Slide 43

The page for the Firefox Font Editor is in progress (when I gave this presentation, it's there now).

Slide 44

I also have videos about how to use these tools on my YouTube channel, Layout Land.

Slide 45

Also, very quickly, I want to mention that this year, 2018, I'm talking about how very different the possibilities for graphic design on the web are now.

Intrinsic Web Design