What Are the Bootstrap 4 Text Font Sizes and How Do You Change Them?

What Are the Bootstrap 4 Text Font Sizes and How Do You Change Them?

Bootstrap’s font sizes are calculated off of the body font size by using rem values. If you change the body font size all styles will be increased/decreased automatically. Rem stands for “root em” because it calculates the size based on the size of the root of the document or body tag.

So Bootstrap’s global default font-size is 16px.

1rem = 16px

Default styles applied to the body of the document

Body Styles
body font-size: 16px;

line-height: 1.5;

font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif;

Tired of WordPress? Try HubSpot CMS

Bootstrap 4 Text Sizes

Tag / Class Font Size
p 1rem / 16px
h1 2.5rem / 40px
h1 small 80% / 32px
h2 2rem / 32px
h2 small 80% / 25.6px
h3 1.75rem / 28px
h3 small 80% / 22.4px
h4 1.5rem / 24px
h4 small 80% / 24px
h5 1.25rem / 20px
h5 small 80% / 16px
h6 1rem / 16px
h6 small 80% / 12.8px
.display-1 6rem / 90px
.display-2 5.5rem / 82.5px
.display-3 4.5rem / 67.5px
.display-4 3.5rem / 52.5px

What is the default size of h1 Bootstrap heading?

2.5rem / 40px

What is the default size of h2 Bootstrap heading?

2rem / 32px

What is the default size of h3 Bootstrap heading?

1.75rem / 28px

What is the default size of h4 Bootstrap heading?

1.5rem / 24px

What is the default size of h5 Bootstrap heading?

1.25rem / 20px

How to Increase the Default Bootstrap Font Size

The default font-size for Bootstrap is 1rem. This converted to the pixel equivalent is dependent on the default font-size of the browser. The majority of browsers today use 16px, but this can vary for older browsers.

To change the default font size, add this CSS rule to your theme stylesheet after the Bootstrap stylesheet.

View Codepen demo

Download free digital marketing guides & templates

html {
  /* default font-size is 16px - this is set in the default browser stylesheet */ 
  font-size: 20px; 
  font-weight: 400; 
  line-height: 1.5; 
} 

/* Increase all font sizes on mobile */ 
@media (max-width: 767px) { 
  html { 
    /* default is 1rem or 16px */ 
    font-size: 25px; 
  } 
}

How to Change the Bootstrap Font Family for All Headlines

Add a google font stylesheet below the Bootstrap CSS stylesheet.

<link href="https://fonts.googleapis.com/css?family=Oswald" rel=“stylesheet”>

Add this to your theme stylesheet to override Bootstrap’s default values.

Download free digital marketing guides & templates

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
margin-bottom: 0.5rem;
font-family: ‘Oswald’, sans-serif;
font-weight: 500;
line-height: 1.2;
color: inherit;
}

How to make Bootstrap 4 Font Sizes Responsive

In Bootstrap version 4.3 they introduced responsive font sizes. This featured is turned off by default but can be enabled when you compile your own version of the Sass source files. You can learn more about this feature in the GitHub repo documentation.

Summary

So as you can see, changing the document font size and font family is pretty easy because Bootstrap uses rems for typography font sizes. If you change the default body font size of 16px all headings and paragraphs will adjust off of that size. If you need more variation, you will need to write new CSS classes to specify new rem values to override what Bootstrap is using. A good way to do this is to look at the typography styles and write your overrides in a separate document.



Written by: Jake Lett
I share digital marketing tips and HubSpot tutorials to help marketers and business owners grow their business.

Tags: , ,