learntheweb

Menu
Sign Up
Log In

Lesson Content

Basic Text Properties in CSS

Introduction

By now, we should be comfortable with selecting different elements and classes with CSS along with understanding the syntax! Now let’s move onto some of the fun stuff: text properties in CSS! In this lesson, you will learn about the different text properties in CSS and how to use them/the different values assigned to them. 

Overview

By the end of this lesson, you should be able to:
    • Understand how to use the font-size property
    • Understand how to use the font-weight property
    • Understand text properties like:
      • letter-spacing
      • word-spacing
      • font-family
      • font-style
    • Understand how to import fonts from the internet into your website

Lesson Code

In this lesson you are going to see a lot of property and code examples. In the examples for this lesson, the HTML code is not shown (only the CSS is). If you want to code along with us (which we highly recommend), here is the code we are using for HTML:

<p class="header1"></p>
<p class="header2"></p>
<p class="header3"></p>

These are the HTML elements that we will edit throughout this lesson to demonstrate text properties. You can add any content you’d like to within the tags themselves! Let’s get started with the font-size property first!

The font-size Property

The very first property that we will look at is the font-size property. It’s a very simple property to understand, but can be very useful to change the sizes of our element’s text in CSS. Below you will see the code on the left and the output on the right!

.header1 {
  font-size: 20px;
}

.header2 {
  font-size: 40px;
}

.header3 {
  font-size: 60px;
}

As you can see, font-size sets the font to the desired size. In later lessons, you will learn about more units which you can use instead of px (pixels), but for the sake of this demonstration, we stick to using pixels. 

The font-weight Property

Along with changing the font-size, we can also change how bold we want to make something. This is done with the font-weight property which is demonstrated below:

.header1 {
  font-weight: 100;
}

.header2 {
  font-weight: 500;
}

.header3 {
  font-weight: 1000;
}

Parameters for the font-weight are a bit different than the properties we explored before. With the font-weight property, we gave the paramater as a range between 100 – 1000. 100 being the lightest and 1000 being the most “bold”.

 

Something to note is that how the text looks all depends on the font used in your css file. In some fonts, giving the font-weighta value of 500 is no different than giving it 600, but in other fonts, it can make a big change. Later in this lesson, you will learn how to use different fonts in CSS rather than the default one.

 

One last thing to note is that we don’t have to use values between 100 – 1000. We can also give a few word values like this:

.header1 {
    font-weight: normal;
}

.header2 {
    font-weight:bold;
}

.header3 {
    font-weight:bolder;
}

Additional Text Properties

font-weight and font-size are some of the main text properties you’ll find yourself using a lot, but there are a lot if other less known properties that are good to know just incase! Let’s start with letter-spacing!

Using letter-spacing

The letter-spacing property is very simple. The property allows us to set the distance between the letters in our text. Take a look at it in action:

.header1 {
  letter-spacing:3px;
}

.header2 {
  letter-spacing:8px;
}

.header3 {
  letter-spacing:15px;
}

As you can see, we are giving a different amount of letter-spacing to each of the 3 headers that we have in our HTML code. Although letter-spacing is a property you may not use a lot, it might help to make things more readable when you are using certain fonts. 

Using word-spacing

The word-spacing property is exactly how you would imagine it to be. Instead of the distance between letters, we are changing the distance between words. Take a look at it in action:

.header1 {
  word-spacing:5px;
}

.header2 {
  word-spacing:10px;
}

.header3 {
  word-spacing:20px;
}

It works almost the exact same as letter-spacing, except we are setting the space between the words in a text. This is also another property you may not use a lot, but it can definitely help when you are using custom fonts and they just seem too 

Changing Fonts in CSS

Whenever you are making a website, the very first thing that a user will most likely notice on a website when going to it is the font. Choosing a good font and making it a consistent throughout the website can play a big role in making the website look good. In the next few mini-sections we will learn:

 

    • How to change fonts in CSS
    • Using the font-family property
    • How to import custom fonts from the web

Let’s get started!

Using font-family

CSS already has around 30+ fonts built in and you can access those fonts with the font-family property. Here is how it works:

Although this looks pretty confusing at first, it’s really simple to understand. We start by declaring the font-family property, and then we are shown a variety of different fonts. Let’s go ahead and select the first font class that has 'Courier New', Courier, monospace.

Here, you can see that we have 3 fonts declared. The font that is surrounded by quotes "" is the font that is going to be used in the text, the rest of the fonts we selected serve as backup fonts incase our primary font isn’t working. 

 

In the above example, we are saying that 'Courier New' is the font that we want and our backup fonts are Courier and monospace. Now that we understand how to use the font-family command, let’s get into how to important custom fonts from the web to use in our websites!

Importing Fonts

The first step to import fonts is to find a website that has a collection of fonts. Now, there are many different websites that have a wide collection of fonts to look at, but for this lesson we will be using google fonts as it is very simple to use and has thousands of different fonts.

 

Let’s start by searching up a font using the search bar on the google fonts website. Go to the website and select a font that you want to import. For this example, we will import the font 'Inter'.

Choosing a Font

The above image shows the google fonts website. Once you have found a font that you like, click on it. You will be taken to the page of that font. Scroll down to the section where it says "STYLES", and you should see your font in a ton of different styles. Here is what your screen should look like (it will be different depending on the font).

Scroll down the styles until you find one that you like. On the right side, you should see the press (fontname) button. Press it.

Once you press the button, that font will be added to your “families” section, open your family section by pressing the “View Selected Families” button on the top right of the screen

By pressing that button, a sidebar on the right will open up showing all the families that you have selected. In the sidebar, scroll down until you find the CSS import code. Find the @import code snippet and copy it into your CSS document. 

We are almost done! Now that we have imported in the font, we need to declare the font. We can do this with our knowledge of the font-family command in the previous section. We also have one last bit to copy from google fonts. Under the style that we copied before, we need to copy the declaration as well. Here is how to do it:

Now we are all done! You can use any of the selectors you learned in the last lesson and select that element to have the custom font that you imported!

 

That was all for this lesson, in the next lesson, we will dive a bit deeper and explore more properties like color and background-color of elements. Something to note is that the properties mentioned in this lesson might be less used, but they are good to know in the event that you need to use it. 

Practice

Although the text properties that we learned in this lesson are quite easy to understand, it’s always good to do some practice!

  1. Start by setting up your index.htmland style.css file. Make sure to link your CSS to your HTML or else your CSS won’t work. Also open up a live server so you can see your changes.

    1. Start by creating a <p> tag with some class name. Select it in your CSS file.
      1. Set the font size to 20 pixels
      2. Set the font weight to 800
      3. Set the word spacing to 15 pixels
      4. Set the letter spacing to 10 pixels
      5. Now import a custom font from google fonts style the imported font on your paragraph tag

    2. Start by creating a div tag with some class name. Select it in your CSS file
        1. Set the font size to 22 pixels
        2. Set the font weight to bold
        3. Set the word spacing to 20 pixels
        4. Set the letter spacing to 5 pixels
        5. Now import a custom font from google fonts and make your div tag your imported font

Now, that was just a little bit of practice using the new text properties we learned. As you write more CSS, these properties and their values will start to become a sort of second nature! In the next lesson, we’ll dive into some more cool properties!

Find an issue/typo/error with our content? Please report it here

Last Lesson
Course Page
Next Lesson