Now that you know how to select your text with CSS and set your font family, you're ready to control the size, weight, and style of your text. Let's start with font size!
I'm going to use p as my selector in the examples that follow, but you'll need to use the appropriate selector for the element you'd like to style.
Font Size
With the font-size declaration, you get to control the size of your text. There are three common size units used for font sizing.
Pixels
You can specify a font size in pixels, like this:
p { font-size: 16px; }
Overall, pixels are the easiest to use. If your blog is a "traditional" fixed-width site that doesn't change size or layout for different-sized screens and devices, pixel sizing works great. Your blog's font sizes will look just about exactly the same as they'd look in Photoshop.
But, if you're designing an adaptive or responsive blog, you'll need to learn to use ems or percentages instead.
Em
You can specify a font size in em units, like this:
p { font-size: 1em; }
Em values are a bit trickier to use than pixels, but they're more flexible for the reader because they can scale dynamically for different browser sizes and devices. An em value is based on the font size of the parent element, or, if there's no font size specified for the parent element, it's based on the browser default size — usually about 16px.
An em is a multiplier, so if your default font size is 16 pixels, 1em is equal to about 16px, while 1.3em is about 21px. You can convert pixels to ems (and convert in reverse, too) automatically at http://pxtoem.com
Percentage
You can specify a font size in percentage units, like this:
p { font-size: 80%; }
Percentages are similar to ems, but instead of acting as a multiplier, they increase or decrease font size by percentage. You can also use pxtoem.com to convert pixels & ems to percentage values.
In addition to these three options, you can also use the absolute size keywords: xx-small, x-small, small, medium, large, x-large, xx-large. These sizes are based on your reader's browser default size — usually "medium".
Font Weight
There are several font weight options. The first is "normal", the default font weight. It's rare that you'd ever need to specify normal.
Bold
You can set your font weight to bold like this:
p { font-weight: bold; }
Setting your font to bold "darkens" the text, making it appear thicker and heavier. If there is a bold version of your font available, the browser will use that. Most "web safe" fonts have a bold version. If you're adding a web font, make sure to include a bold version of your chosen font with your font bundle for best results.
If there is no bold version of your font available and you set your font style to bold, the browser will try to simulate a bold version. Sometimes this doesn't look so great — see Say No to Faux Bold at A List Apart for more on simulated bold.
100 through 900
You can set a numeric font weight like this:
p { font-weight: 500; }
Some fonts offer a broad range of weights, and each of those weights is assigned a numeric font weight of 100, 200, 300, 400, 500, 600, 700, 800, or 900. Before using numeric weights, check out a type specimen of your chosen font to see what the different weights look like.
Lighter & Bolder
You can set a lighter or bolder font weight like this:
p { font-weight: lighter; }
The "lighter" and "bolder" font weights are less common, and are usually used in conjunction with numeric font weights. If you choose one of these font weights, your text will appear one font weight lighter or darker than the font weight of its parent element.
For example, if you give all of the links in your paragraphs a font weight of "bolder", each link will be one weight bolder than the text in the surrounding paragraph.
Font Style
There are three font styles: normal, italic, and oblique. Normal is the default font style. It's the standard font without any adjustments. It's rare that you'd need to specify normal.
Italic
You can set an italic font style like this:
p { font-style: italic; }
When you set font-style to italic, the browser will use the italic version of your font if it's available. If there is no italic version of your font, the browser will skew the text slightly to simulate an italicized look.
If you add a web font to your blog, it's best to include the italic version of the font with your font "bundle" so that italic text is truly italicized. The italic version of a font has its own special character, and is so much nicer to look at than text that's simply skewed. In the example image below, the top text is Noto Serif normal, and the bottom text is Noto Serif Italic. Notice the differences?
Oblique
You can set an oblique font style like this:
p { font-style: oblique; }
This is rarely used, but I'm including it so you know what it is if you ever see it! Font-style: oblique; skews text slightly (usually about 10 degrees). If there's an italic version of your font available, some browsers will try to use the italic version instead of skewing the text, but that's unpredictable, so font-style: oblique; doesn't get a lot of use.
Font Variant
There's only one font variant: small caps. You can write a small caps variant declaration like this:
p { font-variant: small-caps; }
"Small caps" is an abbreviation of "small capitals", and basically it's when all of the letters in a word look like capital letters, except that the lowercase letters are smaller than the initial capital.
This looks best with fonts that have a small caps version. If there is no small caps version of your font available, the browser will simulate small caps by using scaled-down capital letters for lowercase letters. The differences between real and "faux" small caps are subtle, but true typophiles will notice!
Try It Out!
I've put together a simple Codepen demo for you to play with. This demo includes four HTML elements: a heading, a subheading, and two paragraphs. Each element asks you to do something to it with CSS.
If you'd like to share your experiment, "Fork" my Codepen to create your own and share the link in the comments below.
Want to get started? Click the "Edit on Codepen" link in the demo below or click here to open the Codepen editor in a new window/tab.
<h3>Make me italic!</h3>
<h4>Change my size!</h4>
<p class='bold'>Make me bold!</p>
<p class='small-caps'>Make me small caps, please.</p>
Check out this Pen!What's Next?
In part four you'll learn how to use spacing, alignment, indentation, and line height to further customize the look of your text. Move on to Blog Font Style with CSS - Spacing, Alignment, and Line Height.
