Typography

Utilities for controlling text.

Font Family

Neoblaze is shipped with three fonts.

Class	Properties
`font-primary`	font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, “Roboto”, “Oxygen”, “Ubuntu”, “Cantarell”, “Fira Sans”, “Droid Sans”, “Helvetica Neue”,sans-serif;
`font-secondary`	font-family: system-ui, “Segoe UI”;;
`font-tertiary`	font-family: monospace;

Awesome CSS

<h3 class="font-primary">Awesome CSS</h3>
<h3 class="font-secondary">Awesome CSS</h3>
<p class="font-tertiary">Awesome CSS</p>

Font Style

Utilities for controlling the text style. For responsive variant use font-{breakpoint}-{property} like font-sm-italic.

Class	Properties
`font-italic`	font-style: italic;
`font-normal`	font-style: normal;

Awesome CSS

<p class="font-italic">Awesome CSS</p>

Font Weight

Utilities for controlling the font weight of an element. For responsive variant use font-{breakpoint}-{property} like font-sm-thin.

Class	Properties
`font-thin`	font-weight: 100;
`font-xlight`	font-weight: 200;
`font-light`	font-weight: 300;
`font-normal`	font-weight: 400;
`font-medium`	font-weight: 500;
`font-sbold`	font-weight: 600;
`font-bold`	font-weight: 700;
`font-xbold`	font-weight: 800;
`font-black`	font-weight: 900;

Awesome CSS

<p class="font-bold">Awesome CSS</p>

Letter Spacing

Use tracking-{property} to control space between characters.
For responsive variant use tracking-{breakpoint}-{property} like tracking-sm-tight.

Class	Properties
`tracking-tightest`	letter-spacing: -0.055em;
`tracking-tighter`	letter-spacing: -0.033em;
`tracking-tight`	letter-spacing: -0.011em;
`tracking-normal`	letter-spacing: 0;
`tracking-wide`	letter-spacing: 0.011em;
`tracking-wider`	letter-spacing: 0.033em;
`tracking-widest`	letter-spacing: 0.055em;

Awesome CSS

<p class="tracking-wide">Awesome CSS</p>

Line Height

Use leading-{property} to change line height of an element.
For responsive variant use leading-{breakpoint}-{property} like leading-sm-normal.

Class	Properties
`leading-dense`	line-height: 0.8;
`leading-base`	line-height: 1;
`leading-none`	line-height: 0;
`leading-normal`	line-height: 1.125;
`leading-relaxed`	line-height: 1.14;
`leading-spacious`	line-height: 1.4;
`leading-loose`	line-height: 1.8;

In the science fiction books I read as a kid, reading had often been replaced by some more efficient way of acquiring knowledge. Mysterious "tapes" would load it into one's brain like a program being loaded into a computer. Paul G

<p class="leading-loose">In the science fiction books...</p>

Line Length

Use measure-{property} to set the line length.
For responsive variant use measure-{breakpoint} like measure-sm-wide.

Class	Properties
`measure-narrow`	max-width: 55ch;
`measure`	max-width: 65ch;
`measure-wide`	max-width: 75ch;

<p class="measure-narrow">In the science fiction books...</p>

Text Alignment

Use text-{property} to control text alignment.
For responsive variant use text-{breakpoint}-{property} like text-sm-left.

Class	Properties
`text-left`	text-align: left;
`text-right`	text-align: right;
`text-center`	text-align: center;
`text-justify`	text-align: justify;
`text-start`	text-align: start;
`text-end`	text-align: end;

Awesome CSS

<p class="text-right">Awesome CSS</p>

Text Transform

Use text-{property} to control text transformation.
For responsive variant use text-{breakpoint}-{property} like text-sm-uppercase.

Class	Properties
`text-uppercase`	text-transform: uppercase;
`text-lowercase`	text-transform: lowercase;
`text-capitalize`	text-transform: capitalize;
`text-normal-case`	text-transform: none;

Awesome CSS

<p class="text-uppercase">Awesome CSS</p>

Word Break

Use break-{property} to control word break of an element.
For responsive variant use break-{breakpoint}-{property} like break-sm-word.

Class	Properties
`break-word`	word-break: break-word; overflow-wrap: break-word;
`break-all`	word-break: break-all;

Whitespace

Use text-{property} to control element whitespace.
For responsive variant use text-{breakpoint}-{property} like text-sm-normal.

Class	Properties
`text-wrap`	white-space: normal;
`text-no-wrap`	white-space: no-wrap;

Text Decoration

Use text-{property} to control text decoration.
For responsive variant use text-{breakpoint}-{property} like text-sm-underline.

Class	Properties
`text-underline`	text-decoration: underline;
`text-overline`	text-decoration: overline;
`text-line-through`	text-decoration: line-through;
`text-no-underline`	text-decoration: none;

Awesome CSS

<p class="text-underline">Awesome CSS</p>

Text Decoration Hover

Use text-{property}-hover to apply it in hover state.

Awesome CSS

<p class="text-underline-hover">Awesome CSS</p>

List Style

Use list-{property} to control list style.
For responsive variant use list-{breakpoint}-{property} like list-sm-none.

Class	Properties
`list-none`	list-style: none;
`list-disc`	list-style: disc;
`list-decimal`	list-style: decimal;

Awesome CSS

<ul class="list-disc">
	<li class="label-md">Awesome CSS</li>
</ul>

Customize

Font Family

To add your own font override these variables.

--font-primary: "Inter", sans-serif;
--font-secondary: system-ui, "Segoe UI";
--font-tertiary: "Fira Code", monospace;

Line Height & Letter Spacing

$tracking-tightest: -0.055em;
$tracking-tighter: -0.033em;
$tracking-tight: -0.011em;
$tracking-normal: 0;
$tracking-wide: 0.011em;
$tracking-wider: 0.033em;
$tracking-widest: 0.055em;

$leading-dense: 0.8;
$leading-base: 1;
$leading-none: 0;
$leading-normal: 1.125;
$leading-relaxed: 1.14;
$leading-spacious: 1.4;
$leading-loose: 1.8;