Typographic Color

[00:00:00]
>> Sarah Drasner: Typographic color, no we are not talking about color, we just talked about color. What do I mean by typographic color? Typographic color is really like the rhythm and cadence of typography and what it really matters for are things like body text. So if you're creating a large block of body text, if you blurred your eyes a little bit for all of these, you can kind of see what makes up even grays and what doesn't.

[00:00:28]
Stuff that has big chunks in the middle of it, does not have a typographic color that fits something like a body text very well because it has too much going on, too much rhythm in it. You need something that's a little bit more even toned. If I go back you can see it again.

[00:00:48]
>> Sarah Drasner: So if you wanna check out whether something has a good typographic color for body text, you can kinda squint your eyes a little bit. And see if it has that kind of even cadence. Responsive typography. Mike Reifmueller is a very nice Australian person who is a friend, and he invented this kind of formula for responsive fluid typography.

[00:01:16]
So it's this wave that you can work with fonts and kind of like a formula that allows you to, let's see, it allows you to take texts that work well on desktop and it just like fluidly responsively skills down. The good news is, you don't have to write all of this from scratch, you can just steal it out of his pens.

[00:01:40]
He's totally cool with that. [LAUGH] There's actually like a one liner you can use for this. This is kind of like more, this has a lot of like variables and stuff In place but it allows you to create really responsive fluid typography, we actually use it on CSS tricks too.

[00:01:56]
So if you ever on CSS tricks and you scale that window up and down, you can see the type contract and get bigger and smaller. Text Lockup, this is another CSS tricks thing. This is kind of cool, right? You've got all of these different pieces of text. Let's say you wanted to do something more creative with the placement of text.

[00:02:17]
You could do that with different pieces of an SVG, and then have it scale. So, you can have it completely locked up and still be legible fonts and readable fonts. Cause SVG actually has text inside SVG and it's successful as well. So that's pretty cool.