Font sizes

Default font sizes are shown below, margin is calculated automatically based on the size.

h1 Heading

h2 Heading

h3 Heading

h4 Heading

h5 Heading

h6 Heading

Sub headings

A lead class is available by applying .lead to your element. This text is perfect for sub headings on pages and large paragraphs.

Welcome to mesh

I'm an example sub heading using the lead class.

<h1>Welcome to mesh</h1>
<p class="lead">I'm an example sub heading using the lead class.</p>

Utility classes

A number of text utility helper classes have been bundled with mesh to help with creating font styles quickly.

Notation:

All text classes shown below are prefixed with t-{helper} for text.

Properties:

Class	Properties
.t-decoration-none	text-decoration: none;
.t-normal	font-weight: normal;
.t-bold	font-weight: bold;
.t-light	font-weight: light;
.t-italic	font-style: italic;
.t-uppercase	text-transform: uppercase;
.t-lowercase	text-transform: lowercase;
.t-initial	text-transform: initial;
.t-nowrap	white-space: nowrap;

Responsive text

Below is a demo of our responsive text class, you can target it by using the t-responsive class.

With responsive text, the font size gradually gets smaller on different viewports. Its totally customizable, you can adjust the base font size and how many points you would like. Go ahead and resize the screen to watch me get smaller!

Alignment

Text alignment is simple with mesh, you can adjust it responsively by using t-{breakpoint}-{property} The optional breakpoint can be one of our five breakpoints, outlined below.

Class	Properties
.t-center	text-align: center;
.t-left	text-align: left;
.t-right	text-align: right;
.t-justify	text-align: center;

Responsive variations:

<!-- Default -->
<div class="t-center"></div>
<div class="t-left"></div>
<div class="t-right"></div>
<div class="t-justify"></div>
<!-- Mobile -->
<div class="t-mob-center"></div>
<div class="t-mob-left"></div>
<div class="t-mob-right"></div>
<div class="t-mob-justify"></div>
<!-- Tablet -->
<div class="t-tab-center"></div>
<div class="t-tab-left"></div>
<div class="t-tab-right"></div>
<div class="t-tab-justify"></div>
<!-- Desktop -->
<div class="t-desk-center"></div>
<div class="t-desk-left"></div>
<div class="t-desk-right"></div>
<div class="t-desk-justify"></div>
<!-- HD -->
<div class="t-hd-center"></div>
<div class="t-hd-left"></div>
<div class="t-hd-right"></div>
<div class="t-hd-justify"></div>

Variables

Define text sizes, colors, different fonts and responsive text options with the variables below.

Variable	Value	Description
`$type-enable-responsive-text: true;`	Boolean	Enables/disables the responsive text class.
`$font-stack: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;`	CSS font family	Add your chosen font stack here, to use "Roboto" (default for mesh) make sure you use a google import.
`$h1-font-size: 3.31rem;`	Pixel/em/rem	H1 font size in pixels, ems or rems.
`$h2-font-size: 2.25rem;`	Pixel/em/rem	H2 font size in pixels, ems or rems.
`$h3-font-size: 1.56rem;`	Pixel/em/rem	H3 font size in pixels, ems or rems.
`$h4-font-size: 1.12rem;`	Pixel/em/rem	H4 font size in pixels, ems or rems.
`$h5-font-size: 1.06rem;`	Pixel/em/rem	H5 font size in pixels, ems or rems.
`$h6-font-size: 0.75rem;`	Pixel/em/rem	H6 font size in pixels, ems or rems.
`$lead-font-size: 1.25rem;`	Pixel/em/rem	Lead font size in pixels, ems or rems.
`$paragraph-font-size: 1rem;`	Pixel/em/rem	Paragraph font size in pixels, ems or rems.
`$small-font-size: 75%;`	Percentage/pixel/em/rem	Small tag font size in percentage, pixels, ems or rems.
`$black-text-color: #3c4858;`	Color	Important:defines the color of all text, the mesh default uses an off black.
`$white-text-color: #ffffff;`	Color	Defines the white shade of text.
`$responsive-text-points: 30;`	Number	How many breakpoints the `t-responsive` (responsive text) class uses. Please bear in mind that the more you use, the smoother it will become but at a cost to kb.