Getting Started with Bootstrap Typography

bootstrap typographyTypography is a very important part of Web Design. It is even one of the reasons why so many different style sheets, frameworks and web development tools are created. To convey ideas and information in a way that would be pleasant and interesting, proper lettering, headers etc. should be well designed, and Bootstrap has provided a wide range of ways to present your material attractively without much programming knowledge.

Want to know about bootstrap? Learn more here.

What is typography? 

When conveying thoughts verbally, your message is not only composed of only words and grammar. The true context is expressed mostly through tone, intonation and the like. So what about information that are not being expressed verbally? Like information being shared through a website? This is where typography comes in. Typography is the art and technique of arranging and styling the written (or in this case typed) word in order to allow its context to be more recognizable and appealing to the receiver despite not having the necessary auditory elements of communication.

Typography utilizes elements which include, but not limited to: font style and size, color, headings, lines, rhythm and proportion, symbols and harmony to create interface designs that allow words and statements to convey emphasis and tone, making ideas easier to understand and recognize.

Typography in Bootstrap

Bootstrap provides developers with convenient typography features to make it easy for them to create headings, paragraphs, lists and other inline elements in a way that would be appealing to the readers.

New to bootstrap? Learn more here.

Headings. Let’s begin with headings. All HTML headings are styled when in Bootstrap. To create one, we use the heading tag <h1>, and then you put the text you want to format as a heading within the <h1> tag and its counterpart closing tag, </h1>. There are 6 different headings you can choose from:

<h1>Sample Heading h1</h1>

<h2>Sample Heading h2</h2>

<h3>Sample Heading h3</h3>

<h4>Sample Heading h4</h4>

<h5>Sample Heading h5</h5>

<h6>Sample Heading h6</h6>

The above code will show the following output:

Sample Heading h1

Sample Heading h2

Sample Heading h3

Sample Heading h4

Sample Heading h5

Sample Heading h6

In bootstrap, you can also use inline subheadings. All you have to do is add the <small> tag around the elements to get a smaller text with lighter color. To use it:

<h1>Sample Heading h1. <small>Sample Secondary Heading h1.</small></h1>

After which, you will be getting this output:

Sample Heading h1.Sample Secondary Heading h1.

Lead Body.  When you want to add emphasis to a paragraph, just add the class=”lead” code in the paragraph tag. All enclosed will now have a larger font size, lighter weight and taller line height. For example:

<p class=”lead”>Example paragraph to show lead body style. Example paragraph to show lead body style.</p>

Example paragraph to show lead body style. Example paragraph to show lead body style.

Body. The global default for bootstrap’s font is size 14px with a line height of 20px which is applied to the body and all paragraphs. The bottom margin for all paragraphs is half their line height. To create a regular paragraph, just use the <p> tag and the </p> closing tag. For example:

<p>This is a sample paragraph.</p>

The <small> tag can also be used in paragraphs to give all elements enclosed a more lightweight style for de-emphasis. Usually, this is used to denote fine prints.

<p>

<small>This line of text is a sample fine print paragraph.</small>

</p>

There’s also the <strong> tag. When you use this, the text enclosed will have a heavier font weight and be rendered as bold text.

<strong>Sample text rendered in bold.</strong>

For emphasis using Italics, use the <em> tag.

<em>Sample text rendered in italics.</em>

Emphasis Classes. There are also classes that instead of changing the font style, they change the font color. Here are some examples:

<p class=”muted”>Sample text for emphasis styles.</p>

<p class=”text-warning”>Sample text for emphasis styles.</p>

<p class=”text-error”>Sample text for emphasis styles.</p>

<p class=”text-info”>Sample text for emphasis styles.</p>

<p class=”text-success”>Sample text for emphasis styles.</p>

 

  1. You can create text abbreviations that can be expanded when you hover over the text using the <abbr> tag. Use the title attribute to declare the expanded version of the abbreviation. Texts declared as abbreviations have dotted lines beneath them.

 

<abbr title=”Sample Text Abbreviation”>STA</abbr>

To give the abbreviation a slightly smaller font, use the initialism class like so:

<abbr title=”Sample Text Abbreviation” class=”initialism”>STA</abbr>

Block Quotes.To denote that you are showing content from other sources or websites, you can use block quotes with the <blockquote> tag to enclose paragraphs.

<blockquote>

<p>This is a sample block quote.</p>

</blockquote>

This is a sample block quote.

  1. When you wish to show a list of items in your page, you can choose from ordered and unordered lists.

To create an unordered list, use the <ul> tag to start the list. For the items, use the <li> tag.

<ul>

<li>Sample unordered list item1</li>

<li>Sample unordered list item2</li>

</ul>

This will show as a bulleted list:

  • Sample list item1
  • Sample list item2

For an ordered list, use the <ol> tag to start the list instead.

<ol>

<li>Sample ordered list item1</li>

<li>Sample ordered list item2</li>

</ol>

  1. Sample ordered list item1
  2. Sample ordered list item2

The above example uses default padding and spacing. You can add the unstyled class to have a list with removed left padding. This is only effective for the immediate children of the list

<ul class=”unstyled”>

<li>Sample unstyled list item.</li>

</ul>

Bootstrap has a wide array of typography styles that you can choose from to help you present information more effectively. You only need to utilize the provided classes to be able to create pages which you can design headings, paragraphs, lists etc. in a way that would be more appealing to the readers. By being able to connect to your readers through proper context presentation, it will be easier to let them understand the ideas you wish to convey, or even improve your business relationships with clients.