Font
Quickly manage the typography with a full suite of responsive font utilities.
Font family
When font utilities are not applied, the native font stack will be loaded instead. If you want to change then use the utility classes .font-base, .font-serif, .font-monospace on the <body> tag to set the font globally, or on child elements for a more isolated usage.
Sans Serif
Use the .font-base to apply a sans-serif font.
Almost before we knew it, we had left the ground.
<!-- Globally -->
<body class="font-base">...</body>
<!-- Individual elements -->
<p class="font-sans">...</p>
Serif
Use the .font-serif to apply a serif font.
Almost before we knew it, we had left the ground.
<p class="font-serif">...</p>
Monospace
Use the .font-code to apply a monospace font.
Almost before we knew it, we had left the ground.
<p class="font-code">...</p>
Display
Use the .font-display to apply an alternate custom font on headings and display titles.
Display Title
<h1 class="font-display">...</h1>
Adding a new font family
When using custom fonts, make sure your font family is accessible by the CSS style.
Google Fonts
If you use Google fonts, all you have to do is to add the <link> tag with given by Google Fonts settings and add it in the <head> section of your page.
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
Manually installed fonts
After creating your font family styles, make sure you import that in the main Sass file.
@import "_custom-font.scss";
Customizing font family
Your your custom Sass config file to update the new fonts you've chosen using the following variables:
$font-sans-serif: "Nunito";
$font-display: $font-sans-serif;
$font-monospace: null;
$font-serif: null;
Font size
Quickly change the font-size of text with these utility clases. By default, all font sizes are responsive with the help of the mechanism automatically calculates the appropriate values based on the dimensions of the browser viewport. Learn more about Bootstrap's RFS plugin here.
Almost before we knew it, we had left the ground.
Almost before we knew it, we had left the ground.
Almost before we knew it, we had left the ground.
Almost before we knew it, we had left the ground.
Almost before we knew it, we had left the ground.
Almost before we knew it, we had left the ground.
Almost before we knew it, we had left the ground.
<p class="text-xs">...</p>
<p class="text-sm">...</p>
<p class="text-base">...</p>
<p class="text-md">...</p>
<p class="text-lg">...</p>
<p class="text-xl">...</p>
<p class="text-2xl">...</p>
Customizing font size
// Assumes the browser default, typically `16px`
$font-size-base: 1rem !default;
$font-size-xs: $font-size-base * .75 !default;
$font-size-sm: $font-size-base * .875 !default;
$font-size-md: $font-size-base * 1.125 !default;
$font-size-lg: $font-size-base * 1.25 !default;
$font-size-xl: $font-size-base * 1.5 !default;
$font-size-2xl: $font-size-base * 2 !default;
Font weight
Quickly change the font-weight of text with these utility clases.
Almost before we knew it, we had left the ground.
Almost before we knew it, we had left the ground.
Almost before we knew it, we had left the ground.
Almost before we knew it, we had left the ground.
Almost before we knew it, we had left the ground.
Almost before we knew it, we had left the ground.
<p class="font-lighter">...</p>
<p class="font-light">...</p>
<p class="font-regular">...</p>
<p class="font-semibold">...</p>
<p class="font-bold">...</p>
<p class="font-bolder">...</p>
Customizing font weight
To change the global value applied use the following variable:
$font-weight-lighter: lighter !default;
$font-weight-light: 300 !default;
$font-weight-normal: 400 !default;
$font-weight-semibold: 500 !default;
$font-weight-bold: 600 !default;
$font-weight-bolder: bolder !default;
$font-weight-black: 800 !default;
Font style
Quickly change the font style of text with these utility clases.
Almost before we knew it, we had left the ground.
Almost before we knew it, we had left the ground.
<p class="font-italic">...</p>
<p class="font-normal">...</p>
Line height
Change the line height with .lh-* utilities.
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.
<p class="lh-none">...</p>
<p class="lh-tighter">...</p>
<p class="lh-tight">...</p>
<p class="lh-snug">...</p>
<p class="lh-relaxed">...</p>
<p class="lh-loose">...</p>
Customizing line height
To change the global value applied use the following variable:
$line-height-base: 1.625;
And here's how you can override the default values used for generating line-height utilities:
$theme: (
line-height: (
values: (
none: 1,
tighter: 1.125,
tight: 1.2,
snug: 1.375,
normal: 1.5,
relaxed: 1.625,
loose: 2
)
)
)
Letter spacing
Change the letter spacing with .ls-* utilities.
Almost before we knew it, we had left the ground.
Almost before we knew it, we had left the ground.
Almost before we knew it, we had left the ground.
Almost before we knew it, we had left the ground.
Almost before we knew it, we had left the ground.
Almost before we knew it, we had left the ground.
<p class="ls-tighter">...</p>
<p class="ls-tight">...</p>
<p class="ls-normal">...</p>
<p class="ls-wide">...</p>
<p class="ls-wider">...</p>
<p class="ls-widest">...</p>
Customizing letter spacing
Here's how you can override the default values used for generating letter-spacing utilities:
$theme: (
letter-spacing: (
values: (
tighter: -0.05em,
tight: -0.025em,
normal: 0,
wide: 0.025em,
wider: 0.05em,
widest: 0.1em
)
)
)