Register to get access to free programming courses with interactive exercises

Working with fonts Content layout fundamentals

A designer's and layout designer's worst nightmare is when a client says, “play around with fonts”. Many people have heard this phrase, but what's the deal with playing around with fonts? CSS provides many rules for styling fonts. Some properties you'll already know are font-weight and font-size.

Besides thickness, CSS allows you to control the following settings:

  • Font family
  • Font style
  • Lower case character style
  • Font size
  • Line spacing

Don't be too scared of these properties, you don't have to use them all straight away. Some of them are used quite rarely.

Font family

CSS allows you to specify the fonts to be used on the site. The font-family property is used for this. It takes a list of fonts that can be uploaded to the site. It can be one font family or several at once. If multiple fonts are specified, the browser will read them from left to right until it reaches the first font it can use. Other fonts will be ignored. For example:

.font {
  font-family: Georgia, "Times New Roman";
}

If the user has the Georgia font in their system, then that font will be used. Otherwise, the browser will look for Times New Roman font. Now, two situations are possible:

  • If the user has the Times New Roman font installed in their system, then that font will be applied to the page
  • If the user doesn't have Times New Roman installed in their system, then the browser will use the font from the main settings in their browser. This is necessary to be able to display content on the page

What font will the browser choose? It all depends on the settings. The standard font may be a different type. This can break the visual part of the site. All fonts can be divided into three large groups:

  • Antiqua or serif fonts. These fonts are most often used in books and news sites. In CSS it's designated as a serif
  • Grotesque or sans serif fonts. The main font type on most websites. Right now, you are reading this type of font. In CSS, it's designated as sans-serif
  • Monospace font. Fonts in this family all have symbols of the same width. You may see this font in terminals or code editors. In CSS, it's designated as monospace

When choosing fonts, you can also specify the main font family. If none of the specified fonts can be found, the browser will pick a system font from the family that was specified. Let's add a default font family to the example. The example uses fonts from the antiqua family, so it's worth adding an appropriate value.

.font {
  font-family: Georgia, "Times New Roman", serif;
}

Always specify a default font family. This is considered good practice because not all fonts may be present on the user's system.

Installing new fonts

You don't have to rely wholly on system fonts. Projects may use all sorts of various fonts, and a layout designer should be able to add them. The font itself is a file. There can be several such file formats, and it's important to know which browsers support them.

  • .woff/.woff2 – Web Open Font Format. A common format supported by most modern browsers
  • .ttf - TrueType. This format was invented in the 1980s and is now used to support older browsers. It's compatible with modern browsers. It's the Goldilocks font format
  • .eot - Embedded OpenType. This is the oldest format. This only needs to be used in older browsers, such as Internet Explorer 6.0, which are supported by your website. This is quite rare, so it's rarely used

The @font-face rule is used to set the font. It allows you to add the font in various extensions, and define the name and path to the file. We'll use this construction with the Roboto font as an example.

Let's give our project a fonts directory with font files inside it.

project/
├── css/
│   └── style.css
├── fonts/
│   │── Roboto-Regular.ttf
│   │── Roboto-Bold.ttf
│   └── Roboto-Light.ttf

It's good practice to specify @font-face at the beginning of the CSS file, rather than just before the font is used. This allows you to structure CSS better. @font-face takes two properties:

  • font-family⁣ – the name of the font to be added. This is where you can access it after the font's been added
  • src⁣ – path to the font file

You can use the font once you've specified these properties. Add Roboto-Regular.

@font-face {
  font-family: 'Roboto Regular';
  src: url('../fonts/Roboto-Regular.ttf');
}

body {
  font-family: 'Roboto Regular', sans-serif;
}

The next step is to add the other two font styles. You can use the example above. Then our CSS will look like this:

@font-face {
  font-family: 'Roboto Regular';
  src: url('../fonts/Roboto-Regular.ttf');
}

@font-face {
  font-family: 'Roboto Bold';
  src: url('../fonts/Roboto-Bold.ttf');
}

@font-face {
  font-family: 'Roboto Light';
  src: url('../fonts/Roboto-Light.ttf');
}

body {
  font-family: 'Roboto Regular', sans-serif;
}

h1 {
  font-family: 'Roboto Bold', sans-serif;
}

h2 {
  font-family: 'Roboto Light', sans-serif;
}

Although this method works, it's a little complicated. Instead of using one font name and the font-weight property to control the font thickness, you have to specify three different names for each font style separately.

@font-face allows you to specify font thickness using font-weight. This allows you to add all the font styles using just one name. Otherwise, the entry is no different from what was in the last example.

@font-face {
  font-weight: 400; /* This corresponds to normal */
  font-family: 'Roboto';
  src: url('../fonts/Roboto-Regular.ttf');
}

@font-face {
  font-weight: 700; /* This corresponds to bold */
  font-family: 'Roboto';
  src: url('../fonts/Roboto-Bold.ttf');
}

@font-face {
  font-weight: 300;
  font-family: 'Roboto';
  src: url('../fonts/Roboto-Light.ttf');
}

body {
  font-family: 'Roboto', sans-serif;
}

h1 {
  font-weight: bold;
}

h2 {
  font-weight: 300;
}

Font style

In addition to the standard font style, CSS allows you to set another way of displaying the font - italic. Use the font-style property for this, it can take one of three values:

  • normal is the standard value. It's the standard way of displaying the font and is the style you're reading right now
  • italic This font has slanted letters, unlike the normal style. This is what italic text looks like
  • oblique is also italic. It's often exactly the same as the italic value

But why are there two similar values for italics? Actually, they're not that similar. Italic, which is set using italic, is a separate font with its own separate file in the system or on the server. It refers more to cursive text, whereas oblique artificially tilts the characters of the current font.

.italic {
  font-style: italic;
}

Lower case characters

You can use CSS to set the lowercase capital type as small caps.

Small caps are lower case letters whose size is the same as (or close to) the size of capital letters. This is often used for style. Look at this paragraph:

Small caps text

In terms of height, this phrase is no different from a simple set of lowercase characters, but stylistically they look more like capital letters. Small caps are set using the font-variant property. It has two possible values:

  • normal is the standard lowercase character style
  • small-caps gives small caps
p {
  font-variant: small-caps;
}

Line spacing

Line spacing, A.K.A. interline spacing, is the vertical distance between the bottom of one character and the top of another in neighboring lines. This is how the difference between the lines is created. One important element when creating a design is having sufficient space between lines. More often than not, it's 150% of the font-size value. For example, if the font is 16 pixels, then the line spacing should be at least 24 pixels. This value is not a required rule, and you can always diverge from it if you so wish.

The line-height property is used to specify line spacing. It can take values with various units of measurement. Typically, a number is used to indicate how much bigger the line spacing is than the font size.

p {
  font-size: 16px;
  line-height: 1.5;
}

Shorthand rule

Now you know all the main rules for working with fonts. They are as follows:

  • font-style
  • font-variant
  • font-weight
  • font-size
  • line-height
  • font-family

You can specify them not only individually, but also altogether using a single CSS rule, font. It's six different rules within one! This can be very handy if you really need all the values. You don't have to specify all values. The only limitation is that it must include font-size and font-family. The other values can be omitted. Let's specify values for all these properties inside the font rule:

p {
  font: italic small-caps bold 16px/24px Roboto, sans-serif;
}

Pay attention to where it says 16px/24px. This is how the font-size and line-height properties are denoted within the font rule.

Using one or more rules

This section applies not only to the font rule but to all the abbreviated rules you will learn in the course. On the one hand, it may seem that using one rule reduces the number of lines used in CSS. This is true, but there are two major problems with using such properties:

  1. Remembering the correct order of values. When using abbreviated properties, you should always remember the correct order of property values. It's easy to get that wrong in the early stages of learning. You could try using all the individual properties, but writing them in the order they're used in the abbreviated property. As you gain more experience, you can switch to one rule.
  2. Abbreviated properties override individual ones. If you specify font-variant: small-caps; and then apply font: 16px/24px sans-serif; to the same element, the small caps will be reset to their default value.

You should only use shorthand property once when setting standard or general page styles. For example, the font property will work fine for the body selector, and text modifications can be done using individual properties.


Hexlet Experts

Are there any more questions? Ask them in the Discussion section.

The Hexlet support team or other students will answer you.

About Hexlet learning process

For full access to the course you need a professional subscription.

A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.

Get access
130
courses
1000
exercises
2000+
hours of theory
3200
tests

Sign up

Programming courses for beginners and experienced developers. Start training for free

  • 130 courses, 2000+ hours of theory
  • 1000 practical tasks in a browser
  • 360 000 students
By sending this form, you agree to our Personal Policy and Service Conditions

Our graduates work in companies:

<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.bookmate">Bookmate</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.healthsamurai">Healthsamurai</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.dualboot">Dualboot</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.abbyy">Abbyy</span>
Suggested learning programs

From a novice to a developer. Get a job or your money back!

Frontend Developer icon
Profession
beginner
Development of front-end components for web applications
start anytime 10 months
Layout Designer icon
Profession
New Under development beginner
Layout with the latest CSS standards
start anytime 5 months

Use Hexlet to the fullest extent!

  • Ask questions about the lesson
  • Test your knowledge in quizzes
  • Practice in your browser
  • Track your progress

Sign up or sign in

By sending this form, you agree to our Personal Policy and Service Conditions

Toto Image

Ask questions if you want to discuss a theory or an exercise. Hexlet Support Team and experienced community members can help find answers and solve a problem.