.finally(React)

English
Copyright © 2023-currentdotfinally, LLC

Typography

An REM-based text framework

FinallyReact's typography framework will be included when you import the main CSS file, most likely in a top level app file:

Font

Google's Montserrat font is used for titles. It has a heavy and compact boldness, which is great for headings.

Google's Noto Sans font is used for all other page text. It's easy on the eyes and has the perfect spacing for reading.

If needed, you can override these fonts on the html element.

REM

FinallyReact typography is based on REM sizes. By default, your app's html element will be given font-size: 100%. This means all typography classes which use REM will adapt to the browser's font-size. The default font-size on most browsers is usually 16px, which would make 1rem = 16px by default (try changing your browser's font-size setting and refresh this page to see what happens).

Browser font-size (px)
*
rem
=
px

In JSX

FinallyReact includes a simple set of pre-built text classes which modify different elements or can be used in JSX classNames. For example: className="text-xxl" will make your text really big.

Headers

h1

font-size: 2.50rem

h2

font-size: 2.00rem

h3

font-size: 1.75rem

h4

font-size: 1.50rem

h5
font-size: 1.25rem
h6
font-size: 1.00rem

Text

.text-xs
font-size: 0.60rem
.text-sm
font-size: 0.80rem
.text
font-size: 1.00rem
.text-md
font-size: 1.25rem
.text-lg
font-size: 1.50rem
.text-xl
font-size: 1.80rem
.text-2xl
font-size: 2.25rem
.text-3xl
font-size: 3rem

Font Weight

.font-thin
fluffy llamas
.font-extralight
fluffy llamas
.font-light
fluffy llamas
.font-regular
fluffy llamas
.font-medium
fluffy llamas
.font-semibold
fluffy llamas
.font-bold
fluffy llamas
.font-extrabold
fluffy llamas
.font-black
fluffy llamas

Font Style

.font-normal
fluffy llamas
.font-italic
fluffy llamas

Text Decoration

.text-underline
fluffy llamas
.text-strikethrough
fluffy llamas
.text-overline
fluffy llamas
.text-uppercase
fluffy llamas
.text-lowercase
fluffy llamas
.text-capitalize
fluffy llamas

Text Alignment

.text-left
fluffy llamas
.text-center
fluffy llamas
.text-right
fluffy llamas

Other Classes

.text-nowrap, .text-truncate, .text-wrap, .text-pre, .text-justify