Regione Toscana Design System

Typography 

<div class="rtds-p-5">
    <div class="rtds-pb-5 rtds-mb-4 rtds-grid rtds-gap-2">
        <div class="rtds-grid rtds-gap-2">
            <h2 class="rtds-text-4xl rtds-font-bold">Design system font</h2>
            <p>Custom Typography utilities are available in the design system.</p>
            <p>Used together with Tailwind typographic utilities classes.</p>
        </div>
        <div class="rtds-flex rtds-gap-14">

            <div>
                <p class="rtds-text-2xl">Open Sans</p>

                <p class="rtds-font-regular">regular 400</p>

                <p class="rtds-font-semibold">semibold 500</p>

                <p class="rtds-font-bold">bold 700</p>

            </div>

        </div>
    </div>
    <div class="rtds-grid rtds-gap-12">
        <h2 class="rtds-text-4xl rtds-font-bold">Styles</h2>

        <div class="rtds-grid rtds-gap-8">
            <div class="rtds-grid rtds-gap-2">
                <h3 class="rtds-text-2xl rtds-font-bold">Headings</h3>
                <p>Heading element styles</p>
            </div>

            <div class="rtds-grid rtds-gap-2">
                <h1 class="rtds-heading-1">Heading 1</strong></h1>
                <p>classes: <strong>rtds-heading-1</strong></p>
                <p>font: Open Sans</p>
                <p>font size: 36px</p>
            </div>

            <div class="rtds-grid rtds-gap-2">
                <h2 class="rtds-heading-2">Heading 2</strong></h2>
                <p>classes: <strong>rtds-heading-2</strong></p>
                <p>font: Open Sans</p>
                <p>font size: 24px</p>
            </div>

            <div class="rtds-grid rtds-gap-2">
                <h3 class="rtds-heading-3">Heading 3</strong></h3>
                <p>classes: <strong>rtds-heading-3</strong></p>
                <p>font: Open Sans</p>
                <p>font size: 20px</p>
            </div>

            <div class="rtds-grid rtds-gap-2">
                <h4 class="rtds-heading-4">Heading 4</strong></h4>
                <p>classes: <strong>rtds-heading-4</strong></p>
                <p>font: Open Sans</p>
                <p>font size: 18px</p>
            </div>

            <div class="rtds-grid rtds-gap-2">
                <h5 class="rtds-heading-5">Heading 5</strong></h5>
                <p>classes: <strong>rtds-heading-5</strong></p>
                <p>font: Open Sans</p>
                <p>font size: 16px</p>
            </div>

            <div class="rtds-grid rtds-gap-2">
                <h6 class="rtds-heading-6">Heading 6</strong></h6>
                <p>classes: <strong>rtds-heading-6</strong></p>
                <p>font: Open Sans</p>
                <p>font size: 14px</p>
            </div>

            <div class="rtds-grid rtds-gap-2">
                <h1 class="rtds-text-40px">Custom: 40px</strong></h1>
                <p>classes: <strong>rtds-text-40px</strong></p>
                <p>font: Open Sans</p>
                <p>font size: 40px</p>
            </div>

            <div class="rtds-grid rtds-gap-2">
                <h1 class="rtds-text-42px">Custom: 42px</strong></h1>
                <p>classes: <strong>rtds-text-42px</strong></p>
                <p>font: Open Sans</p>
                <p>font size: 42px</p>
            </div>

        </div>

        <div class="rtds-grid rtds-gap-8">
            <div class="rtds-grid rtds-gap-2">
                <h3 class="rtds-text-2xl rtds-font-bold">Display Headings</h3>
                <p>Heading-like styles</p>
            </div>

            <div class="rtds-grid rtds-gap-2">
                <p class="rtds-display-heading-1">Display 1</strong></p>
                <p>classes: <strong>rtds-display-heading-1</strong></p>
                <p>font: Open Sans</p>
                <p>font size: 8rem - 128px</p>
            </div>

            <div class="rtds-grid rtds-gap-2">
                <p class="rtds-display-heading-2">Display 2</strong></p>
                <p>classes: <strong>rtds-display-heading-2</strong></p>
                <p>font: Open Sans</p>
                <p>font size: 6rem - 96px</p>
            </div>

            <div class="rtds-grid rtds-gap-2">
                <p class="rtds-display-heading-3">Display 3</strong></p>
                <p>classes: <strong>rtds-display-heading-3</strong></p>
                <p>font: Open Sans</p>
                <p>font size: 4.5rem - 72px</p>
            </div>

            <div class="rtds-grid rtds-gap-2">
                <p class="rtds-display-heading-4">Display 4</strong></p>
                <p>classes: <strong>rtds-display-heading-4</strong></p>
                <p>font: Open Sans</p>
                <p>font size: 3.75rem - 60px</p>
            </div>

            <div class="rtds-grid rtds-gap-2">
                <p class="rtds-display-heading-5">Display 5</strong></p>
                <p>classes: <strong>rtds-display-heading-5</strong></p>
                <p>font: Open Sans</p>
                <p>font size: 3rem - 48px</p>
            </div>

            <div class="rtds-grid rtds-gap-2">
                <p class="rtds-display-heading-6">Display 6</strong></p>
                <p>classes: <strong>rtds-display-heading-6</strong></p>
                <p>font: Open Sans</p>
                <p>font size: 2.25rem - 36px</p>
            </div>

        </div>

        <div class="rtds-grid rtds-gap-8">
            <div class="rtds-grid rtds-gap-2">
                <h3 class="rtds-text-2xl rtds-font-bold">Body</h3>
                <p>Page body styles</p>
            </div>

            <div class="rtds-grid rtds-gap-2">
                <p class="rtds-body-xs">Body xs</strong></p>
                <p>classes: <strong>rtds-body-xs</strong></p>
                <p>font: Open Sans</p>
                <p>font size: 0.75rem - 12px</p>
            </div>

            <div class="rtds-grid rtds-gap-2">
                <p class="rtds-body-sm">Body sm</strong></p>
                <p>classes: <strong>rtds-body-sm</strong></p>
                <p>font: Open Sans</p>
                <p>font size: 14px</p>
            </div>

            <div class="rtds-grid rtds-gap-2">
                <p class="rtds-body">Body (principale)</strong></p>
                <p>classes: <strong>rtds-body</strong></p>
                <p>font: Open Sans</p>
                <p>font size: 16px</p>
            </div>

            <div class="rtds-grid rtds-gap-2">
                <p class="rtds-body-lg">Body lg</strong></p>
                <p>classes: <strong>rtds-body-lg</strong></p>
                <p>font: Open Sans</p>
                <p>font size: 18px</p>
            </div>

            <div class="rtds-grid rtds-gap-2">
                <p class="rtds-body-xl">Body xl</strong></p>
                <p>classes: <strong>rtds-body-xl</strong></p>
                <p>font: Open Sans</p>
                <p>font size: 20px</p>
            </div>

        </div>

    </div>
</div>
 
<div class="rtds-p-5">
    <div class="rtds-pb-5 rtds-mb-4 rtds-grid rtds-gap-2">
        <div class="rtds-grid rtds-gap-2">
            <h2 class="rtds-text-4xl rtds-font-bold">Design system font</h2>
            <p>Custom Typography utilities are available in the design system.</p>
            <p>Used together with Tailwind typographic utilities classes.</p>
        </div>
        <div class="rtds-flex rtds-gap-14">
        {% for font in fonts %}
        <div>
            <p class="rtds-text-2xl">{{ font.name }}</p>
            {% for weight in font.weights %}
            <p class="rtds-font-{{ weight.label }}">{{ weight.label }} {{ weight.value }}</p>
            {% endfor %}
        </div>
        {% endfor %}
        </div>
    </div>
    <div class="rtds-grid rtds-gap-12">
         <h2 class="rtds-text-4xl rtds-font-bold">Styles</h2>
        {% for style in styles %}
         <div class="rtds-grid rtds-gap-8">
            <div class="rtds-grid rtds-gap-2">
                <h3 class="rtds-text-2xl rtds-font-bold">{{ style.name }}</h3>
                <p>{{ style.description }}</p>
            </div>
            {% for typo in style.typos %}
                <div class="rtds-grid rtds-gap-2">
                    <{% if typo.tag %}{{ typo.tag }}{% else %}p{% endif %} class="{{ typo.classes }}">{{ typo.name }}</strong></{%- if typo.tag -%}{{ typo.tag }}{% else %}p{% endif %}>
                    <p>classes: <strong>{{ typo.classes }}</strong></p>
                    <p>font: {{ typo.font }}</p>
                    <p>font size: {{ typo.size }}</p>
                </div>
            {% endfor %}
            </div>
        {% endfor %}
    </div>
</div>
 
{
  "fonts": [
    {
      "name": "Open Sans",
      "weights": [
        {
          "label": "regular",
          "value": 400
        },
        {
          "label": "semibold",
          "value": 500
        },
        {
          "label": "bold",
          "value": 700
        }
      ]
    }
  ],
  "styles": [
    {
      "name": "Headings",
      "description": "Heading element styles",
      "typos": [
        {
          "name": "Heading 1",
          "tag": "h1",
          "classes": "rtds-heading-1",
          "font": "Open Sans",
          "size": "36px"
        },
        {
          "name": "Heading 2",
          "tag": "h2",
          "classes": "rtds-heading-2",
          "font": "Open Sans",
          "size": "24px"
        },
        {
          "name": "Heading 3",
          "tag": "h3",
          "classes": "rtds-heading-3",
          "font": "Open Sans",
          "size": "20px"
        },
        {
          "name": "Heading 4",
          "tag": "h4",
          "classes": "rtds-heading-4",
          "font": "Open Sans",
          "size": "18px"
        },
        {
          "name": "Heading 5",
          "tag": "h5",
          "classes": "rtds-heading-5",
          "font": "Open Sans",
          "size": "16px"
        },
        {
          "name": "Heading 6",
          "tag": "h6",
          "classes": "rtds-heading-6",
          "font": "Open Sans",
          "size": "14px"
        },
        {
          "name": "Custom: 40px",
          "tag": "h1",
          "classes": "rtds-text-40px",
          "font": "Open Sans",
          "size": "40px"
        },
        {
          "name": "Custom: 42px",
          "tag": "h1",
          "classes": "rtds-text-42px",
          "font": "Open Sans",
          "size": "42px"
        }
      ]
    },
    {
      "name": "Display Headings",
      "description": "Heading-like styles",
      "typos": [
        {
          "name": "Display 1",
          "classes": "rtds-display-heading-1",
          "font": "Open Sans",
          "size": "8rem - 128px"
        },
        {
          "name": "Display 2",
          "classes": "rtds-display-heading-2",
          "font": "Open Sans",
          "size": "6rem - 96px"
        },
        {
          "name": "Display 3",
          "classes": "rtds-display-heading-3",
          "font": "Open Sans",
          "size": "4.5rem - 72px"
        },
        {
          "name": "Display 4",
          "classes": "rtds-display-heading-4",
          "font": "Open Sans",
          "size": "3.75rem - 60px"
        },
        {
          "name": "Display 5",
          "classes": "rtds-display-heading-5",
          "font": "Open Sans",
          "size": "3rem - 48px"
        },
        {
          "name": "Display 6",
          "classes": "rtds-display-heading-6",
          "font": "Open Sans",
          "size": "2.25rem - 36px"
        }
      ]
    },
    {
      "name": "Body",
      "description": "Page body styles",
      "typos": [
        {
          "name": "Body xs",
          "classes": "rtds-body-xs",
          "font": "Open Sans",
          "size": "0.75rem - 12px"
        },
        {
          "name": "Body sm",
          "classes": "rtds-body-sm",
          "font": "Open Sans",
          "size": "14px"
        },
        {
          "name": "Body (principale)",
          "classes": "rtds-body",
          "font": "Open Sans",
          "size": "16px"
        },
        {
          "name": "Body lg",
          "classes": "rtds-body-lg",
          "font": "Open Sans",
          "size": "18px"
        },
        {
          "name": "Body xl",
          "classes": "rtds-body-xl",
          "font": "Open Sans",
          "size": "20px"
        }
      ]
    }
  ]
}
  • Content: 
    /**
 * TYPOGRAPHY
 *
*/
/* Heading typography */
@layer base {
    .rtds-heading-1 {
        @apply rtds-text-2xl lg:rtds-text-3xl xl:rtds-text-4xl 2xl:rtds-text-5xl rtds-font-bold rtds-font-sans;
    }

    .rtds-heading-2 {
        @apply rtds-text-xl lg:rtds-text-2xl xl:rtds-text-2xl 2xl:rtds-text-3xl rtds-font-bold rtds-font-sans;
    }
    
    .rtds-heading-3 {
        @apply rtds-text-lg lg:rtds-text-xl xl:rtds-text-xl 2xl:rtds-text-xl rtds-font-bold rtds-font-sans;
    }
    
    .rtds-heading-4 {
        @apply rtds-text-base lg:rtds-text-lg xl:rtds-text-lg 2xl:rtds-text-lg rtds-font-bold rtds-font-sans;
    }
    
    .rtds-heading-5 {
        @apply rtds-text-sm lg:rtds-text-base xl:rtds-text-base 2xl:rtds-text-base rtds-font-bold rtds-font-sans;
    }
    
    .rtds-heading-6 {
        @apply rtds-text-xs lg:rtds-text-sm xl:rtds-text-sm 2xl:rtds-text-sm rtds-font-bold rtds-font-sans;
    }
    
    /* Display Heading typography */
    .rtds-display-heading-1 {
        @apply rtds-text-7xl md:rtds-text-8xl lg:rtds-text-9xl rtds-font-sans;
    }
    
    .rtds-display-heading-2 {
        @apply rtds-text-6xl md:rtds-text-7xl lg:rtds-text-8xl rtds-font-sans;
    }
    
    .rtds-display-heading-3 {
        @apply rtds-text-5xl md:rtds-text-6xl lg:rtds-text-7xl rtds-font-sans;
    }
    
    .rtds-display-heading-4 {
        @apply rtds-text-4xl md:rtds-text-5xl lg:rtds-text-6xl rtds-font-sans;
    }
    
    .rtds-display-heading-5 {
        @apply rtds-text-3xl md:rtds-text-4xl lg:rtds-text-5xl rtds-font-sans;
    }
    
    .rtds-display-heading-6 {
        @apply rtds-text-2xl md:rtds-text-3xl lg:rtds-text-4xl rtds-font-sans;
    }

    /* Body typography */
    .rtds-body-xs {
        @apply rtds-text-xs rtds-font-sans rtds-font-normal rtds-leading-normal;
    }

    .rtds-body-xs-bold {
        @apply rtds-text-xs rtds-font-sans rtds-font-bold rtds-leading-normal;
    }

    .rtds-body-xs-medium {
        @apply rtds-text-xs rtds-font-sans rtds-font-medium rtds-leading-normal;
    }

    .rtds-body-sm {
        @apply rtds-text-sm rtds-font-sans rtds-font-normal rtds-leading-medium;
    }

    .rtds-body {
        @apply rtds-text-base lg:rtds-text-base xl:rtds-text-lg 2xl:rtds-text-lg rtds-font-sans rtds-font-normal rtds-leading-relaxed;
    }

    .rtds-body-lg {
        @apply rtds-text-base lg:rtds-text-lg rtds-font-sans rtds-font-normal rtds-leading-medium;
    }

    .rtds-body-xl {
        @apply rtds-text-xl rtds-font-sans rtds-font-normal rtds-leading-normal;
    }
}
  • URL: /components/raw/typography/typography.css
  • Filesystem Path: components/01-design-system/tokens/typography/typography.css
  • Size: 2.5 KB
  • Handle: @typography
  • Preview:
  • Filesystem Path: components/01-design-system/tokens/typography/typography.njk

Typographic rules and classes for interface

Font size are defined in rem

Line height is unitless value eg: 1, 1.25, 1.375, 1.5, 1.625, 2