Typography

Manage text size, alignment, wrapping, overflow, and transformations with utility classes. Mytril’s typography helpers offer flexibility for a range of font properties, making it easier to control the look and feel of your content across different breakpoints.

Class	Properties
text-xs	size:0.75rem; height:1.667; spacing:0.033em;
text-sm	size:0.875rem; height:1.425; spacing:0.02em;
text-md	size:1rem; height:1.5; spacing:0.03em;
text-lg	size:1rem; height:1.75; spacing:0.01em;
text-xl	size:1.25rem; height:1.6; spacing:0.01em;
text-2xl	size:1.5rem; height:1.333; spacing:normal;
text-3xl	size:2.125rem; height:1.175; spacing:0.01em;
text-4xl	size:3rem; height:1.05; spacing:normal;
text-5xl	size:3.75rem; height:1; spacing:-0.008em;
text-6xl	size:6rem; height:1; spacing:-0.015em;

text-xs

text-sm

text-md

text-lg

text-xl

text-2xl

text-3xl

text-4xl

text-5xl

text-6xl

Breakpoints

The helper classes apply typography at a given breakpoint. These classes can be applied using the following format: {breakpoint}:{property}-{size}.

Font weight & emphasis

Control the weight of your text with ease using Mytril’s font weight properties. The following classes provide a range of font weights and styles:

font-thin: Thin text (100)
font-light: Light text (300)
font-regular: Regular text (400)
font-medium: Medium text (500)
font-bold: Bold text (700)
font-black: Black text (900)
font-italic: Italic text

Text alignment

Align text across your layout using these properties classes:

text-start: Aligns text to the start
text-end: Aligns text to the end
text-center: Centers the text
text-justify: Justifies the text
text-left: Aligns text to the left
text-right: Aligns text to the right

Text transform & decoration

Modify text appearance with transformations or add design touches:

text-uppercase: Converts text to uppercase
text-lowercase: Converts text to lowercase
text-capitalize: Capitalizes the first letter of each word

Text wrapping & overflow

Ensure text behaves as needed in your layout with these helpers:

text-truncate: Truncates overflowing text with an ellipsis
text-no-wrap: Prevents text from wrapping
text-break: Forces long words to break and wrap to the next line

Responsive typography

To apply text styles at specific breakpoints, use the format {breakpoint}:{property}-{size}. For example, lg:text-2xl applies text-2xl on large screens.

Example usage:

<p class="text-sm md:text-lg font-bold text-center">Responsive typography made easy with Mytril</p>

With Mytril’s comprehensive typography utilities, you can effortlessly style text for any project, ensuring consistency and adaptability across different devices.