Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

bootstrap 4
typography
communitycreator

What is typography in Bootstrap 4?

Farounbi Abiola

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Overview

In displaying text content on a web page, it’s important to follow a concise and accessible format. Bootstrap is a popular CSS framework that provides customized headings, inline subheadings, lists, paragraphs, aligning, adding more design-oriented font styles and so on. We can implement them easily to deliver a good user interface.

By default, Bootstrap 4 uses a default font size of 16px and line height is 1.5. The default font family is “Helvetica Neue,” “Helvetica,” “Arial,” and “sans-serif.”

Typography styles in Bootstrap

Heading

This styles HTML headings <h1> to <h6> with a bolder font-weight and an increased font-size. Alternatively, .h1 - .h6 classes are also available for when we want to match the font styling of a heading to another HTML element.

Display heading

Display headings used to lay emphasis over normal headings with a larger and unique heading style. The classes range from display-1 to display-4.

Demo using display headings

Lead

The lead tag can be used to make a paragraph stand out and be more distinct.

Demo using Lead

Inline text elements

Bootstrap also supports styling for common inline HTML5 elements such as:

  • <mark>: This is used to highlight a text.

  • <u>: This is used to underline a text.

  • <strong>: This is used to bold a text.

  • <em>: This is used to italicize a text.

Demo using Inline text elements

Abbreviations

Abbreviations can be displayed on the page using the <abbr> tag and the title. Abbreviations have a default underline and a cursor to provide additional context on hover and to users of assistive technologies.

Demo using Abbreviation tags

Blockquotes

Blockquotes represent quotes from another source within our page using the <blockquote> tag. Additionally, the source can also be added using the .blockquote-footer class wrapped in the <cite> tag.

Demo using Blockquote tag

Lists

The representation of items in a list can be in different types depending on the use case, such as:

  • Unstyled list: This removes the default bullet point style for the list elements. This can be done by including the list-unstyled class.

  • Inline list: This displays the list items in an inline format using a combination of two classes, .list-inline and .list-inline-item.

  • Description list: This is a list of terms with a description of each term.

Description lists are used with the description list tag <dl> tag in HTML. Inside the tag, we have description terms represented with the <dt> tag. Also, we use the data description tag <dd> to define the term that we have stated.

Demo using Lists

RELATED TAGS

bootstrap 4
typography
communitycreator

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring