> For the complete documentation index, see [llms.txt](https://help.fluorescent.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.fluorescent.co/stiletto/readme/stiletto-6.0-visual-refresh/typography.md).

# Typography

Stiletto 6.0 has typography controls for more types of text elements, with more granular options like font weight, and expanded section-level controls for text and headings.

## <mark style="color:$primary;">Expanded font styles</mark>

<mark style="color:$info;">We've exposed more font style controls for all classes of text. Find more granular controls for typography, including font weight, letter spacing, and uppercase.</mark>

***

{% columns fullWidth="false" %}
{% column width="50%" %}
**Body**\ <sup><mark style="color:$primary;">New<mark style="color:$primary;"></sup> Uppercase

**Navigation**\ <sup><mark style="color:$primary;">New<mark style="color:$primary;"></sup> Font (Body, Heading)\ <sup><mark style="color:$primary;">New<mark style="color:$primary;"></sup> Font weight\ <sup><mark style="color:$primary;">New<mark style="color:$primary;"></sup> Apply styles to Mega menu links

**Product listing title**\ <sup><mark style="color:$primary;">New<mark style="color:$primary;"></sup> Font (Body, Heading)\ <sup><mark style="color:$primary;">New<mark style="color:$primary;"></sup> Font weight\ <sup><mark style="color:$primary;">New<mark style="color:$primary;"></sup> Uppercase\ <sup><mark style="color:$primary;">New<mark style="color:$primary;"></sup> Letter spacing\ <sup><mark style="color:$primary;">New<mark style="color:$primary;"></sup> Desktop font size\ <sup><mark style="color:$primary;">New<mark style="color:$primary;"></sup> Mobile font size

**Buttons**\ <sup><mark style="color:$primary;">New<mark style="color:$primary;"></sup> Font (Body, Heading)\ <sup><mark style="color:$primary;">New<mark style="color:$primary;"></sup> Font weight\ <sup><mark style="color:$primary;">New<mark style="color:$primary;"></sup> Uppercase\ <sup><mark style="color:$primary;">New<mark style="color:$primary;"></sup> Letter spacing\ <sup><mark style="color:$primary;">New<mark style="color:$primary;"></sup> Desktop font size\ <sup><mark style="color:$primary;">New<mark style="color:$primary;"></sup> Mobile font size
{% endcolumn %}

{% column width="50%" %}

<div align="left" data-with-frame="true"><figure><img src="/files/6g6jjAfOLuNQgLfNwZaO" alt="" width="222"><figcaption></figcaption></figure></div>
{% endcolumn %}
{% endcolumns %}

***

<mark style="color:$info;">**Related updates**</mark>

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th></tr></thead><tbody><tr><td><strong>Expanded font size ranges</strong></td><td>Heading, subheading, and text size controls have larger pixel ranges. <a data-footnote-ref href="#user-content-fn-1">View new ranges</a>.</td></tr><tr><td><sup><mark style="color:$primary;">New</mark></sup> <strong>Font weight</strong></td><td>The font weight option applies when available in your theme font. <a data-footnote-ref href="#user-content-fn-2">View font weight values</a>.</td></tr></tbody></table>

## <mark style="color:$primary;">Font styles for more text classes</mark>

<mark style="color:$info;">Control global font styles for display headings, subheadings, and mobile navigation.</mark>

***

{% columns fullWidth="false" %}
{% column width="50%" %} <sup><mark style="color:$primary;">New<mark style="color:$primary;"></sup> **Display headings**\ <mark style="color:$info;">Desktop size</mark>\ <mark style="color:$info;">Mobile font size</mark>

<sup><mark style="color:$primary;">New<mark style="color:$primary;"></sup> **Subheadings**\ <mark style="color:$info;">Font (Body or Heading)</mark>\ <mark style="color:$info;">Font weight</mark>\ <mark style="color:$info;">Uppercase</mark>\ <mark style="color:$info;">Letter spacing</mark>

<sup><mark style="color:$primary;">New<mark style="color:$primary;"></sup> **Mobile navigation**\ <mark style="color:$info;">Font (Body or Heading)</mark>\ <mark style="color:$info;">Font weight</mark>\ <mark style="color:$info;">Uppercase</mark>\ <mark style="color:$info;">Uppercase secondary menu</mark>\ <mark style="color:$info;">Letter spacing</mark>\ <mark style="color:$info;">Apply letter spacing to uppercase links only</mark>\ <mark style="color:$info;">Font size</mark>\ <mark style="color:$info;">Secondary menu font size</mark>
{% endcolumn %}

{% column width="50%" %}

<div align="left" data-with-frame="true"><figure><img src="/files/2dq1sZNCTTYZPlyhOkJD" alt="" width="220"><figcaption></figcaption></figure></div>
{% endcolumn %}
{% endcolumns %}

***

## <mark style="color:$primary;">Section-level font options</mark>

<mark style="color:$info;">We updated font size settings to have more expansive size options, and applied this setting to more places.</mark>

***

{% columns fullWidth="false" %}
{% column width="50%" %} <sup><mark style="color:$primary;">New<mark style="color:$primary;"></sup> Expanded **text size ranges**\ <mark style="color:$info;">9 heading size options, including display heading sizes</mark>\ <mark style="color:$info;">10 text size options</mark>

<sup><mark style="color:$primary;">New<mark style="color:$primary;"></sup> Added **heading size options**\ <mark style="color:$info;">Product title</mark>\ <mark style="color:$info;">Product price</mark>\ <mark style="color:$info;">Page templates</mark>\ <mark style="color:$info;">Blog template</mark>\ <mark style="color:$info;">Collection banner</mark>\ <mark style="color:$info;">Collection list sections</mark>\ <mark style="color:$info;">Collection list template</mark>
{% endcolumn %}

{% column width="50%" %}

<div align="left" data-with-frame="true"><figure><img src="/files/06i5pZtNL0l69oT5MaZb" alt=""><figcaption></figcaption></figure></div>
{% endcolumn %}
{% endcolumns %}

***

<mark style="color:$info;">**Related updates**</mark>

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th></tr></thead><tbody><tr><td><sup><mark style="color:$primary;">New</mark></sup> <strong>Product title</strong> and <strong>price size</strong></td><td>Find text size options for the title and price on the product page, quick view modal, and Featured product section.</td></tr><tr><td><sup><mark style="color:$primary;">New</mark></sup> <strong>Rich text subheadings</strong></td><td><mark style="color:$info;">Updated subheadings to support multi-line text with rich formatting, including: Subheading block, Countdown banner, Newsletters, Video, Grid, and Slideshow.</mark></td></tr></tbody></table>

<mark style="color:$info;">**Note the change**</mark>

{% columns %}
{% column width="50%" %}
{% hint style="info" %}

#### Quotes section

Font settings have moved from the section-level to the blocks. Quote font size now supports wider size range
{% endhint %}
{% endcolumn %}

{% column width="50%" %}

{% endcolumn %}
{% endcolumns %}

[^1]: Headings: 32px - 64px

    Body: 15px - 22px

[^2]: Extra light: 200\
    Light: 300\
    Regular: 400\
    Medium: 500\
    Semi-bold: 600\
    Bold: 700\
    Extra bold: 800