Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:19Length:2.2 hours
  • Overview
  • Transcript

3.2 Typography and Foundation for a Flexible Layout

_s provides a fantastic base of strong CSS, but there are just a couple of things we’re going to add into the mix to facilitate the rest of our design process. In this lesson you’ll learn how to set your theme up to be built entirely in flexible, scalable units, and how to establish stylish web-font-driven typography.

3.2 Typography and Foundation for a Flexible Layout

Hi, this is Kezz. Welcome back to web parsing creation with Underscores. Now, if you've taken my responsive Web Design Revisited or my Bombproof Web Design course, then you'll know that typography and layout are inextricably linked and you'll know how important that is. An effective layout has to support reader-friendly typography, so the two things need to be crafted hand in hand. In this lesson, you will learn how to establish the typography of your theme and the necessary foundations to creating a flexible unit layout that will mesh in with it. And the first thing we're going to do is add in some custom variables. The first of these is a variable to hold the value of phi. Now, to cut a long story short, phi is a number the ancient Greeks discovered. It has a way of cropping up in things that we perceive as aesthetically pleasing. So by using this number in your designs for things like padding, line height, margins, and so on, you'll find that you can get layouts that just feel right almost automatically. These next two variables set up our ability to easily use the flexible unit rem throughout our design, and we're gonna use this in place of pixel values so in place of px as a unit. And this gonna keep our whole design flexible. And it'll keep it in sync with our site's typography and it will keep it responsive to the user's settings on browser font size. I won't go too much into why you should use rems, so we don't get too far off topic here, but if you would like to learn more about why you should use rems in responsive web design, you can take a look at the course I mentioned a moment ago, Responsive Web Design Revisited. Now, wherever we would formally have placed a px unit, we're gonna use this variable instead, and it will automatically convert our values into rem values. Let me show you how to use it. Here we've just dropped in a little bit of extra code in our custom styles file, and this code is making use of our new px variable, and our new phi variable. If you take a look at the code we've added inside our blockquote style, you'll see we've set font size is 20 times our px variable. Now, in the past you might have just written 20 px, and instead we're just adding our little multiplication symbol, and the dollar sign in between the 20 and the px. Now, the way that this works is, in the code that we just added to our custom variables file, we figured out what the equivalent in rems is to one pixel. So now that we know what the rem equivalent to one pixel is, we can just multiply that value by whatever we need. So, when we want our font size to be equivalent to 20 pixels, we just multiply our pixel variable by 20 and that's what you're see in the code line here. And you can use this px variable any place that you might previously have used a px unit. So you'll just write out for example, your 20 px, and then in between the number and the px unit, you just add your multiplication symbol and your dollar sign, and then that way you can write out your code just like you used to. And all of the conversion inter-rem units will be just handled for you in the background. The other thing you're seeing in this code here is our first use of our phi variable. And in this case, we are setting the bottom and left margin of our unordered and ordered lists to be phi-ms wide. So that will be 1.618 ms. And the reason you're seeing the code here that multiplies here by 1m, is that's the easiest way in SASS to take a raw number and add a unit to it. So, that takes our 1.618 value, and adds ms onto the end of it. Okay, now let's have a look and see what happens when we compile the custom code we just added. Now, this is our theme before the custom code was added. And this is our theme after the custom code was added. So you can see the effects there in our lists on the left hand side, and in our block quotes on the right hand side. And here we have the CSS that was compiled from our custom code, and if you have a look at the block quote style, you'll see the font size there and you'll see the rem value that was automatically output for us. And then down in the margin setting on the lists, you'll see our phi value has been output as an m value. And now we're gonna add our phi value in against a couple of the pre-existing line height values in the theme. We're gonna change the value for the overall line height in the body of the thing to phi times 1m, and we're also gonna change the line height inside any pre-elements, and we'll compile that, and you'll see the change come up over on the right hand side of the screen. The next step is to set up the fonts that we want to use in our theme, and in this case, we're gonna be working with the Railway font, and we're gonna be pulling that in from Google Fonts. And the first part of this is to make that font available for use in the theme. And now because I promised that in this section there would be no touching PHP, what we're gonna do is just use a CSS import to bring in that font and make it available for the theme. This is actually a less efficient way to bring a Google font into a WordPress theme, than an approach that we'll be taking later, but the later approach will involve a little PHP. So if you don't wanna go there, then you can use this approach instead. Just bear in mind it will be a little bit slower loading on the average browser. So go ahead and drop this line of code into your custom files and mixins file at the top of your typography section. Now that line is going to make the Railway font available for you to use in your theme. So now we can change the value of this font_main variable over to Railway. Then after we specify Railway, we're also gonna drop in a font stack to act as a series of fallbacks. And this font stack is taken from cssfontstack.com. Now the font_main variable that we just changed sets the font for all of the text in this theme. So it will affect your regular text and it'll also affect your headings. Let's save that and compile it, and we should see our Railway font appear on the right. And there you go, so we have our Railway font in place, and that's all good to go. So far we have set a default line height for our text. We have set a default font family that affects our normal text and our headings. We haven't set a default text size for our regular text because that's actually good practice. So now the only thing left to do to finish rounding out our essential typography is to style our heading tags. And to make that happen, I'm gonna share with you a mixin that I created to use in pretty much all of my own web design projects. Now, with this mixin, it makes it really easy for you to just set up all the different bits and pieces that need to go into styling your heading tags. And then just output them in your styles with just a single line. Now, I'll go over this really quickly. I won't go into this too in depth, but just to give you a quick rundown of how to work with this code. Now you don't actually have to change anything other than the variables that you see at the top of this section of code. So first up, we've got the heading tag line height. Now I like that at a value of 1.313 ms, but if you wanna change that you can go ahead and change it there. With the heading tag font family, I've just duplicated our font_main variable that we just changed earlier on, giving it a value of Railway. So that will apply that same font to all of our headings. And then I've also created a variable here that will let you set the weight of each of the heading tags. Now in this section here, we've got all of the font sizes of the headings and these are listed, just separated by comments, and they're listed in the order of one through six. So the font size of heading one is 3 ems, the font size of heading two is 2.25 ems and so on, so you can set up all of your font sizes there in one variable. And then the same thing applies with the next line here. We've got to have vertical margins. So heading one will have a vertical margin of .563 ems, both top and bottom, and so on all through that line there. So you can use just these settings that are in in the code that I'm sharing with you, but if you want to change anything to do with your headings, all you need to do is just make adjustments to these five variables here. And then we have the mixin itself. Now you don't need to worry too much about understanding exactly what's going on here right now, cuz you don't want to devote too much into this being a SASS tutorial. But, the most important thing to understand about this mixin is this little section here where we say factor 1. Now, what that does is it allows you to multiply the size of the headings that are output by whatever factor you want. Now, I can pass a value of 0.9 when I'm using this mixin. And that will mean that all of my headings will come out at 90% of their default size, and this is really handy when you're going through, and your creating media queries that need to shrink the size of your headings, as you have less space to work with. Let's include this mixin into our custom styles file so you can see the effect. It's just a simple matter of adding the code @include, h tags, with an opening, closing bracket and a semicolon, and that will pull in that mixin that you just saw, and then in turn, that will output all of your required heading tag code. All right, let's save and compile. And there you go. You can see we've immediately got a really nice vertical rhythm going on with sizes and the amount of vertical space between each of our headings. And you can also see the font weights that we've applied. So, once you have that mixin available for use in your themes, whenever you want to set up your heading tags, all you need to do is just tweak those few variables and then, call that mixin, and everything will just get output for you. So, that wraps up our typography being established into the theme, as well as the foundations for our flexible unit-based layout. In the next lesson, we're gonna move onto establishing a basic overall layout for a two-column, traditional-style blog theme. And we're gonna be incorporating one of the provided layouts that comes along with Underscores. As well as that, we're gonna be working with some of the variables that we just created for our layout to set up our own unique padding, and our own unique elements to the layout that we're working on. I'll see you in the next lesson.

Back to the top