How To

Typography Basic Knowledge

Spread the love

Typography In Bootstrap:

Bootstrap sets basic global display, typography, and link styles. When more control is needed.It uses a default font-size of 16px, and its line-height is 1.5. The default font-family is “Helvetica Neue”, Helvetica, Arial, sans-serif.

You can define all HTML Headings, <h1> through <h6> — In the same way you define in simple HTML document. You can also utilize the heading classes .h1 through .h6 on other elements, if you want to apply the style on element’s text same as headings.

Example:

<body>
<div>
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
</div>
</body>
 
 
Output : 
typography
Output of Above Example

Display Heading :

It is used when you need a heading to stand out. Display headings are displayed in larger font-size but lighter font-weight.

Example:

<body>

<div class=”container”>
<h1>Display Headings</h1>
<h1 class=”display-1″>First Display</h1>
<h1 class=”display-2″>Second Display </h1>
<h1 class=”display-3″> Third Display</h1>
<h1 class=”display-4″> Fourth Display</h1>
</div>

</body>

Text Formatting

You are free to use text formatting tags like <strong>, <i>, <small> to make your text bold, italic, small and so on, in the same way you do in simple HTML.

Example :

<body>
<div class=”bs-example”>
<p><b>bold text</b></p>
<p><code>computer code</code></p>
<p><em>emphasized text</em></p>
<p><i>italic text</i></p>
<p><mark>highlighted text</mark></p>
<p><small>small text</small></p>
<p><strong>strongly emphasized text</strong></p>
<p>This is <sub>subscript</sub> and <sup>superscript</sup></p>
<p><ins>This text is inserted to the document</ins></p>
<p><del>This text is deleted from the document</del></p>
</div>

Text Transformation :

Using Trasformation You can Transform the Text to Uppercase,Lowercase OR make them Capitalize.

Example :

<body>
<div class>
<p class=”text-lowercase”>Lower case sentences</p>
<p class=”text-uppercase”>Upper-case Sentences</p>
<p class=”text-capitalize”>Capitalize Sentences</p>
</div>
</body>

Text Coloring :

Colors are the powerful method of conveying important information in website design.

Example :

<body>
<div class”>
<p class=”text-primary”>Primary: Please read the instructions carefully.</p>
<p class=”text-secondary”>Secondary: This is featured has been removed from the latest version.</p>
<p class=”text-success”>Success: Your message has been sent successfully.</p>
<p class=”text-info”>Info: You must agree with the terms and conditions to complete the sign up process.</p>
<p class=”text-warning”>Warning: There was a problem with your network connection.</p>
<p class=”text-danger”>Danger: This color represent danger</p>
<p class=”text-muted”>Muted: This paragraph of text is grayed out.</p>
</div>
</body>

Blockquotes :

Just define the blockquotes using the standard <blockquotes> element and bootstrap’s style sheet will do the rest.

Moreover, for identifying the source you can add a <footer> element with class  .blockquote-footer and wrap the name of the source work in <cite>, like this:

Example :

<body>
<div class>
<blockquote class=”blockquote”>
<p class=”mb-0″>For 50 years, WWF has been protecting the future of nature. The world’s leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.</p>
<footer class=”blockquote-footer”>by <cite>From WWF’s website</cite></footer>
</blockquote>
</div>
</body>

Basic Knowledge of Bootstrap…..

One thought on “Typography Basic Knowledge

Leave a Reply

Your email address will not be published.