Taught by Tina May
In this lesson, we’re going to be exploring some of the most common properties for styling typography. At this stage, you only know how to style all elements of one type together (all the paragraphs or all the anchor links) but as we get more advanced we’ll be able to target just one specific element or a set of elements. So don’t worry about that just yet and focus on all the exciting properties you are learning right now.
The most common measurement for the font-size is px, but the best practice is to use rem which is a relative measure that corresponds to the font-size of our HTML element. It only takes one change to proportionately increase or decrease all of your text elements - paragraphs, headings, lists, and so on. This makes it easy for you to scale at different device sizes or for people to increase their font size for accessibility.
p {
font-size: 1rem;
}
The color property changes the color of the text. Colors can be set using the following values:
blue, green, yellow, etc.#FFFFFFrgb(60,60,65)rgba(60,60,65,0.5).For example, the following CSS will set the color of all of the paragraphs to red:
p {
color: #ff0000;
}
The font-family property sets the font or the “typeface” of the text. There are 18 web-safe fonts that have been loaded into every modern browser so that they are available for any website instantly, and you can use these right in the CSS without any other setup. These include ‘Arial’, ‘Verdana’, ‘Georgia’ and ‘Courier New’.
You can apply the font-family to your whole page by targetting the body element, or to specific elements.
/* Set the default font to Verdana */
body {
font-family: "Verdana";
}
/* Set the h1 font specifically to Georgia */
h1 {
font-family: "Georgia";
}
It’s a good practice that you specify a ‘fall-back’ font for the browser to use in case the font doesn’t load. Options include serif, sans-serif, monospace, script, and fantasy.
This example below would set the font of the h1 heading to Helvetica. Now, Helvetica comes by default with every Mac device, but not Windows. If a user tries to open your webpage from a Windows device, it won’t load, so the default sans serif font as specified by the browser will be used.
h1 {
font-family: "Roboto", sans-serif;
}
The font-weight property sets the thickness of the font. Depending on your font, the options available may just be normal and bold, or you may have up to a dozen variations (for example 100, 200, 300, 400, 500, 600, 700, 800, 900). The higher the number, the thicker the font.
Tip: Normal font-weight is specified with a value of 400, while bold is 700.
The example below sets all paragraphs to bold.
p {
font-weight: bold;
}
The text-align property sets the way that the text flows on the page. The values that we can choose are left, right, center and justify.
The following example will align the h1 heading to the center.
h1 {
text-align: center;
}
Quick tip: text-align will only work as expected on elements with display: block (headings, & paragraphs), you can’t use it to center buttons. To center a link, the easiest way is to apply text-align: center to it’s parent element, like a nav or the body.
The text-decoration property determines any ‘decorations’ on the text. There are 4 options: underline, overline, linethrough (strikethrough), and none.
You will notice that anchor links are underlined by default in the browser, so if you want to remove the underline you would need to set text-decoration: none;
The following example removes the underline from all links and instead makes them bold.
a {
text-decoration: none;
font-weight: bold;
}
You can add a border on all sides by just setting the border property, or you can apply it to specific sides with border-left, border-right, border-top or border-bottom.
You might have noticed on the web that some sites have links where the ‘underline’ is further away from the text or styled differently to a standard underline - they would have achieved that by removing the underline and instead of adding a border. Note if you want to add vertical padding or margin to your links, you’ll need to set them to display: inline-block;
a {
text-decoration: none;
border-bottom: 1px solid;
padding-bottom: 0.25em;
display: inline-block;
}
The text-transform property allows you to change the capitalization of elements with 4 options:
none - the text renders as it is (default if text-transform is not specified)capitalize - transforms the first character of each word to uppercaseuppercase - transforms all characters to uppercaselowercase - transforms all characters to lowercase
This might seem pointless if you’re just at the beginning of your project but will save tons of time when it has grown. Let’s say you have a client with a 100-page website and you were asked in the initial brief to make every single heading uppercase. Then 2 months later, they hired a new designer who convinced them to change all headings into standard capitalization and asked you to do it. If you do this manually it would’ve been a pain, but with the text-transform, it’s easy to do that in one click.
The best practice is to always keep your capitalization standardized and grammatically correct in the HTML and do any stylization in CSS.
The letter-spacing property allows you to change the gap between each character. This is often done with px because you only want a small space in between letters.
This property works not by overriding the existing letter-spacing in the font, but by adding and subtracting. When you define the value in the positive, let’s say 2px, it will add that much gap between each character. On the opposite, if you put a value of -2px; it will reduce that much gap between each character.
The following example is often used to make paragraphs easier to read with certain fonts with tighter spaces:
p {
letter-spacing: 2px;
}
If you want to know more about the best practices in how to adjust your letter spacing that is easy to read, click here.
The word-spacing works in essentially the same way as letter-spacing, but applies between each word. This is can be helpful if you’re trying to make your website more accessible to people with visual impairments or dyslexia.
p {
word-spacing: 0.16em;
}
The line-height property allows you to change the gap between rows of text. A line-height: 1; is equal to the element’s font size. So if the paragraph element has a font-size: 20px; and a line-height: 2; the browser will determine that the line height is equal to 40px. If no line-height value is specified or inherited, it will revert back to default, which is about 20% larger than the font size.
For blocks of text, I don’t generally recommend setting your line-height to less than 1, but sometimes it can give a nice effect if you want to create a stylish heading.
p {
font-size: 1rem;
line-height: 2;
}
We use margin-bottom if we want to create space not between every line of text but between each separate paragraph.
Technically we can use either em and rem to set the value of our margin-bottom and other properties that are defined by measurement units. But em is a bit tricky because of its relation to element hierarchy. The em value comes from multiplying the font size of its element (let’s say, <p>) with any font size that might exist from its parents, let’s say, a <div>.
For example, if we set the font size of the paragraph element to 1.2em, the div element to 1.5em, and the HTML element still has a default font size of 16px, then 1em of margin-bottom will equal to 1.2 x 1.5 x 16 = 28.8px. But if the paragraph element doesn’t have a parent, 1em of margin-bottom will equal 1.2 x 16 = 19.2px. This makes it confusing and hard to keep up with.
The best practice is to stick with rem, since the value is only multiplied by the font size defined in the HTML document. For example, if the HTML element has a font size of 16px, then 1rem will be 16px, 1.5rem will be 24px, and so on - these values will be consistent across your site regardless of the hierarchy, which is easier to understand.
p {
margin-bottom: 1rem;
}
We shouldn’t duplicate our styles on every element if we want them to apply almost everywhere. We can apply styling to the <body> element (the whole page) and that will affect everything below it. This saves us time, keeps our code clean, and makes it easier to override styles later on.
body {
color: #333;
font-family: "Nanum Gothic", sans-serif;
}
Each of these examples uses only the skills you’ve been taught above, with free fonts from google fonts. Try them for yourself and then play around to make it yours.
1. Try it for yourself, and if you get stuck - view the codepen
/*
font-family: 'Oswald', sans-serif;
font-family: 'Lora', serif;
background-color: #f3d7cf;
color: #C36B5d;
*/
2. Try it for yourself, and if you get stuck - view the codepen
/*
font-family: 'Jost', sans-serif;
font-family: 'Oranienbaum', serif;
background-color: #1c1f24;
color: #fbf1e7;
*/
3. Try it for yourself, and if you get stuck - view the codepen
/*
font-family: 'Forum', cursive;
font-family: 'Work Sans', sans-serif;
background-color: #fefaf1;
color: #0b2566;
*/
Test out your skills trying to follow each of the prompts below, and then when you're feeling confident try some of the practical challenges above!