# Typography and fonts

Use the **Typography** tab to customize the look of your text across courses on different devices. Configure the following text styles: [Basic](#basic), [Heading 1–4](#headings), [Caption](#caption), [List](#list), [Quote](#quote), and [Link](#link).

{% hint style="success" %}
You can further customize typography with the help of rich-text options on the [Elements](https://help.parta.io/branding/create-branding/elements) tab. For example, you can adjust typography in components like Cards, Buttons, or Accordions.
{% endhint %}

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXe91ld_KNb8Doxqm3sJ51TSfAvfxgnkkBY71k5x9K0btAc3-4ReNQMjLvKFhQ0q2vuscT0UpFIvAgP97RwM3gU4N5yA94taDthNesKt0C4S7977JOfC3tVohu1bLtoac3wZUINn_g?key=qqshmpx3ASBK9AwVAE38CCWQ" alt=""><figcaption></figcaption></figure>

## **Common styling properties**

<table><thead><tr><th width="137">Property</th><th>Description</th></tr></thead><tbody><tr><td>Font</td><td><p>Use the dropdown menu to choose fonts.</p><p><br>If you have a specific font that is not default in Parta, you can add it under Fonts. For details, see <a href="typography-and-fonts/add-your-custom-fonts">Add your custom fonts</a>.</p></td></tr><tr><td>Style</td><td>Select from available font weights via the dropdown menu. Click the italic icon <img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXeeeHhOJKPYgQEIXQRRREqwrx8CZLxtRGPFusx_8-i1CT5T0hE8-xm7x3G2HzUrU4ARqyOo5b9igBPeXHxjQSknHAWR-0lwwES9-n5ndgz4z396R9zBY1UaPMUQfnRrTj2BVxguSg?key=qqshmpx3ASBK9AwVAE38CCWQ" alt="">  to apply italic formatting.</td></tr><tr><td>Size</td><td>Use the dropdown to select different text sizes.</td></tr><tr><td>Line spacing</td><td>Adjust via the dropdown for tighter or looser text layout.</td></tr><tr><td>Color</td><td>Click the color swatch to access your branding colors or the palette for alternative options.</td></tr></tbody></table>

<details>

<summary>Basic</summary>

Basic text is used as the primary style for conveying information. This style is suitable for the main body of content, providing clear and readable text.

For details on how to configure Basic style, see [Common styling properties](#common-styling-properties).

</details>

<details>

<summary>Headings</summary>

Configure headings to establish visual hierarchy in your content, making it easier for readers to navigate your document and understand its structure. The following parameters apply to all heading levels (Heading 1–Heading 4).

For details on how to configure Heading styles, see [Common styling properties](#common-styling-properties).

</details>

<details>

<summary>Caption</summary>

Captions are used for brief explanations or labels for images, graphs, and other visual elements, ensuring that they are interpreted correctly.

For details on how to configure Caption style, see [Common styling properties](#common-styling-properties).

</details>

<details>

<summary>List</summary>

Lists help organize information in a structured format, making content more scannable and easier to digest. Use numbered lists for sequential steps and bulleted lists for non-sequential items.

<table><thead><tr><th width="159">Property</th><th>Description</th></tr></thead><tbody><tr><td>Font </td><td>Font settings are inherited from <a href="#basic">Basic</a>.</td></tr><tr><td>Style</td><td>Select from available font weights via the dropdown menu. Click the italic icon <img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXeeeHhOJKPYgQEIXQRRREqwrx8CZLxtRGPFusx_8-i1CT5T0hE8-xm7x3G2HzUrU4ARqyOo5b9igBPeXHxjQSknHAWR-0lwwES9-n5ndgz4z396R9zBY1UaPMUQfnRrTj2BVxguSg?key=qqshmpx3ASBK9AwVAE38CCWQ" alt="">  to apply italic formatting.</td></tr><tr><td>Interval</td><td>Set the value to adjust the vertical spacing between list items.</td></tr><tr><td>Spacing between</td><td>Set the spacing value to control the space between the list marker and text.</td></tr><tr><td>Color</td><td>Click the color swatch to access your branding colors or the palette for alternative options.</td></tr></tbody></table>

</details>

<details>

<summary>Quote</summary>

Quotes help to break up large amounts of monotonous text and highlight important thoughts or definitions. Use them to emphasize key information or add credibility through cited sources.

<table><thead><tr><th width="177">Property</th><th>Description</th></tr></thead><tbody><tr><td>Font </td><td>Font settings are inherited from <a href="#basic">Basic</a>.</td></tr><tr><td>Style</td><td>Select from available font weights via the dropdown menu. Click the italic icon <img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXeeeHhOJKPYgQEIXQRRREqwrx8CZLxtRGPFusx_8-i1CT5T0hE8-xm7x3G2HzUrU4ARqyOo5b9igBPeXHxjQSknHAWR-0lwwES9-n5ndgz4z396R9zBY1UaPMUQfnRrTj2BVxguSg?key=qqshmpx3ASBK9AwVAE38CCWQ" alt="">  to apply italic formatting.</td></tr><tr><td>Line spacing</td><td>Adjust via the dropdown for tighter or looser text layout.</td></tr><tr><td>Color</td><td>Click the color swatch to access your branding colors or the palette for alternative options.</td></tr><tr><td>Delimiter</td><td>Choose the color for the vertical line marking the quote.</td></tr></tbody></table>

</details>

<details>

<summary>Link</summary>

Links navigate to related content, allowing users to access additional information or resources. Use them to create interactive documents and improve navigation throughout your content.

<table><thead><tr><th width="148">Property</th><th>Description</th></tr></thead><tbody><tr><td>Font </td><td>Font settings are inherited from <a href="#basic">Basic</a>.</td></tr><tr><td>Style</td><td>Select from available font weights via the dropdown menu. Click the italic icon <img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXeeeHhOJKPYgQEIXQRRREqwrx8CZLxtRGPFusx_8-i1CT5T0hE8-xm7x3G2HzUrU4ARqyOo5b9igBPeXHxjQSknHAWR-0lwwES9-n5ndgz4z396R9zBY1UaPMUQfnRrTj2BVxguSg?key=qqshmpx3ASBK9AwVAE38CCWQ" alt="">  to apply italic formatting.</td></tr><tr><td>Color</td><td>Click the color swatch to access your branding colors or the palette for alternative options.</td></tr><tr><td>Underline</td><td>Choose "Yes" or "No" to determine whether links should be underlined.</td></tr><tr><td>Hover color</td><td>Select the color that appears when users hover over links.</td></tr></tbody></table>

</details>