Typography

Typography is the art and technique of arranging type elements to make written language legible, readable, and appealing when displayed with the use of headings, bold fonts, italic fonts, strong fonts, lists, and so on.

Headings

In Bootstrap, all headings from h1 to h6 are available from HTML. Headings are mainly used to highlight the main topics under discussion. The heading text should be included between proper HTML heading tags, for example, <h1> Here is the heading text </h1>. The heading size decreases as the heading number increases, providing the facility to highlight the main topics and subtopics. This technique helps in managing a proper design for the website.

Here are a few examples of how headings can be used:

<h1> This is a Bootstrap heading H1</h1>
<h2> This is a Bootstrap heading H2</h2>
<h3> This is a Bootstrap heading H3</h3>
<h4> This is a Bootstrap heading H4</h4>
<h5> This is a Bootstrap heading H5</h5>
<h6> This is a Bootstrap heading H6</h6>

Body

All the HTML tags related to typography and design must be included within the body tags, for example, text, hyperlinks, images, tables, lists, and so on. The following code shows a paragraph tag, which shows the text in a paragraph:

<p>...</p>

Lead body

The lead class helps make the text inside the tags stand out. The method of its declaration is as stated here:

<p class="lead">...</p>

Emphasis

Emphasis basically affiliates the size and font of the text to its importance in a document. For example, larger text would have more importance than smaller text or text in italics might contain a reference from another resource.

Small text

The text within the small tags is mainly reduced to 85% of the original size. This technique is mainly used to lessen the importance of the text:

<small>...</small>

Bold text

The text within the strong tags is made more visible by making it larger and bolder. This helps in increasing the emphasis of the text in the document:

<strong>...</strong>

Italics text

The text within the em tags is italicized. This technique is mainly used to denote references, among many other uses:

<em>...</em>

Alignment

Alignment is a basic technique used to align a paragraph to the left, right, or center of the screen, regardless of the screen resolution:

<p class="text-left">Text here will be left-aligned</p>
<p class="text-center"> Text here will be center-aligned </p>
<p class="text-right"> Text here will be right-aligned </p>

Abbreviations

The customized <abbr> element of HTML can be used with the following syntax as shown in the following code snippet.

Basic

The <abbr> tag shows a smaller version of text and is expanded when the mouse is hovered over it:

<abbr title="attribute">Here is an example of an attribute tag</abbr>

The output of this code will show the attr abbreviation.

Initialism

Initialism has the same functionality as the basic abbreviation but with smaller text:

<abbr title="HyperText Markup Language" class="initialism">HTML using Initialism</abbr>

Addresses

Address tags are used to accommodate all text related to an address. The following example shows the format:

<address> …
  <strong>Packt PublishingPublishing.</strong><br>
  Berwick House, <br>
  35 Livery St, <br>
  Birmingham B3 2PB,<br> 
  United Kingdom <br>
  <abbr title="Phone">P:</abbr> +44 121 265 6484
</address>

Blockquotes

Blockquotes are mainly used for quoting text from another source. They are used with paragraph tags for quoting a paragraph:

<blockquotes> … </blockquotes>
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.137.217.220