Typography and Header Styles

Setup a custom font and style the headlines, then create the base header styles.

Next video loading... 5
Get Code

Transcript

In this lesson we will set up the typography styles and apply our base styles for the header.

For the first thing, we are using a custom font that is available from the free service Google Fonts and the name of our font is Kulim Park.

Google Fonts is a repository that you can search, and once you find a font that you would like to use, from the preview page you choose "Select this font" for the weight you would like to use. Then under the embed tab you can grab this link then place it above the stylesheet link in our HTML document.

It hasn't changed the type style, so you must still define that in our CSS. If you recall, the only styles we have so far are the CSS reset. So below all of those styles we will begin a section for /* Typography */.

This unique Google Font we are only going to apply to our headline elements and we only have headlines 1, 2, and 3 represented on the page. So we can create a rule that targets each of those with the property font-family to assign it to the Google Font.

h1,
h2,
h3 {
  font-family: "Kulim Park";
}

We also need to define a fallback font. As we learned in the Foundation's lesson, the type of font [we want for the fallback] is best represented as sans-serif. Defining it in this way means the user's operating system will choose the best available sans-serif font.

On save, we now have the fonts applied to our headline elements.

Next, we would like to adjust the font size. So we will create a rule and we'll use 60 pixels for the h1, 40 for the h2, and 24 for the h3.

h1 {
  font-size: 60px;
}

h2 {
  font-size: 40px;
}

h3 {
  font-size: 24px;
}

On save, we see clearly that those sizes have been adjusted.

We have one more font style represented. You may have noticed that the intro text is actually using our unique font. Another area that uses the font is this first part of the "About" section.

A common term for a type style that is not qualified as a headline but has emphasis to it, often a different font style or font size, is "lead". So we will create a new section for /* Type Utilities */ and create our .lead class.

.lead {
  font-size: 125%;
  letter-spacing: 0.03em;
}

We are choosing to define the font size as a percentage which means it will be 125% larger than the font size that it is placed within. We also use the letter-spacing property to give it a slight bit of space between each character.

Before we can see it represented on the page, we must add this .lead class. The two locations we'll add it is to the header [paragraph] as well as in main into the strong element. And on save, you can see that it has been applied.

Now that our base typography has been set up, let's focus on the base styles for the header section.

We will focus on a few additional typography properties, the background color, and alignment for the section.

Once again, let's use comments to define this section within our stylesheet to make it easier to find later.

/* Header */

Because this content is wrapped within the header element tag, we can actually use that as a selector

Be careful with doing this mehtod, as if there were other headers present on the page it would by default style all of them. If you need to be more exclusive, create a class.

The first properties we will apply are padding and text alignment to the center.

header {
  padding: 60px 0;
  text-align: center;
}

We have used the padding shorthand which means the padding has only been applied on the top and bottom of the header with 0 being applied on the left and right.

Following that, we also want to specifically update the color of the header h1. we will create a rule scoped to the header for the h1 to define that its color should be our brands pink.

header h1 {
  color: #ff7ca6;
}

We have a bit of a readability issue with the lead text here spanning the whole width, and we would like to actually limit that.

We can create a rule scoped to the header for the .lead. We can use the property max-width and the value 40ch.

header .lead {
  max-width: 40ch;
}

ch is a unique unit that is equivalent to the width of the 0 (zero) character in the font that it is applied to.

On save, we see that we have successfully limited the width, however we have lost our visual alignment. It's time to create our first utility class, which we will call "center".

As we learned in the Foundation's class, one way to horizontally center an element is by setting the left and right auto margins:

.center {
  margin-left: auto;
  margin-right: auto;
}

Returning to our .lead element, we will then apply the center class and the alignment is resolved.

The final base style we're missing from the header is the background color. For that we'll create a color utility class that we'll call background-dark and assign it a background color of our brand's navy blue.

/* Color Utilities */
.background-dark {
  background-color: #150f64;
}

Now we want to ensure the text remains legible over this color, so we will also assign the color property with a very very light grey.

.background-dark {
  /* ...background-color */
  color: #dcd9ee;
}

Then we will go back into our HTML and assign this class to the header.

And with that, our base essential styles for the header are complete!

Next Lesson