Mockupless

Text

Understanding the basics of web typography is essential for rapid prototyping. Being able to control font sizes, weights and colors can help you create well-balanced layouts without spending too much time on details.

There’s a mind-blowing amount of ways to control the look and the behavior of text with HTML and CSS. This article introduces you to the very core properties of type: family, size, weight, alignment and color.

font-family

With the font-family property you can specify the font for a container:

<div style="font-family: Helvetica, Arial, sans-serif;">
  Some sans-serif text.
</div>
<div>
  A container with no font-family specified. The default serif is applied.
</div>

You can list multiple fonts separated by commas to give a browser the alternatives if it fails to load the first one on your list. In the example above, Helvetica will be applied to the first container by default. If Helvetica is not installed on the operating system of a user, which is common for Windows PCs, Arial will be applied. If Arial is absent too, the system's default sans-serif font will be applied.

It is common to put one of the three generic font families—serif, sans-serif or monospace—in the end of your list. This way, when all the fonts you specified fail to load, a system’s default font family is applied.

When you apply the font-family property to a container, its children inherit the value of the property by default. If a child has its own font-family specified, it overwrites the parent’s value:

<div style="font-family: 'Courier New', Courier, monospace">
  <div>Some monospaced text.</div>
  <div>Also monospaced.</div>
  <div style="font-family: Helvetica, Arial, sans-serif;">Some sans-serif here.</div>
</div>

Note that a font name must be enclosed in single quotes if it consists of two or more words, like this: 'Courier New'.

When prototyping, you are not limited to the fonts that are built into the operating systems. In the Frameworks and libraries section of this course you will learn to use fonts from a nice collection of typefaces in the Google Fonts library.

font-size

The font-size property allows you to set the size of the text inside a container:

<div style="font-size: 32px;">
  Title of the page
</div>
<div style="font-size: 16px;">
  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aut, deleniti!
</div>

Using pixels for font sizes is perfectly fine for prototyping. However, you should know that most design systems and frameworks have text sizes defined in em or rem. These units allow you to specify font sizes relatively to a default value. For example, if 1rem is 16px by default, and you set the font size of a container to be 1.5rem it will render to 24px.

 


 



<div style="font-size: 1rem;">
  This text is rendered to 16px (16px * 1)
</div>
<div style="font-size: 1.5rem;">
  This text is rendered to 24px (16px * 1.5)
</div>

This allows you to change the size of all fonts throughout the project by changing only one, default, value.

font-weight

The font-weight property allows you to use different weight variations of a font:



 



 


 




<div style="font-family: Helvetica, Arial, sans-serif;">
  <div style="font-size: 32px;
              font-weight: 300;">
    Title of the page
  </div>
  <div style="font-size: 13px;
              font-weight: bold;">
    Today, 9:15am
  </div>
  <div style="font-weight: 500">
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aut, deleniti!
  </div>
</div>

You can specify font weight in 2 ways: with the numeric values, or with the named ones:

  • Numeric values are: 100, 200, 300, 400, 500, 600, 700, 800, 900, where 100 is the lightest and 900 is the boldest.
  • Named values include normal and bold.

Note that most fonts don’t have all 9 weight variations. If you set font weight to 300, for example, and the font you are using doesn’t have this variation, a browser will replace it with another weight variation using Fallback weights system.

The font-weight property gets inherited by the children of a container:

<div style="font-weight: 900;">
  <div>This text is the boldest</div>
  <div>
    <div>This one is bold too</div>
    <div>So is this one</div>
  </div>
</div>

text-align

text-align allows you to specify the horizontal alignment of the text inside a container. The options are: left, center, right:

<div style="text-align: left;">
  One to the left
</div>
<div style="text-align: center;">
  One in the middle
</div>
<div style="text-align: right;">
  And one to the right
</div>

Notice that this property—unlike family, size and weight—starts with text-, not font-. There seems to be a justification for having different prefixes for different font properties, but in reality you should remember the full names of the properties, and not the justification, to prototype effectively.

color

The color property allows you to specify the color of the text inside a container:



 



 






<div style="font-size: 32px;
            font-weight: 300;
            color: firebrick;">
  Title of the page
</div>
<div style="font-size: 13px;
            color: dimgray">
  Today, 9:15am
</div>
<div>
  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aut, deleniti!
</div>

This property surprisingly doesn’t have neither font- nor text- prefix, so this is another name you just need to memorize.

As discussed in the Color article, you can define the color in different ways: using named values, hex, RGB or HSL values.

Practice

Add text styles to an article design:

  1. Fork the starting prototype. It includes the required content and some necessary styles.
  2. Change the font family of the title, the subtitle and the intro paragraph to sans-serif.
  3. Change the size of the title to 30px, the intro paragraph to 19px and the body of the article to 18px.
  4. Make the title bold.
  5. Change the color of the subtitle to #718096.
  6. Align the title and the subtitle to the center.

← Background →