Day 4: Bootstrap 4 Typography Tutorial and Examples

Welcome to the 4th day of learning Bootstrap 😌 Today we will learn about the Bootstrap 4 typography. It is important to understand and use the typography options well. They will give you the possibility to present the information on your page the best way possible. Typography is one of the most important elements of a design and done properly it will capture the user’s attention, establish information hierarchy and create harmony in the page.

The article will be divided into the following parts:

bootstrap-4-typography-info

Photo credit to aliyarmikayilov for his shot.

Bootstrap 4 Typography

Bootstrap 4’s default font-size is 16px – this is defined for the <html>tag. The <body>tag has its font-sizeset to 1rem. “Rem” stands for “root em”. It is an unit of measurement that is relative to the root <html>element. That means that all elements in Bootstrap 4 have their font size defined as a percentage of the <html>font size, which is 16px. So, if you would want an element to have 20px, you would specify 20px/16px = 1.25rem.

All headings and paragraphs have their margin-top removed. Headings have a margin-bottom of 0.5rem and paragraphs have 1rem as margin-bottom.

Bootstrap 4 Font Stack

Bootstrap 4 is using a “native font stack” to define the font-family. That means that it specifies the font family used for every device and OS.

  • -apple-system targets San Francisco in Safari on Mac OS X and iOS; it doesn’t specifically mention San Francisco because it is not obviously accessible, but is more of a “hidden font” on Mac and iOS;
  • BlinkMacSystemFont is the equivalent of San Francisco on Chrome;
  • Segoe UI is used for Windows and Windows Phone;
  • Robototargets Android and Chrome OS;
  • Helvetica Neue is for versions of the Max OS older than El Capitan;
  • Arial and sans-serif are the default sans-serif fallback font;
  • the emoji fonts are dropped as last.

Bootstrap 4 Text Utilities

Bootstrap 4 has classes for basic utilities such a alignment, colouring, transforming and styling. You can use classes to make your text align to the right, for example, instead of adding a class to your text element and writing the text-align: right;in your CSS file. These classes are useful as they take away duplicate code.

Text Align

There are three options for text-alignment: .text-left,.text-rightand .text-center. Left alignment is the default one. You can also specify that the text goes end-to-end with .text-justify. Here are examples for each one:

dark


Text Colouring

The classes for colours are defined as .text-[context]. This procedure is common for all Bootstrap 4 components. The contexts are primary for blue, secondary for black , success for green , danger for red, warning for yellow, info for light-blue. So, for colouring the text red you would use the class .text-danger. In the next days we will see how colouring buttons is the same (.btn-danger) or alerts (.alert-danger) or rows in tables (.table-danger) or others.

Here is an example to illustrate how the default colour classes look in Bootstrap 4. The classes for text colouring work for links too.

dark


Text Transform

There are three options for transforming text: lowercase, uppercase and capitalized.

dark


Font Weight and Style

You can also use Bootstrap 4 classes if you want to change the font-weight of your text or make it italic:

dark


Bootstrap 4 Headers

All headings, from <h1> to <h6> are available. To get the styling for a header you can use the <h[number]> tag or .h[number] class.

dark


Display Classes

If you want to have a header with a bigger title, you can use the .display-[size] classes. These will create a bigger and larger heading style.

dark


Inline Elements

bootstrap-4-typography-inline

Photo credit to Eddy Gannfor his shot.

The common HTML 5 elements are taken into consideration for the Bootstrap 4 typography and have a special design:

  • to highlight a part of the text, use the <mark></mark> tags or .mark class;
  • to make a part of your text smaller than its parent, use the <small></small> tags or .small class;
  • to strike through the text, use the <del></del> or <s></s> tags;
  • to underline text, use the <u></u> or <ins></ins> tags;
  • to make the text bold, use the <b></b> or <strong></strong> tags or the font-weight class .font-weight-bold mentioned in utilities;
  • to make the text italic, use the <i></i> or <em></em> tags or the font-style class .font-italic class mentioned in the utilities.

Here are some example to show how each one looks:

dark


Abbreviations

The HTML 5 <abbr></abbr> tags are used for abbreviations and acronyms. When added to a piece of text it will add an underline and will change the cursor into a question mark on hover, showing the expanded version (given with the title attribute). Here is an example:

dark


Blockquotes

In order to quote a piece of text inside your file, you can use the .blockquote class on the <blockquote> tag. Inside the blockquote you can use multiple elements (headings, paragraphs). To add the source of the quote, there is a special class called .blockquote-footer. If you use the <cite> tag to specify the name of your source, it will appear as italic.

Here is an example (you can also use the utilities mentioned above).

dark


Code Blocks

You can write code inline by wrapping your code in <code></code> tags. For proper rendering, you need to escape the HTML angle brackets from the code you want to render. If you have multiple lines of code, then you need to use the <pre></pre> tags. Here are some examples:

If you want to highlight text as an input typically entered by keyboard, you can use the <kbd> tag.

dark


Icons

Bootstrap 4 doesn’t come with its own pack of icons. So, if you want to use icons in your project you will need to use an outside library. Here are a few free suggestions:

  • Font Awesome– it’s the most popular library of icons and it comes with a free and pro version;
  • Material Design Icons– this is a set of open-source icons that have been created with the material design principles in mind;
  • Feather– this is a set of beatiful icons that are lighter then the previous sets;
  • Icons 8– a set of flat icons;
  • and also worth mentioning: ByteSize Icons, Iconic, Octicons.

Font Awesome

Throughout our days of Bootstrap 4 we will use Font Awesome. I have been working with it for a couple of years and want to recommend it to you too. Of course, you can choose another font from the list and the process of using it is roughly the same (each library has a guide on how to use it).

Importing Font Awesome

The easiest way to use Font Awesome is to use their CDN. To get started, you need to place the following link between the <head></head> tags of your file.

If you are working with NPM or other package managers, please check their documentation.

Using Font Awesome

Once you have imported their library, you can start inserting icons into your project. Each icon has a class that you need to add to an <i> element to get the desired style.

Here are some examples:

dark



You can see each icon has a .fa-[object] class. To search for the class needed for a certain icons, please go here. You can modify the size of the icons with classes provided by Font Awesome. Besides .fa-xs, .fa-sm and .fa-lg you can also specify the number of rems you want the icons to have with the class .fa-[number]x. So, if you want your icon to have a font size of 2rem, you would use .fa-2x, for 3rem .fa-3x and so on.

In the examples above I have used the text colouring utilities to show how icons accept all text utilities. So, you can apply the text utilities explained before on icons too.

Further Reading

These are the basics of typography in Bootstrap 4. If you come across something and don’t know exactly how to tackle it, leave a comment below and I will try to help you. If you have more time to invest on this topic, check out the official Bootstrap documentation too:

Sharing is caring!

Cristina Conacel

Cristina is a web developer and the owner of BootstrapBay. She likes foxes, clean design, writing blog posts and creating themes that are useful to other developers.