We’re going to start off with the font family because that’s essentially what we’ve talked about, right? We have a font family which is the name of the font, so for example Georgia, Times New Roman and Serif. That font stack is the font family and so you’ll often see this right here, font-family usually it should have Georgia in front of it and then Times New Roman and Times and Serif.
What Double Quotes Indicate
Last time I taught this I didn’t realize the actual reason why there are double quotes around these. If the font name has spaces in it then it should be surrounded with quotation marks like this because without spaces it just considers it to be another style.
Then next up you have font size and there are a number of ways in which you can set font size. Let’s take a look at the font size section here. There are a bunch of different values here. The typical font size is medium and that’s the default but you can change font sizes to large, small or extra small or smaller or larger.
You can set those things but what you’re going to see most often is font sizes specified in units. So font size is 16 pixels or font size is 1em. Where are the units? CSS Units. All of these units are reasonably units to use.
For example, a percentage sets the font size to a percentage of the parent. Say if it’s in a div that has a font size of 16 pixels, if you put a paragraph in there and you want to identify a percentage of that you can specify 50% and then the font will go down to 8 pixels. So you can use percentages.
Genesis Uses ems by Default
You can use inches but it’s absurd. You wouldn’t use inches, centimeters or millimeters actually. Something that’s very common is to use ems. And in fact, Genesis uses ems by default in its system.
An em is similar to percentages and that it is a percent of the parent font size and so if you’re going to use em, generally what they do is in the body, which is the absolute parent of an element, they’ll declare a font size and from that point on 1em will equal that font size.
Now, as a practical matter if you don’t specify a font size in the body then 1em is 16 for all browsers. So 16 pixels represents 1em as a typical thing if the font size is not already specified inside the body but if the body says font size 10px and then later on you use 1em then 1em represents 10px.
The problem with ems is that they can grow. So if you say something is 1.5em, say a paragraph or say a div, you’ve given a div a class that has a 1.5em font size. If you come back inside that div and give a paragraph a 1em, that’s going to continue to be equal to 1.5ems because now this 1em is relative to its parent.
So if you wanted the font to be a little bit smaller and you use 1em that’s not going to work. Now you’re going to have to say .8em or .75em in order to make that font smaller. If you make it 2em it’s actually going to result in two times of the parent size which would under ordinary circumstances then be 3em.
So it can be a little bit confusing and it’s primarily used by professional web designers who really know their way around these different percentages. I’ve seen new folks really get confused by why is 1em this size in this case and it’s another size in another case. Plus the whole relationship of em to its parent is kind of a difficult concept sometimes to wrap your mind around.
Percentages, EX, Points and Picas
And in that regard it’s very much like the percentage. Percentage is also again, a percentage of the parent’s font size. Ex is something that you generally not going to use. Points and picas are also things that have been used in the past but really doesn’t make much sense in this case.
Use of Pixels
Px is what you’re going to see most often although like I said in Genesis, ems are being used as the default. But px is essentially an absolute measurement, it’s the number of pixels on your computer screen and px is really the easiest thing for beginners to use.
If you specify something as 16px it doesn’t matter what anything else around it was specified, it’s going to be 16px. So it’s not a relative measurement, it’s an absolute measurement. And I use px more often than not, I don’t use ems myself very often.
It used to be more important to use ems because they were originally designed for accessibility reasons so that fonts scaled nicely when somebody increased the scale in their browser. But now all modern browsers will scale pixels as well as ems the same way so it has lost its reason for existence in that regard.
A Font Size Example – Increase the Size of Widget Titles
Anyway, those are units. So now what I want to do is give you an example. I’m working here in this same Child Theme that we worked in last time, this Executive Pro Child Theme. What I’m going to do is increase the font size of these widget titles.
Figure out the Selector Styling Title
So the first thing I’m going to do is find out what selector is actually styling the widget title. I’ll just inspect the element and I can see it’s an h4 widget-title. If we come over here and look at this, you can see that .widget-title is set with the font size at 1.6rem; rem is essentially the same thing as em.
So if we want to change, in this case increase that size, this is the selector that we’ll use. So we’re going to use that selector and I’m going to come on over to the dashboard and use the tool that I introduced last time which is the BYOB Genesis Child Theme Editor. This tool essentially provides us with this Custom CSS Editor. Click here to watch videos using the BYOB Genesis Child Theme Editor.
I’ve commented out the code that we used in the last lesson and I’m just going to work up here at the top above it. So that class was .widget-title and we’ll come back over here and say .widget-title. Then font-size:24px. Save our custom CSS, come back over here and refresh that.
What Adding in the Body Class Can Do
Now, if we wanted this to only exist on this front page, we’d use the body class. Let’s come over here to other widget areas. We’ve increased these widget titles and we’ve increased these titles down here. So if we only want it to reflect these widget titles, we need to find a parent wrapper to use for that.
We could use home-top for those widget titles and then home-middle for these widget titles. In that case, .home-top space and now if we save that custom CSS, of course, it’s only going to affect the one so these widget titles are still small and these widget titles are large.
Stringing Two Selectors Together
So if we want it to apply to both cases, we’re going to need to come down here and grab that home-middle as well. We’re going to string two selectors in the same rule with a comma there and then instead of home-top we’ll say home-middle. Save that custom CSS and now we’ve got a font weight that applies here but not to the rest of the widget titles, right?
So that’s how that works using more specific selector that is home-top and home-middle with widget title changes only those widget titles.
Font Weight Values
Next up we have font weight and font weight again comes in a variety of potential values. You are probably most familiar with font weight bold. Font weight normal is the normal font weight and if you’ve got a bold font and you want to take it back to normal then you would use the normal value but if you want it to be bold you’d use font weight bold and that will make it bolder and lighter will make it lighter.
A more specific way of doing it is to use this weights 100 through 900, especially in the case of custom fonts that you may use that have different custom weights. So let’s say you’ve installed Open Sans and Open Sans has a 100, a 400 and a 700 version.
If you have installed all three of those fonts then you can just say font weight 100 and it’ll make it the lighter, right? Lighter is 100, heavy is 900, 400 is the same thing as normal and 700 is the same thing as bold.
Practically you’re probably going to most often say font weight bold but there are going to be times when you will want to use these other values as well and they’re all appropriate.
Finally, I want to talk about font variant. Font variant has really only 2 values. The first one is normal. Font variant normal means it’s just a normal font style and the other is small caps. And small caps renders everything in capital letters but every place there’s an actual capital letter, it uses a large capital letter instead. Sometimes you’ll see this where you’re using small caps. In this font I don’t think it looks very good but normal would look like this, right? And small looks like that.
Next we’ll be talking about CSS2 text properties.