Variable Font CodePen Demos

[00:00:00]
>> Jason Pamental: One last thing that I wanted to show you. And if we have any more questions, we can talk about that, or we can wrap it up. codepen.io/jpamental, and if you go there, you'll see my nice little profile photo. But more important, if you click on Collections, Variable Font Demos, in here you'll find a whole bunch of them.

[00:00:29]
So if you want to look at things that are playing around with one specific element at a time? Some different experiments with different ways to treat optical sizing, proportional weights that are all relative to the core weight. All a little bit more isolated, so you can look at things one at a time.

[00:00:53]
Rather than trying to pick through some of the demos that have everything all together. So these things might be worth playing around with, because they're a little bit more stripped down. So that you can kind of play around these things a little bit more easily. So you can see each one of these here, there's the baseline, set with font grade, and optical sizing, and all that.

[00:01:19]
And if we want to take a look at different lines of text,
>> Jason Pamental: So we know Frank Sprung is set in an H1, we go down to the H1. You'll see optical sizing here is still forced to 16, so you're not getting the extreme thick and thin. You can just go in CodePen, you can edit it right there,

[00:01:46]
>> Jason Pamental: And you can see the change right away. So CodePen's a really nice place to go and play around with some of these things. You don't have to have a code editor installed, it'll run SAS for you, all that stuff right there. So please feel free to play around with any of these things.

[00:02:00]
I mean, you have all of the demos, but some of them are pretty big. So if you wanna experiment with some of these things a little bit more in isolation, I hope you'll play around with those, too.
>> Jason Pamental: Any other questions, anything else anybody wants to ask about, or take a look at?

[00:02:20]
>> Speaker 2: Newbie question, so you play around with this, and then figure out something that you like, and then kind of use the code in your own-
>> Jason Pamental: Yep, yeah, and this is why I started putting these things on CodePen. Because you can embed these, you can share them, you can do whatever you want, and then more people see them.

[00:02:39]
And this is the reason why I use this platform instead of others, is now, this is some place where more people can look at it. So if you want to make your own copy, you hit Fork, and that will copy it over, and then you can sort of save it into your own account.

[00:02:58]
And then you can play around with these things, and change the values, and it gets reflected in real time. You can then copy that code right out of there and put it into your own project, you can do whatever you want. So Chris Coyier and Dave Rupert are friends of mine, and so I had been talking to them quite a bit about this.

[00:03:17]
The guys that did the Shop Talk Show, and Chris Coyier is one of the creators of CodePen. And so they were really kind of excited about this stuff, I was on their podcast earlier this year. And that kind of got me thinking about the fact that, because this is a social platform, and I want more developers to see this stuff?

[00:03:36]
It's a natural place for me to put it, and talk about it, and share it. So they've been kind enough to share some of these things in their newsletters. So that outdoor magazine one, and the FF Meadow one, they've kinda put in their newsletters. And so thousands of people have looked at it, and lots of people have forked them off, and started to play with them.

[00:03:54]
That's what I want, that's the whole point, is to just kind of spread the information about it. Get more people thinking about it, playing with it, starting to make use of it, and just kind of see what people come up with. So there's something that, I cannot believe it took 20 years for somebody to make a conference with this name, but right-click, View Source.

[00:04:20]
That is been how I've been learning web design and development for 25 years, because that was built in to the very first web browser. That was the point, was for people to be able to share and learn from what other people are doing. And so before there were books, before there were blogs, before there were podcasts, the only way that we had to learn was, what did somebody else figure out?

[00:04:43]
View Source, print it out, look at it, copy it into your another file, and start to muck around with it, and see what you can make happen. It is an integral part of the web, it's the thing that makes it beautiful, and awesome, and open. And so yeah, I hope that's never possible, I mean, people do try and obscure things a little bit.

[00:05:04]
But if you can read it in a browser, in order for it to render the page, you can look at it. I think that was the big challenge with fonts in the first place, was figuring out how to serve those fonts, but not make it easy for you to take them.

[00:05:19]
Which is fine, that's legitimate, I mean, people need to make a living designing and selling these things. But it wasn't until they figured out how to make that work in a browser, in a way that made it, maybe not impossible. But really, really difficult for somebody to get those font files and walk away with them?

[00:05:40]
We wouldn't be doing any of this stuff right now.