React UI
Edit page
Home
Getting Started
Customize
Foundation
Components: UI
Components: Layouts
CSS Helpers
Animation Box Alignment Colors Display Spacing Typography
Font Size Text Alignment
Readme

# Typography

With the typography helper classes you can set the desired
`font-size` or align text with the `text-align` property.

##
Font Size

The full scale of typography sizes is available through the following helper classes:

#### Font size 0 (base font size)

#### Font size 1

#### Font size 2

#### Font size 3

#### Font size 4

#### Font size 5

<h4 className="typography-size-0">Font size 0 (base font size)</h4> <h4 className="typography-size-1">Font size 1</h4> <h4 className="typography-size-2">Font size 2</h4> <h4 className="typography-size-3">Font size 3</h4> <h4 className="typography-size-4">Font size 4</h4> <h4 className="typography-size-5">Font size 5</h4>

    <h4 className="typography-size-0">Font size 0 (base font size)</h4><h4 className="typography-size-1">Font size 1</h4><h4 className="typography-size-2">Font size 2</h4><h4 className="typography-size-3">Font size 3</h4><h4 className="typography-size-4">Font size 4</h4><h4 className="typography-size-5">Font size 5</h4>

## Text Alignment

Try resizing your browser to see how the alignment below changes.

`.text-left` Left aligned text on all viewport sizes.

`.text-center` Center aligned text on all viewport sizes.

`.text-right` Right aligned text on all viewport sizes.

`.text-sm-right` Right aligned text on viewports sized `sm` (small) or wider.

`.text-md-right` Right aligned text on viewports sized `md` (medium) or wider.

`.text-lg-right` Right aligned text on viewports sized `lg` (large) or wider.

`.text-xl-right` Right aligned text on viewports sized `xl` (extra-large) or wider.

`.text-xxl-right` Right aligned text on viewports sized `xxl` (XX-large) or wider.

`.text-xxxl-right` Right aligned text on viewports sized `xxxl` (XXX-large) or wider.

<div> <p className="text-left"> <code>.text-left</code> Left aligned text on all viewport sizes. </p> <p className="text-center"> <code>.text-center</code> Center aligned text on all viewport sizes. </p> <p className="text-right"> <code>.text-right</code> Right aligned text on all viewport sizes. </p> <p className="text-sm-right"> <code>.text-sm-right</code> Right aligned text on viewports sized{' '} <code>sm</code> (small) or wider. </p> <p className="text-md-right"> <code>.text-md-right</code> Right aligned text on viewports sized{' '} <code>md</code> (medium) or wider. </p> <p className="text-lg-right"> <code>.text-lg-right</code> Right aligned text on viewports sized{' '} <code>lg</code> (large) or wider. </p> <p className="text-xl-right"> <code>.text-xl-right</code> Right aligned text on viewports sized{' '} <code>xl</code> (extra-large) or wider. </p> <p className="text-xxl-right"> <code>.text-xxl-right</code> Right aligned text on viewports sized{' '} <code>xxl</code> (XX-large) or wider. </p> <p className="text-xxxl-right"> <code>.text-xxxl-right</code> Right aligned text on viewports sized{' '} <code>xxxl</code> (XXX-large) or wider. </p> </div>

    <div>  <p className="text-left">    <code>.text-left</code> Left aligned text on all viewport sizes.  </p>  <p className="text-center">    <code>.text-center</code> Center aligned text on all viewport sizes.  </p>  <p className="text-right">    <code>.text-right</code> Right aligned text on all viewport sizes.  </p>  <p className="text-sm-right">    <code>.text-sm-right</code> Right aligned text on viewports sized{' '}    <code>sm</code> (small) or wider.  </p>  <p className="text-md-right">    <code>.text-md-right</code> Right aligned text on viewports sized{' '}    <code>md</code> (medium) or wider.  </p>  <p className="text-lg-right">    <code>.text-lg-right</code> Right aligned text on viewports sized{' '}    <code>lg</code> (large) or wider.  </p>  <p className="text-xl-right">    <code>.text-xl-right</code> Right aligned text on viewports sized{' '}    <code>xl</code> (extra-large) or wider.  </p>  <p className="text-xxl-right">    <code>.text-xxl-right</code> Right aligned text on viewports sized{' '}    <code>xxl</code> (XX-large) or wider.  </p>  <p className="text-xxxl-right">    <code>.text-xxxl-right</code> Right aligned text on viewports sized{' '}    <code>xxxl</code> (XXX-large) or wider.  </p></div>

And that's all, folks! 🙋🏻‍♂️ You have just reached the end of the React UI documentation. You may now proceed to the
installation instructions or explore the GitHub repository. Or just open a beer 🍺.