A presentation at Ampersand 2018 in in Brighton, UK by Jen Simmons
A talk by Jen Simmons, Designer Advocate at Mozilla. Presented at Ampersand Conference on 29 June 2018
I'm @jensimmons on Twitter
Variable Fonts. They are cool.
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.
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.
Same with using Photoshop or Sketch. Typography details and choices made in these programs always translate to something slightly different on the web.
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.
For that, you have to get into the browser.
This is what today's developer tools for CSS and HTML look like. HTML on the left. CSS on the right.
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.
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?
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.
How can web designers discover what a font can do?
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.
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.
Most of what’s needed is hidden.
It takes a large investment of time to use these font features. You have to know you want it.
What if instead it were easy…
What if it were easy to use Variable Font axis and Open Type Features?
What if we had robust, powerful tools for playing, experimenting, and exploring while in the process of making your website.
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.
We have three tools: the Firefox Font Editor, the Firefox Grid Inspector, and the Firefox Shape Path Editor.
Time for a Live Demo
(This is when I switched to Firefox Nightly and did a live demo.)
When are these tools coming out?
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.
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.
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.
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.
You can download Nightly at: http://nightly.mozilla.org
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"
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).
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.
Then you can see this giant list of everything that is in progress.
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.
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.
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.
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.
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.)
There's really great documentation about all our new tools at MDN web docs: developer.mozilla.org
There's a page about the Firefox Grid Inspector
Another page about the Firefox Shape Path Editor
The page for the Firefox Font Editor is in progress (when I gave this presentation, it's there now).
I also have videos about how to use these tools on my YouTube channel, Layout Land.
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
I have many examples of the kinds of things that you can do now. Here's one at: labs.jensimmons.com/2017/01-008.html
And another.
And another.
Whitespace Overlap Stages of Flexibility Changes how we use Viewport
All the demos are at labs.jensimmons.com
Like this.
It's a time to experiment and play. And the Firefox Design Tools are going to help us do that.
jensimmons.com @jensimmons layout.land labs.jensimmons.com
Here’s what was said about this presentation on social media.
for free. You
can too.