Quickly Alter Typography with Firefox Font Editor

Quickly Alter Typography with Firefox Font Editor

– One of the things
that can make a website look the most beautiful is the typography. And frequently you
might see sites that you really like or you think are beautiful, but you’re not really sure what’s going on with them. Well you could use the Firefox font editor to inspect another website and see what it is that they’re doing with their typography. Lets look here. There’s a website at the Audubon society that’s really quite beautiful. Its stands out in part to me because of the way that they’re using fonts. And I can inspect this element. You’ll notice here I have the tool set up to be docked to the right. But of course you could use this drop down over here to switch it to
dock to bottom or left. And you’ll also notice that I’ve got this three pane editor set up going. And if you don’t have that, you can click this little
button and open it up. And then over here you’ve
got the html at the top, I’ve got the CSS on the left. And on the right we
have here other options. Its defaulting at this point
in late 2019 to layout. But I can switch it to the font editor. And we can see, lets go ahead and inspect. I’ll right click on some text, inspect element, that’s
going to jump us over here to our text. And we can see that
this is Source Sans Pro. We can switch to the computer top and we can see that the computed. Here, source sans pro, font size eighteen. Font weight four hundred. But I find it a little
bit easier to understand over here in the font editor. And if we wanted to mess around with it, we can mess around with it. We can play with it and see what it might look like we’re working on our own website. We’re working on our own project. What does it look like if we adjust the line height or we adjust
the spacing of the letters. For any of you who have
designed in a browser or you’ve tweaked a design in CSS. You might realize that of
course you can hand write these numbers and lots of times we do. When we come in here and we kind of like arrow up and arrow down
through different sizes. But there really is actually
something really nice about using these sliders
to make it faster. Lets look here at the
New York Times website. We can look and see what
fonts they’re using. Another thing about
the font editor is that if you go all the way to the bottom, it says all fonts of the page. At the bottom. And you can open this
up and you can look at all of the fonts that are in use on this particular webpage. And I can see here that,
oh gosh these really are beautiful fonts. What are these fonts? I would like to use these fonts! Can I use these fonts, where did they get these fonts from? We can see here that
these are all custom fonts that the New York Times
had made by a company. Aha, that’s why its so amazing. Because they’re using these fonts. If we go back to the Audubon society and we look at their list of fonts. We can see, I think that
these are coming in from Google fonts. We could hunt down this URL
here and go investigate. Sometimes the URL that comes up will show you the company they’re
licensing the fonts from and where they can come from. Also if you’re having troubles with understanding why your fonts
aren’t loading or something. Some of this in here,
when it comes to URL’s or the font face syntax can help you track down what’s wrong. So another thing I wanted to show you, if a font doesn’t seem to be loading or you’re not sure what font it is that’s running on the page. If you go to a place on the webpage, lets inspect this paragraph text here. We can see if we scroll all the way down, we find the font family deceleration. Oh its here. So in this particular place, font family, Source
Sans Pro is underlined. Because that’s the font that’s actually being used in
this particular instance. We can hover over it and
see a little bit of a sample text for that particular font. Maybe if something goes wrong
with the Source Sans Pro. Here actually I can show you if I change the name and that’s not a font. So Verdana is now being used. And we can see that this is Verdana and we can tell that because
that’s what’s being underlined. And if we hover, we can see a sample of Verdana in our hover. If you hover over the name of the font, the second name, the smaller one. Then it will show you on the page where it is that the font is being used. I can hover here under
Source Sans Pro Regular and it will show me all
the different places that the font is being used. Or I can scroll up to the top and hover over. I can see there that’s also
Source Sans Pro Regular. Or up here is Source Sans Pro Light. Also one other thing about
this all fonts on the page. This font preview text. You could come in here and type something. Maybe your company logo
or a little bit of text from your company and see
that font in your text. And then you’ll be able to say, oh do I like this font? This Noto Serif I’ve never seen it before. I actually do kind of like it. Let me go check it down and see maybe I want to
use this font or not. The Firefox font editor though, really starts to come alive if
you’re using a Variable font. So lets look at this Variable font demo that Microsoft made to kind of show off and to explain Variable fonts. And what they are and what they do. Lets look here where
it says Variable Tides and inspect this element. And we can see that rather than having steps for the weight. Where it jumps from one
hundred to two hundred, to three hundred to four hundred. Which is what CSS does. It has done for a very long time when it comes to having more bold or some sort of weight in your font. A Variable font now has
this continuous slider. Because you can set it to
any number that you want to and this will show you if you hover this it says here three
hundred and seven hundred. That’s telling us that
this particular font, not all Variable fonts. Generally you can set a Variable font, you can range it from one to nine hundred and ninety nine I think? But the font itself, that
file has some data in it that tells the browser which
ones are going to work. So this particular font is
going to do things between three hundred and seven hundred. And then we can slide it along and we can change it and see change. You can see up there where
it says Variable Tides that its getting more bold or less bold. We can also adjust the width
very much the same way. We can make it wider and wider and wider. Or we can make it narrower and narrower and narrower. This is all from the same font file. There’s just one file here. There’s not a whole bunch of files. A lot of the most beautiful fonts, like I really love Avenir. I used Avenir next on a
project for a long time. I wanted to use it very, very thin and condensed. And also very bold and thick and all sorts of other variations. I wanted to use maybe five or six or seven different variations of Avenir. But I couldn’t ask the
user to put up the download bandwidth to download six
or seven different fonts. With Variable font version of Avenir next, for example, it could
be designed that font. So that it had a wide range of weight and a wide range of width
in the same exact font. And then you would only
ask the user to download one font file. And you’d use CSS to go
ahead and tweak exactly which version of the font it is. Its just math, its a whole
bunch of vector math. And its all baked into
the Variable font file. Firefox font editor is going to really give you the chance to see, is that a Variable font or not? What could I do with this font? I could sit here and play
with these for hours really. In order to tweak my
typography and figure out what really looks good. Does it look good to make it this extreme and that extreme combined. Or how can I take this same font file and stretch it into all these different places on my page. And make a beautiful
range of typographic color and emphasis voice tone
express all of these things. While still using one font file. Theoretically you can
do that in your head. But I love getting into a browser and really tweaking it for real. And not messing in Photoshop
or a different program where it actually looks
very, very different. But sitting here inside a browser and tweaking in this tool here. If you’re more interested
in Variable fonts you can go to v-fonts.com and find a
whole bunch of Variable fonts. They have built onto this website as you’re learning about the fonts, these same sort of sliders. And its a good chance to quickly be able to see what’s going on
with Variable fonts. Axis Praxis is a really great website with a whole bunch of different fonts. Some that are really kind of crazy and just for fun. Just sort of pushing the
boundaries of what’s possible with a Variable font. And messing around and playing, and seeing what kinds of
things might be possible. If you want to learn
more about the Firefox font editor there’s a page on MDN where you can read about all the different things it does. All of the different little secret things that are baked inside. I hope this tool is really useful for you. If you have other ideas or
requests about this tool and what you wish it did. Feel free to leave a comment
on the page for this video. We would really love to hear from you. Or if you know how to
file a bug in bugzilla and you find a bug definitely do that. The team who’s made the Firefox tools font editor would really
like to know how its working for you.


  1. Post

Leave a Reply

Your email address will not be published. Required fields are marked *