Bram Stein

Mark Hmm well Past The Mara Skye This will make you crazy And you're taking all you can be Just call me up Because you know I'll be there And I'll see your true colors Shining through I'll see your true colors And that's why I love you So don't be afraid To get those shirts And show your true colors True colors True colors Shining through I'll see your true colors And that's why I love you So don't be afraid To get those shirts And show your true colors True colors True colors Beautiful Beautiful Like a rainbow Yeah, yeah Show me your colors Show me your rainbow Show me your rainbow Show me your düş exercise Show me your rainbow Use the jewelry Trust me Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Mike Chick, one-two. Mike Brake, one-two. Good to see you all. Welcome to Odense. Still sunny and warm. I don't know about later, but we'll get to see that. Welcome to the annual One Day Out conference 2016. We are so thrilled to welcome you, first of all, and we are definitely thrilled for the speakers that we're going to see today. Let me tell you, we've had quite the turn up today. I don't know if you've been talking to the person next to you or somebody at the bar or whatever, but we are here from Austria, Scotland, Denmark, Sweden, Spain, Portugal, and I can't even remember all the rest of those countries. We are many different people from many different places gathered here today. So thank you for that. Thank you. Also. A warm thank you to the sponsors. One thing is the attendees. Thank you. Another thing is the sponsors. Thank you as well. You're all a part of this, all a part of making it happen. And today we're going to see a bunch of speakers talk about a wide variety of design and web and things digital. The first speaker, I want to say something else before that. Have you ever selected a font by accident? Like, I'm going to. I use Helvetica here or Arial or whatever. I don't care. No. Nobody ever does that. We think a lot about the fonts that we use. We think about the kernings and the easings and how they look and how they treat the element of a web page or something that we need to print or whatever. The first speaker that I'm introducing is Bram Stein. He works at Typekit, and he's got an opinion about fonts. So I'm really excited about that. Bram, are you ready? Welcome to the stage. Okay. It's not working. Does it work? Not yet. Okay. There we go. Yes. Just a second. Let's see. All right, there we go. Ooh, it's bright. So good morning everyone. Before I like to start, I would like to know which ones of you are designers. Can you raise your hand please? Wow, and developers? Well that's a pretty good bunch. So I'm a developer myself, so I don't know what I'm doing here. I'm not a designer, but I'm gonna tell you about design. So I'm interested in design and typography, and one of the reasons for that is because I used to, or I still do, I read a lot. And about 10 years ago, I had this bright idea that I create an e-book reader based on web technology. And I went with web technology because it's easy to distribute, and well, pretty much every device has a browser, right? So I made a sample e-book prototype using web technologies, and it looked like this. So I started comparing this to an actual book, right? And I found a lot of problems here. It was like, it was 10 years ago, so it was a very limited font selection, like we didn't have web fonts. There was no hyphenation, no good justification. Layout was really, really hard. No math typesetting, et cetera. So this led me to research typesetting, right? Like what makes a text read well. So that led me to tech, and for those of you who don't know tech, you basically write your document in plain text, and then you convert it to, for example, PDF. And tech was created in 1978, and it's mainly used in academics. And many of the typesetting algorithms that we use today originated in tech. And actually, typesetting and typography contains a lot of exact science. So characters are drawn using Bezier curves. Hyphenation is done by algorithms as well, and justification as well, and so on. So unfortunately, few of these algorithms made it into browsers. So for example, on the left, it's Tech. Which is created in 1978. And on the right is a browser in 2005. And this made me really, really sad. So I think the web was, and to a large extent still is, not a good platform for high quality typography. I mean, we've got web fonts now, that's in the last 10 years. We've got more advanced layout, we've got grid, we've got columns, we've got flexbox, et cetera. We sort of have hyphenation. Not all browsers support hyphenation. Justification is still really bad. Mad typesetting is pretty ridiculous right now. So it's really, really sad that a typesetting system from 37 years ago, because that's 1978, is better than my 2016 browser. That's really shocking. So what I decided to do back then, is I decided to build my own browser. Because why not, right? And this browser was gonna have great typography, and great typesetting, great rendering. But I quickly figured out that writing a browser isn't something you do during your weekend. So I kind of abandoned that idea. And since I'm a web developer, I thought, well, why not use JavaScript, right? Because that's how we solve problems as web developers. You just throw a lot of JavaScript at it. So it started with justification. And I created, And typeset is a library that implements the justification algorithm from tech in JavaScript. And while I was doing that, I realized I also needed hyphenation. So I implemented Hypher, which is a small hyphenation library. And at that point, I thought, like, hey, web fonts are a thing now. So I needed some way to load fonts. So I started working on font loading. And I ended up working at Typekit. So don't ask me how that happened. But... Um... So I never finished the ebook reader, unfortunately. So why am I telling you all this? I'm telling you this because it affected the way I approached typography and design. And that's very much from a technical point of view. So I'm very interested in rules and tools and algorithms that help me become a better designer. And there's a whole range of tools that attempts to help designers. And I've kind of scientifically classified them here. And you kind of have a range from, like, fill in the gaps to fully automated design. And kind of WordPress templates are kind of fill in the gaps. Somebody supplies the design, and you supply the content. And there's not much room for customization here. Now, slightly to the right on this scale is semi-automated design. And this is where an algorithm picks a template from a collection of templates designed by a designer. And a good example of that is Flipboard. So Flipboard takes content and then fits it into a template. And here, for example, are four different templates with the same content. And then images and the templates are selected automatically and cropped automatically. So this can create quite nice looking designs. Now Flipboard automatically selects from a large collection of templates. These are, for example, all the templates that Flipboard uses. And they do that depending on the content. But these templates are still designed manually, right? There's still a designer involved. So that brings me to the other end of the scale. And that is complete automation of design. And this is where the system designs everything without the designer getting involved at all. This is not that common, but there are a couple of these tools. And one of the latest ones is called the Grid. And I have a short video of that I wanted to show you. And by the way, I'm not affiliated with the Grid, so I thought I wanted to show you. And here we go. Is there audio? No audio. What is the music? And then they say the Grid. And then there's a blinking cursor. Where's something? Is it in there? Yeah. OK, good. So you can see each of these code shafts. on the Godwin Project website on Microsoft. It's called Reset Connecting. lay it out and how to show it. Which they explain in the audio, but yeah. All right, so let's move on. It's not that exciting without audio. So, this is really amazing, but I have some issues with this. I mean, where does the designer come in, right? Will all designers become meta designers? Are you all going to be out of a job soon, right? But I don't think so. I think these tools only work in very narrow contexts. Like Flipboard works because their content is very simple. You have a headline, an image, plus a paragraph or two, which is almost never the case in real life. So I don't think tools like these are the future. But I do think that tools are still useful for design and I strongly believe that instead of designing for you, your tools can help you become a better designer. And I really think that programmers have this figured out. Like I enjoy programming because it's very exact. You can proof your correctness of your code, right? Of course, nobody ever does that because it's too much work but we have a border down version that's very popular and that's automated testing. You can kind of write some codes, you write your test cases you make a change, you run these tests. So it's really easy to verify that your code still works. You have a really awesome, very quick feedback cycle about what works and what doesn't. And I want this for design as well. I want unit tests for design. And there are some tools that claim to do this. They basically take a screenshot before a change and after and then compare the two. But this is very fragile, like a single pixel difference might trigger a failed test case, which is kind of ridiculous. Like sometimes you just move things by one pixel. That should not fail your test case. And it's also incredibly hard to maintain. So I don't think this is a good idea. But we need a design tool that understands design and the intention of what I'm trying to do. And also tells me how I can get closer to that goal. So some of you may be familiar with Google PageSpeed. And Google PageSpeed analyzes your website and tells you what you can do to improve the performance of your site. And developers really love this because it sets a goal to work towards. And it also simplifies your development cycle. So you make a change, you run it through this tool, and see if it gets any better, and then you iterate on that. So that makes me wonder, like, can we do the same for design? Can we duplicate a designer's intuition and experience in a tool? Is it possible to have a tool as a design mentor, right? Can you build a tool that analyzes your design, your typography, and give your recommendations? But before answering that, let's take a step back and focus on the basics of typography. And I'm sorry if this is really basic. I'm sure some of you already know this, but I just wanted to kind of go through it because it's important. So typography is based on text and typefaces. And text is made out of characters. And typefaces are used to render these characters. And typefaces are actually not made of characters, but they're made of glyphs. And glyphs are the drawings, the images, and the images. assigned a meaning. So for example, the character A has one meaning. It's an A. But it can be drawn in more than one way. For example, these are all As, but they're still different, right? So each typeface has its own interpretation of a character, which gives you a lot of choice. It's great, right? So many people think of a glyph or character as the black part, like the shape. But what they do is they overlook the white space, which is equally important. And the white space is not infinite because the glyphs are always contained within the box, which is kind of a remnant of when type was physical. So for example, metal type, like here, instead of these irregular shaped pieces of metal, it's much easier to have individual characters as boxes. So you can actually set them into boxes. In lines and paragraphs. Now, digital type, like fonts, they also use boxes. And each character has a glyph box that fully covers the glyph. And to make words, you just put these boxes together. Then that's it. It's a little bit more to it. So you can tell a lot about a typeface based on the vertical size of its glyphs. And the glyph size is measured in X height. And the X height is the vertical space between the bottom and top of most cliffs. So it's between the red lines here. So the X height is usually defined as the height of a lowercase x, so you can see that here as well, which is where the name comes from, X height. So some characters are still larger or taller than the X height. For example, the P and the D, they kind of stick out, but that's fine, because the main body of these characters is still within the X height. Now, X height is very useful, because it allows you to compare the body of a typeface to another. So let's say we want to compare these three typefaces. For example, to select fallback fonts for your web fonts. So, my target font is the one on the left, and I want to pick one of the other two. Now, at first, you may think the second one may be a closer fit than the third, right? Because it looks much more similar. But if you scale the X height of these typefaces to the X height of the first, you kind of get a different picture. So here, I increased the second typeface by about 7%, and decreased the third one by about 8%. And this paints a completely different picture. The second one now looks like a bad match, and the third one actually looks like a good match for this typeface. And this is the reason you cannot just replace one font with another. So, when you replace a large font with a smaller one, you need to increase the size, and when you replace a smaller font with a larger one, you need to decrease the size. So comparing fonts using X height is very useful when selecting fallback fonts. So now we have glyphs, and you can combine these into words and sentences using spaces and punctuation. But the canvas that we have is not infinite, right? We need to break it somewhere. We need to break this sentence into lines. And there are two problems there. That is where to break, and where to place the next line. So let's start with where to break. We'll keep it simple, and we can assume we can break this at all spaces here. So this is gonna be a bit like putting a square in a box, so it's gonna be a little morning fun activity. So we're gonna put the sentence, an apple a day keeps the doctor away, in between these two lines. And instead of going character by character, which is what the computer does, I'll go word by word, because otherwise we'll never make it. So I put in the first word, plus a space. I put in the next word, plus a space, no problem here. The next one, so far so good. But now we have a problem, right? Because the word day does not fit on the line. So what we do is we take it back out again, and fill up the remaining empty space. And then move the word day to the next line. And we continue. We put the word keeps in. And then we have the same problem as before. The word the doesn't fit. So we take it out again, fill up the empty space, and move it to the next line. And we continue. Put in the next word, and we have again the same issue. So we take it out again, fill up the space, and insert the last word and the period. So now we're done, but we still have this large space at the end. So we just fill it up. And that's it. That's basically flush left justification, or in CSS, text-aligned left. And this algorithm, is the basis for all other text alignments. So it's the basis for right alignment for center, justified, et cetera. So the algorithm is the same. It's just a different distribution of the empty space that's left at the end of each line. So for example, right aligned text, we just move the remaining space to the beginning. Or to the right, I should say. And for centering text, you divide the remaining space on each line in half, and you place one half at the beginning, and the other one at the end. And then you get centered text. Now, full justification is a bit different, because it divides the remaining space by the number of normal spaces. And then adds it to each space. So the first line has two spaces, so I divide the remaining space by two, and then place the remaining space with each normal space. Now the second line has only one space, so all the remaining space is added to that space. So in the same for the third line. Now the last line is a bit special, in full justification, because it's always left aligned. So we just put the remaining space over there. Now as you can see here, this creates a lot of undesired white space, right? In between the lines. And, these rivers, that's what they're called, because that kind of resembles rivers of white space flowing through the text, they can be fixed by using hyphenation, because hyphenation will introduce more points at which you can break a line. And this algorithm here that I've shown you is what browsers basically use. Like applications like InDesign and TeX use much more advanced justification algorithms, which are much better at aligning things. Because they optimize the space over the entire paragraph. Unfortunately browsers don't do that, and some browsers don't even support hyphenation. Looking at Chrome here, it's very unfortunate. So let's get back to the second problem. That is where to place the next line. And until now we've basically just stacked glyph boxes on top of each other. And this is okay, but the text will probably read better with a bit of white space between the line. And this is called letting in typesetting. And it's called letting after the pieces of metal that people used to put in. But I prefer the CSS version which is called line height. And this is very simple, you just put some space between these lines and some more just to adjust your line height. So that is the mechanics of basic typesetting. But what I skipped over are the rules and the guidelines and the intuition. Because what line length should you use? What is an appropriate line height for a paragraph? Basically how do you make a paragraph comfortable to read? And I emphasize comfortable here, because it's all too easy to set a text without thinking. Now another important question is how can we use these rules and guidelines to make a tool, right? Now based on my research, there are no hard rules to create a perfect paragraph. But there are some general guidelines to judge if a paragraph is set correctly. And this is what I found. A good paragraph needs the following five properties. A typeface that renders well and matches your design. A good font size so the text is readable. An adequate line length. An appropriate line height. And finally, high quality typesetting. But how do we pick these values and how do we evaluate them? So my colleague Tim Brown wrote a great little book on selecting and combining typefaces. Unfortunately it's published with Five Simple Steps, which just went out of business. But he's gonna publish this book on his website so you can read it for free very soon. But I highly recommend reading it. There are also many other books and articles on selecting typefaces, so I'm not gonna go into much detail there. But apart from aesthetics, like the rendering quality of a typeface matters a lot as well. So you need to make a test page and check the rendering on as many operating systems and devices as you can just to see if it works well. How do you pick an appropriate font size? Now a font size is directly related to the reading distance, right? So the further away you are from the screen, the larger the type should be. And this is a tool by Nick Sherman who also gave a great talk on the same subject. And it lets you calculate the font size based on the reading distance. So if you know that your visitors or your readers are gonna be at a certain distance from the screen, you can plug that into this calculator and it will tell you roughly what the correct font size should be. So that's really useful, great tool. But to me, the last three are the most interesting. The line length, line height, and typesetting quality. So one of my favorite books on typography is The Elements of Typographic Style, by Robert Brinkman. And this is what he has to say about line length. And he says, anything from 45 to 75 characters is widely regarded as a satisfactory length of line. The 66 character line, counting both letters and spaces, is widely regarded as ideal. And I find this really interesting. Because that means there is a line length range where the text is easy to read, which is centered around 66 characters per line, which is kind of the middle block here. And anything below 20 characters is pretty much unreadable, right, because you have a single word on a line. And above 100 it becomes too much, because you have to skip to the next line and then find your, the next line again. But what we can do is we can visualize this as a range. And we can divide this range into three sections. We can divide it into the red section, which is uncomfortable to read. The yellow where, like, it's okay to read, but it's not great. And green, where the reading experience is good. And by the way, don't focus too much on these numbers. I'm not so much interested in the numbers as I am in the possibilities that these numbers give me. So you can take Brinkhurst's advice, or ask a friend, or judge by sight, or if you have a lot of money, you can do a readability study. But what you're gonna end up with is roughly the same. You're gonna have a part where it's good to read, great to read, and not so good to read. So anyway, counting characters per line is very easy to do for a computer, right? So we can actually make a tool that does that for us. So I have a little demo of that, and I hope it's gonna work. I need to, demo time. So this is my demo, and I have to, because I can't see it here. So in this demo, you can select the typeface, and it will change. And you can increase, like, the font size, and the measure, and also the lighting. And what I'm gonna show you now is basically this range. So if you decrease the range or increase it, it changes the color of this range. So you can see, like right now, this typesetting is not good according to this range that we just defined, because it's sort of yellowish. And if you, decrease the measure, you can see it goes into red, because this is really bad. So you can use this to kind of select an appropriate measure. So for example here, this is pretty good. So that's very useful. I'm gonna go back to my presentation now. So, that's one of the metrics that we have. But there are two more. The line height and typesetting. Now, Ringrush has more to say on those. He says longer meshes need more lead than short ones. And dark faces need more lead than light ones. And large-bodied faces need more lead than light-bodied ones. Now this, to me, isn't as useful as a bunch of numbers that he did before. But there's some hidden logic here. So let's go through them. So longer meshes need more lead than short ones. So, this is pretty simple. Longer line lengths need more space between the lines so they don't appear to run together. So, these paragraphs here, they look visually very similar, but they actually have different line heights. For example, yeah, the top one has 1.4 line heights, the middle one 1.3, and the bottom one 1.2. But they look very similar. So, quite similar. Quite simply, the line height should increase with line length. Now, he also says large bodied faces need more lead than light bodied ones. So this here is a font with a very small body set in a range of line heights. And up to about 1.6 in line height, it's still okay. It's not great, but it's okay. But if we replace this typeface with a larger bodied one, it looks quite different. So the line height gets out of control much sooner. And the last acceptable value here is about 1.4. So the reason for this is the difference in X heights between the two typefaces. So the smaller bodied typeface has a small X height, and the larger bodied typeface has a large X height. And this is the reason that using the same line height on a typeface with a different X height will look weird. And this is also why you usually won't find a recommended line height in books or articles, because it depends on the typeface. But we can avoid this problem by scaling the line height based on the X height. So then you normalize the line height so you can actually compare them. See, that's what I do here. I just normalize them. So this is the same typeface with a large X height that was before, but if we normalize the line height here, we get a totally different picture. And then we get a similar acceptable range of line height, which is great because then we can make a range again. So this is just something I defined for myself because I thought it looked okay. So between zero and 0.8, the line heights are really bad because the lines squish together and they run over each other. And around one is okay, but the ideal normalized line height is around 1.3, 1.4. And above that, it becomes too much again. And again, we can make a tool to measure these things. So, which one is the line height? So you can see if you squish it together, it becomes red. And if you increase it a lot, it becomes red as well. And somewhere between is like the green area. So this is okay, this is okay. And it gets a bit dodgy here, and it gets worse. So this is a very useful way to kind of tell how good your typesetting is just by calculating things. So for those of you paying attention, I skipped over this rule. Dark faces need more LEDs than light ones. So here are three type faces ranging from light to dark. And on the left is the light one, and it gets darker to the right. And left paragraph looks okay, but the second and third, they look too dark, right? So they need to increase line height. And it already looks much better with like some basic line height increases. So darker type faces need more line heights than light ones. But unfortunately, this is not something we can easily define a range for, because the X height of these type faces is exactly the same. It's just that the individual glyphs are thicker. So this is really something visual. Now fortunately, we can solve that with the next measure, which is typesetting quality. And typesetting quality depends on the justification algorithm, and whether you have hyphenation or not. So let's go back to the browser for a second. This is a fairly simple paragraph, but there are some issues with it. And I've highlighted them here. So the second paragraph has too much white space. The first and fourth line have too much space due to bad justification, or rather a lack of hyphenation. And the fifth and sixth line have a different problem, because I use an EM dash there with normal spaces around them. So this creates a lot of extra white space. a lot of white space in the line. But how can we detect this automatically? So if you ask a typographer, they will tell you to squint. And squinting looks a bit like this. I've kind of done it for you, because it's kind of awkward to squint for too long. You'll get a headache. So squinting is really great for choosing a typeface, because it will tell you if your typeface is well designed. So areas with a lot of ink will stand out, which is what you want to avoid in a typeface, right? You want it kind of like an even gray space. But squinting is not very useful for judging typesetting. You can sort of see the gaps in the lines of white space here, but it's hard. So we need to solve this in another way. So what squinting is trying to do is trying to approximate the typographic color of a piece of text. And the typographic color is the average of all the white and black in a paragraph. And that changes with font, weight, line height, and text alignment. So it really is an objective way to measure the quality of a typesetting. And the best part is we can calculate this. Computers deal with pixels all the time, and they're great at adding things. So we can take this paragraph, and we can take this text, and add up all the pixels, and divide them by the total number of pixels, and calculate the typographic color. And you get something like this then. And I have a demo of that as well. So you can change the typographic color. You can see it changes a bit. But as you can see, it's not as useful. You can sort of see small changes and get a good overview of the contrast in your composition, but it isn't really sufficient for judging typesetting. So what we want to see is which lines are bad, and not like the entire paragraph. So what we need to do is we need to calculate the typographic color per line. Instead of per paragraph, which makes problems stand out much more. So lines with too much white space will be lighter, and lines that are set too tight will be darker. So this is a really great hint to enable hyphenation, to insert line breaks, or even rewrite the text. So demo time. So I've also implemented that. And you can see now that you get, the typographic color per line. So if you change, it will like reflow the text. I can switch back to... So you can see that you can use this to judge each line based on the typographic color. So now we have a way to objectively measure the quality of line lengths, line height, and typesetting. But we can take this one step further and kind of combine them. And this allows us to show typographic pressure. And typographic pressure is when a piece of text is set in a suboptimal way. So pressure increases when one or multiple variables, such as the line length, the line height, or typesetting quality, are outside of their acceptable range. So you can see that here. So for example, if I increase the size a lot and make the measure smaller, it becomes kind of yellowish. It probably should be red at this point. But... So it's kind of a combination of all these things. So you can kind of find a nice green area where your text is easy to read. And if you do it like this, no, that's not good. This is not good. So you kind of combine all these measures into one visual thing that you can check. Now you can combine this tool with something like a media query view or a media query viewer. For example, here I have some of the media queries of Wikipedia. And Wikipedia is a great test page because the typesetting is usually pretty horrible. So if you enable this tool on Wikipedia, you'll probably see something like this. You see like the paragraph on top is okayish and then the one on the left is okay because it's a narrow measure there. And then the other media query, the line lengths become too long and it kind of shows you that the typesetting there is not great. So if you show typographic pressure in this way, you'll be able to quickly identify where there are problems in your typography and where you most likely need to introduce another breakpoint or otherwise fixture typography. And this means we can now build a responsive design tool, which is just what I was looking for. So this is my responsive design tool, which I built yesterday. And basically you can use this to design your typesetting based on media queries. So you can, for example, increase the size. And by the way, this is 320 pixels, which is kind of like the smaller size you would get on a mobile device. And this is the default typesetting of the browser, so it's 16 pixels, 1.2 line height. So we're just going to increase the size a bit because it reads well. We'll check the measure, which is, well, not great, but it's still acceptable. Letting could be a little bit better. Increase it a little bit. So, for example, this could be my first media query. So you hit save, and then you get the next one. And for the next one, I want to show the measure because it kind of sucks, but, well, it's a small screen. So now we have a little bit more screen estate, so we increase the measure a bit. And you find a nice green area here. Check the leading. It could be a little bit more. And that could be your next breakpoint. And we go to the next one. I still need to make it scroll automatically to the next one. So, and now I'm probably on a bigger screen, so I want to increase the size of my type a little bit. So I go here. But now the measure could be better, right? So I'm just increasing that a little bit. So this looks about right. Letting. Let's check the leading. Not good. Uh. Let's go with this. And so on. And you can just keep doing that until you have, like, all the sizes that you want in your responsive design. So to sum up, I believe that tools that design for you are bad, but tools that analyze your design are not. Tools that help you design and help you become a better designer are very useful. And we really need better tools to help us control typography, design, and composition. And there is so much more these tools could do for us. They could warn about the contrast of your text. They could tell you which colors are bad for colorblind people, etc. And finally, remember that they are tools, right? They help us build, but they should not dictate our designs. And it's fine to ignore them. It's fine to ignore what the computer says. And go with your gut. So thank you. That's where I'd like to end. Um. Any questions? Here, let's see. We've got a few minutes. Yeah? Okay. Do we have any questions among the audience? If not, then I have a question. Yeah. When did we get this? Um. That's a good question. Um. It's... Let me show you. I just made this one... Where's my mouse? I just made this one yesterday, so it's not online yet. But the other one is on my website. Um. Let's see. I really can't see what's going on over there. Oh. Does it say Science of Typography? I think it does. Let's try it. Nope. There's no internet connection. Well, it's at, um, bramstein.com slash science of typography. So that's where you can get the first tool. And I'll probably put the other one up there as well. All right. Yeah. Well, thank you, Bram. I have a question for you. Sure. And it's probably not easily answerable. Um. Combining fonts. That's a thing we do often. Yeah. So we got, like, headers and titles and stuff. And then we got paragraphs. Have you been working a lot with that? And if yes, I mean, is there some way to do it properly? Um. I'm really horrible at that, to be honest. Yeah, me too. Like I said, I'm a developer, so I just tell, I just do what Tim tells me to do. Yeah, right. Um. But usually what I do is I go to, um, like a type foundry and I pick a type designed from the same super family. Like sometimes you have a serif or a sans serif that are matched. Yeah. And I just go with that and then I combine them that way. All right. Well, thank you, Bram. Yeah. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. And I am live. That was interesting. Um, I don't know, a lot of us, uh, struggle. I don't know if we struggle, but we spend a lot of time choosing fonts and working with that, so that was quite insightful. The next speaker is a designer all the way from New Zealand. Her name is Femke van Schoonhoven, and she is going to be on in just a few moments, and I'm going to help her put on her microport. So I'll be right back.