Day 4: Bootstrap 4 Typography Tutorial and Examples

Day 3: Bootstrap 4 Flex
Day 5: Bootstrap 4 Images

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
- Bootstrap 4 Font Stack
Bootstrap 4 Text Utilities
Bootstrap 4 Headers
- Display Classes
Inline Elements
Abbreviations
Blockquotes
Code Blocks
Icons
- Font Awesome
Further Reading

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.

$font-family-sans-serif:
  // Safari for OS X and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for OS X (San Francisco)
  BlinkMacSystemFont,
  // Windows
  "Segoe UI",
  // Android
  "Roboto",
  // Basic web fallback
  "Helvetica Neue", Arial, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

-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:

<p class="text-left">Trying to define yourself is like trying to bite your own teeth.</p>
<p class="text-center">Always do right. This will gratify some people and astonish the rest.</p>
<p class="text-right">When the cup is full, carry it level.</p>
<p class="text-justify">The brain is a wonderful organ; it starts working the moment you get up
in the morning, and does not stop until you get to work.</p>

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.

<p class="text-primary">It takes a special kind of courage to face what we all have to face. </p>
<p class="text-secondary">There is never time to do it right, but always time to do it over. </p>
<p class="text-success">Integrity has no need for rules.</p>
<p class="text-danger">Our policy is, when in doubt, do the right thing. </p>
<p class="text-warning">Life is too short to be taken seriously.</p>
<p><a href="#a" class="text-info">You don't have to explain something you never said.</a></p>
<p><a href="#a" class="text-muted">Wishing without work is like fishing without bait.</a></p>

Text Transform

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

<p class="text-lowercase">He who minds his own business is never unemployed.</p>
<p class="text-uppercase">If your happiness depends on what somebody else does, I guess you do have a problem.</p>
<p class="text-capitalize">I'm so miserable without you, it's almost like you're here.</p>

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:

<p class="font-weight-bold">It's not easy to play the clown when you've got to run the whole circus.</p>
<p class="font-weight-normal">Anything free is worth what you pay for it.</p>
<p class="font-weight-light">Another megabytes the dust.</p>
<p class="font-italic">Yes, but every time I try to see things your way, I get a headache. </p>

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.

<h1>To err is human, to purr feline.</h1>
<h2>To err is human, to purr feline.</h2>
<h3>To err is human, to purr feline.</h3>
<h4>To err is human, to purr feline.</h4>
<p class="h5">To err is human, to purr feline.</p>
<p class="h6">To err is human, to purr feline.</p>

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.

<h1 class="display-1">No guts, no glory.</h1>
<h1 class="display-2">No guts, no glory.</h1>
<h1 class="display-3">No guts, no glory.</h1>
<h1 class="display-4">No guts, no glory.</h1>

Inline Elements

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  tags or .mark class;
to make a part of your text smaller than its parent, use the  tags or .small class;
to strike through the text, use the <del></del> or <s></s> tags;
to underline text, use the  or <ins></ins> tags;
to make the text bold, use the  or  tags or the font-weight class .font-weight-bold mentioned in utilities;
to make the text italic, use the  or  tags or the font-style class .font-italic class mentioned in the utilities.

Here are some example to show how each one looks:

<p>This isn't right.<mark>This isn't even wrong.</mark></p>
<p><s>Patch griefs with proverbs.</s></p>
<p><u>Statistics are no substitute for judgement.</u></p>
<p><small>I'd never join any club that would have the likes of me as a member. </small></p>
<p><strong>Almost everything in life is easier to get into than out of.</strong></p>
<p><em>When all else fails, read the instructions.</em></p>

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:

<p><abbr title="Keep it simple, stupid!">K.I.S.S.</abbr></p>

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).

<blockquote class="blockquote text-center text-success">
  <p>It was a Roman who said it was sweet to die for one's country. The Greeks never said it was sweet to die for anything. They had no vital lies.</p>
  <footer class="blockquote-footer">Edith Hamilton, <cite title="The Greek Way">The Greek Way</cite></footer>
</blockquote>

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.

<p>Typography is easy with the <code>.h</code>  classes. You can also use them with the <code>&lt;p&gt;</code> tag.
</p>
<p>Here is the quicksort algorithm:
<pre>
qsort []     = []
qsort (x:xs) = qsort (filter (< x) xs) ++ [x] ++ qsort (filter (>= x) xs)
</pre>
</p>
<p>To easily get out of trouble, press <kbd>ctrl + c</kbd>.</p>

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.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

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  element to get the desired style.

Here are some examples:

<i class="fas fa-coffee fa-xs"></i>
<i class="fas fa-coffee fa-sm"></i>
<i class="fas fa-coffee"></i>
<i class="fas fa-coffee fa-lg"></i>

<i class="fas fa-heart fa-2x text-danger"></i> yourself. Beauty comes from the inside out.

The beauty of a living thing is not the <i class="fas fa-atom text-info"></i> that go into it, but the way those <i class="fas fa-atom text-info"></i>  are put together.

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.