# Text Styles

### Overview

In this section, you can customize various properties of the text style for your portal, including the heading style, font family, size, and other relevant attributes.

<figure><img src="https://1733114811-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lclpq021Ai9jH1_X4gO%2Fuploads%2FFdB3ib0VjtOLdMvWY8hN%2Fjfbksaf.png?alt=media&#x26;token=1a40c758-25e9-46fb-b82c-5d6a4e0ea68e" alt="" width="563"><figcaption></figcaption></figure>

***

### Customization Options

Each heading style can have the following customized via the 4 accompanying drop down menus:

* Font Style
* Font Size
* Typographical Emphasis (**Bold**, *Italics*, or Normal). A selection of "Normal" will allow the user to set their own typographical emphasis.
* Letter Case (uppercase, lowercase, or none). A selection of **None** will allow the user to use their own capitalization preferences.&#x20;

<figure><img src="https://1733114811-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lclpq021Ai9jH1_X4gO%2Fuploads%2FrVoJdRevDUy1HmnpCUQD%2Fasdfs.png?alt=media&#x26;token=26befbc3-af53-4043-9ddb-98917938dce7" alt="" width="563"><figcaption></figcaption></figure>

***

### Large Text Options

To improve **visual hierarchy and consistency** across the portal, MangoApps also features standardized **large heading sizes (Large H1, H2, and H3)**. These large headings are automatically applied in **analytics dashboards**.

<figure><img src="https://1733114811-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lclpq021Ai9jH1_X4gO%2Fuploads%2FxkjyJLTz8WrXLNCOR6U7%2F21-08-2025-09-40-25.png?alt=media&#x26;token=3d87f094-c520-42fb-96ec-8d18488dcb08" alt="" width="563"><figcaption></figcaption></figure>

**Customization**: Font style, weight, and case can be adjusted under **Admin Portal > Branding > Portal > Text Styles > Large Text**.

<figure><img src="https://1733114811-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lclpq021Ai9jH1_X4gO%2Fuploads%2F7pxIu7Dxa2U5qoFfmfLw%2F21-08-2025-09-38-55.png?alt=media&#x26;token=270b4d0d-decf-4266-8ff9-90b6069687a0" alt="" width="563"><figcaption></figcaption></figure>

**CSS Support**: You can apply them in custom layouts or widgets using the following CSS classes:

* `.ma-large-h1`
* `.ma-large-h2`
* `.ma-large-h3`

***

### **Text Style Implementation**

Below are a few examples of content locations affected by these text styles.&#x20;

{% hint style="info" %}
The text in widget headers can be adjusted from the branding [widgets tab](https://guides.mangoapps.com/admin-guide/branding/widgets#background-text-color-label-style).
{% endhint %}

#### **Home Module**

<figure><img src="https://1733114811-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lclpq021Ai9jH1_X4gO%2Fuploads%2FCMU6mHsAhvCNhiKjoeHR%2FHome.png?alt=media&#x26;token=99892970-42cc-4501-81be-9b50ef1f4a17" alt=""><figcaption></figcaption></figure>

***

#### Newsfeed

<figure><img src="https://1733114811-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lclpq021Ai9jH1_X4gO%2Fuploads%2FfY70YnRzEwZB8tk06jjj%2FNewsFeed.png?alt=media&#x26;token=90f1a3bd-2b36-4530-92fb-7254cf62bfc9" alt=""><figcaption></figcaption></figure>

***

#### Posts

<figure><img src="https://1733114811-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lclpq021Ai9jH1_X4gO%2Fuploads%2FWMdJVN9oHFoNKQyVwesy%2FPost.png?alt=media&#x26;token=25060f6b-388b-4801-ad44-0adb648ac3b2" alt=""><figcaption></figcaption></figure>