 My name is Dmitri. I'm a web designer and developer. I make a living creating custom themes and plugins for my clients. I also recently released a public theme that is called Maker, which is a very basic portfolio theme that you can now download from official theme repository. I was really amazed how the community reacted on it. I'm still getting those emails that people like it and stuff. So this is exciting. And today I'd like to talk to you about really basic typography rules that will help you make better typography decisions if you're just starting designing and creating themes. So let's get started. Rule number one, a length or column width or measure, which is basically the same thing, should be somewhere around 45 to 75 characters per line, including spaces and punctuation marks. But as with any rule, there are some exceptions. So narrow columns from like 35 to 55 characters per line can be also good. Think a homepage of a news website like New York Times, for example. You see that all columns here are reasonably narrow and it looks really good. Wider columns up to 90 characters per line can also work for continuous reading. And the inner page of the same website illustrates it. So the column width is set to 85 characters per line here and it still looks good and it's easy to read this text. So rule number two, use flush left text alignment or I could also put it like don't use justify text alignment. Yeah, you know that. Well, why is that? Why can't we use justify text alignment like in books and magazines? Simply because we don't have tools for that just yet. Let me explain it. Software like InDesign that we use for creating printed media can not only add hypenation to the text, but also adjust word and letter spacing to balance the spaces between words when we justify text. And in CSS, we have just hypenation and it still doesn't work in all browsers yet on all devices. So yeah, this paragraph was justified in InDesign and this is how it would look like if it was justified in just CSS. So you see that the spaces are too big and now we have two hypenations instead of one. So you see there's one here and two here and it really doesn't look that good and professional. So the best thing to do is to set text alignment property to left and enable hypenation. So the right edge of the paragraph won't look too ragged and we won't have rivers of white between words. Okay, rule number three, line height. You should set appropriate line height. It's really important. It can literally make or break your design. It defines the amount of space that goes above and below the single line of text and it's a good practice to set line height in scalable units like M's or even with just numeric values without units at all. So and as a rule of thumb, the best line height for a body text should be set to somewhere around 1.5 and for headings to 1.2. Of course, these values are approximate and can differ for different typefaces, but they really should stay in that range. This is an example of a poorly set line height. It's set to 1.1 or something like that here. You see that lines are too close to each other and here it's set to 2.5. It's also not really good. In both cases, it's not comfortable to read this text. And this is the example of a perfectly set line height. It's 1.5 with Helvetica and stuff. Okay. As we've covered line height, we can now go to the next rule, which is follow the vertical rhythm. If you hear this term for the first time, it may sound a little confusing because what kind of rhythm is that and why it's simple. But it really is very simple. Simply speaking, this means that all elements on the page, the height of all elements on the page, the top and bottom margins should relate to the line height of a body text in some meaningful way. So let me illustrate it with this example. We have two paragraphs here and the subheading between them. So let's draw a grid where the distance between each line will be equal to the line height of a body text. We can see now that the bottom margin of the first paragraph and the bottom margin of the subheading is equal to the line height of a body text. And we can double that margin or we can even split it asymmetrically. But the main thing here is to make sure that the text goes back to the grid after that margin. Simple as that. And you can apply this principle to almost any element on the page. Okay. If you ever design something, you have probably asked yourself a question at what sizes should I set my type? Well, modular scale can make this decision easier. You have all probably heard of golden ratio, which can be found in architecture, in proportions of human body, in proportions of plants and many other things. So we can simply take values from this scale with the base of 16 and apply them to our CSS, to the sizes of our headings and other elements like this. But it may work, but it looks too extreme, right? Nobody said. Probably the H1 is too big and we don't set, yeah. And we don't set the font sizes in pixels nowadays, we use M's or REM's. So in this case, we, yeah, it's too big, right? In this case, we should probably combine scales. We can use multiple scales for one CSS file. And tools like modularscale.com can help us do that automatically. So we choose two, three, or as many scales as you like, it's probably should be two. Choose a base for scale and it will give you values that you can put your CSS that looks more meaningful, that look more meaningful. All right, rule number six, choose typefaces wisely. I mean, this question choosing the typeface is very complex and I bet someone could dedicate a whole talk to it. But I can still point, outline some important things that could at least point you in the right direction when you choose a typeface for a theme. And the first is you should choose a readable typeface for a theme. And for a body text, you don't want to put any fancy typeface like lobster as a body text, obviously. You also need to choose a good complementary typeface for the body text. It may be, like I said, a typeface or it can be a different font family or it may be a different weight of the same typeface. But they should really work together well. Another thing to consider is the weight, the size of the font file in kilobytes because we all like fast loading websites. And you want to make sure that you don't load unnecessary weights and unnecessary language subsets. And speaking about subsets, if you're designing a public theme, you should probably consider choosing a typeface that supports different languages like Russian or Chinese or any other language. So this is it about typefaces and we are now at rule number seven, which in my opinion is the most important and it goes like this. Break the rules. Yeah, break the rules when you think it's appropriate, when you think it benefits the design. Because only by breaking rules we can create something new, something that was never created before. But we all know that to break rules we must first know them. So learn typography, break rules and create beautiful themes. Thank you.