Text Utilities
Tec{h}tonic has used many types of heading and other text-utilities that you can give to your
website.
Font Family
Tec{h}tonic uses Montserrat as its default font-family. It is a
Google font which you can use for free.
For using this font, you can use this link mentioned below in your head tag of the html file.
Add this file in head-tag to get this font in your file.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,900;1,300&display=swap"
rel="stylesheet">
Headings.
H1 : Hello, this is Tec{h}tonic library!
H2 : Hello, this is Tec{h}tonic library!
H3 : Hello, this is Tec{h}tonic library!
H4 : Hello, this is Tec{h}tonic library!
H5 : Hello, this is Tec{h}tonic library!
H6 : Hello, this is Tec{h}tonic library!
Add "head-sentence" class and h1, h2, h3, h4, h5, h6 tag to get heading like these in your website.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<h1 class="head-sentence"> H1 : Hello, this is Tec{h}tonic library!</h1>
<h2 class="head-sentence"> H2 : Hello, this is Tec{h}tonic library!</h2>
<h3 class="head-sentence"> H3 : Hello, this is Tec{h}tonic library!</h3>
<h4 class="head-sentence"> H4 : Hello, this is Tec{h}tonic library!</h4>
<h5 class="head-sentence"> H5 : Hello, this is Tec{h}tonic library!</h5>
<h6 class="head-sentence"> H6 : Hello, this is Tec{h}tonic library!</h6>
Small Text
Small : Hello, this is Tec{h}tonic library!
Smaller : Hello, this is Tec{h}tonic library!
Extra-small : Hello, this is Tec{h}tonic library!
X-Extra-small : Hello, this is Tec{h}tonic library!
Add these below mentioned classes for different sizes of fonts in your website.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="small-text small-sentence">Small : Hello, this is Tec{h}tonic library!</div>
<div class="smaller-text small-sentence">Smaller : Hello, this is Tec{h}tonic library!</div>
<div class="xsmall-text small-sentence">Extra-small : Hello, this is Tec{h}tonic library!</div>
<div class="xxsmall-text small-sentence">X-Extra-small : Hello, this is Tec{h}tonic library!</div>
Gray Text
Hello, this is Tec{h}tonic library!
Hello, this is Tec{h}tonic library!
Add "large-gray-text" or "xlarge-gray-text" class for gray text with different sizes.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="large-gray-text">Hello, this is Tec{h}tonic library!</div>
<div class="xlarge-gray-text">Hello, this is Tec{h}tonic library!</div>
Centered Text
Hello, this is Tec{h}tonic library!
Hello, this is Tec{h}tonic library!
Add "large-centered-text" or "xlarge-centered-text" class for centered text with different sizes.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="large-centered-text">Hello, this is Tec{h}tonic library!</div>
<div class="xlarge-centered-text">Hello, this is Tec{h}tonic library!</div>