Regione Toscana Design System Design System Servizi

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-medium">medium 500</p>

                <p class="rtds-font-semibold">semibold 600</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": "medium",
          "value": 500
        },
        {
          "label": "semibold",
          "value": 600
        },
        {
          "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 */
.rtds-heading-1 {
    font-family: var(--fontfamily-sans), sans-serif;
    font-size: var(--fontsize-text-2xl);
    font-weight: 700;
}
@media (min-width: 1024px) {
    .rtds-heading-1 {
        font-size: 2rem;
        line-height: 1.2;
    }
}
@media (min-width: 1280px) {
    .rtds-heading-1 {
        font-size: var(--fontsize-text-4xl);
    }
}
@media (min-width: 1536px) {
    .rtds-heading-1 {
        font-size: var(--fontsize-text-5xl);
    }
}
.rtds-heading-2 {
    font-family: var(--fontfamily-sans), sans-serif;
    font-size: var(--fontsize-text-xl);
    font-weight: 700;
}
@media (min-width: 1024px) {
    .rtds-heading-2 {
        font-size: var(--fontsize-text-2xl);
    }
}
@media (min-width: 1280px) {
    .rtds-heading-2 {
        font-size: var(--fontsize-text-2xl);
    }
}
@media (min-width: 1536px) {
    .rtds-heading-2 {
        font-size: 2rem;
        line-height: 1.2;
    }
}
.rtds-heading-3 {
    font-family: var(--fontfamily-sans), sans-serif;
    font-size: var(--fontsize-text-lg);
    font-weight: 700;
}
@media (min-width: 1024px) {
    .rtds-heading-3 {
        font-size: var(--fontsize-text-xl);
    }
}
@media (min-width: 1280px) {
    .rtds-heading-3 {
        font-size: var(--fontsize-text-xl);
    }
}
@media (min-width: 1536px) {
    .rtds-heading-3 {
        font-size: var(--fontsize-text-xl);
    }
}
.rtds-heading-4 {
    font-family: var(--fontfamily-sans), sans-serif;
    font-size: var(--fontsize-text-base);
    font-weight: 700;
}
@media (min-width: 1024px) {
    .rtds-heading-4 {
        font-size: var(--fontsize-text-lg);
    }
}
@media (min-width: 1280px) {
    .rtds-heading-4 {
        font-size: var(--fontsize-text-lg);
    }
}
@media (min-width: 1536px) {
    .rtds-heading-4 {
        font-size: var(--fontsize-text-lg);
    }
}
.rtds-heading-5 {
    font-family: var(--fontfamily-sans), sans-serif;
    font-size: var(--fontsize-text-sm);
    font-weight: 700;
}
@media (min-width: 1024px) {
    .rtds-heading-5 {
        font-size: var(--fontsize-text-base);
    }
}
@media (min-width: 1280px) {
    .rtds-heading-5 {
        font-size: var(--fontsize-text-base);
    }
}
@media (min-width: 1536px) {
    .rtds-heading-5 {
        font-size: var(--fontsize-text-base);
    }
}
.rtds-heading-6 {
    font-family: var(--fontfamily-sans), sans-serif;
    font-size: var(--fontsize-text-xs);
    font-weight: 700;
}
@media (min-width: 1024px) {
    .rtds-heading-6 {
        font-size: var(--fontsize-text-sm);
    }
}
@media (min-width: 1280px) {
    .rtds-heading-6 {
        font-size: var(--fontsize-text-sm);
    }
}
@media (min-width: 1536px) {
    .rtds-heading-6 {
        font-size: var(--fontsize-text-sm);
    }
}
/* Display Heading typography */
.rtds-display-heading-1 {
    font-family: var(--fontfamily-sans), sans-serif;
    font-size: var(--fontsize-text-7xl);
}
@media (min-width: 768px) {
    .rtds-display-heading-1 {
        font-size: var(--fontsize-text-8xl);
    }
}
@media (min-width: 1024px) {
    .rtds-display-heading-1 {
        font-size: var(--fontsize-text-9xl);
    }
}
.rtds-display-heading-2 {
    font-family: var(--fontfamily-sans), sans-serif;
    font-size: var(--fontsize-text-6xl);
}
@media (min-width: 768px) {
    .rtds-display-heading-2 {
        font-size: var(--fontsize-text-7xl);
    }
}
@media (min-width: 1024px) {
    .rtds-display-heading-2 {
        font-size: var(--fontsize-text-8xl);
    }
}
.rtds-display-heading-3 {
    font-family: var(--fontfamily-sans), sans-serif;
    font-size: var(--fontsize-text-5xl);
}
@media (min-width: 768px) {
    .rtds-display-heading-3 {
        font-size: var(--fontsize-text-6xl);
    }
}
@media (min-width: 1024px) {
    .rtds-display-heading-3 {
        font-size: var(--fontsize-text-7xl);
    }
}
.rtds-display-heading-4 {
    font-family: var(--fontfamily-sans), sans-serif;
    font-size: var(--fontsize-text-4xl);
}
@media (min-width: 768px) {
    .rtds-display-heading-4 {
        font-size: var(--fontsize-text-5xl);
    }
}
@media (min-width: 1024px) {
    .rtds-display-heading-4 {
        font-size: var(--fontsize-text-6xl);
    }
}
.rtds-display-heading-5 {
    font-family: var(--fontfamily-sans), sans-serif;
    font-size: 2rem;
    line-height: 1.2;
}
@media (min-width: 768px) {
    .rtds-display-heading-5 {
        font-size: var(--fontsize-text-4xl);
    }
}
@media (min-width: 1024px) {
    .rtds-display-heading-5 {
        font-size: var(--fontsize-text-5xl);
    }
}
.rtds-display-heading-6 {
    font-family: var(--fontfamily-sans), sans-serif;
    font-size: var(--fontsize-text-2xl);
}
@media (min-width: 768px) {
    .rtds-display-heading-6 {
        font-size: 2rem;
        line-height: 1.2;
    }
}
@media (min-width: 1024px) {
    .rtds-display-heading-6 {
        font-size: var(--fontsize-text-4xl);
    }
}
/* Body typography */
.rtds-body-xs {
    font-family: var(--fontfamily-sans), sans-serif;
    font-size: var(--fontsize-text-xs);
    font-weight: 400;
    line-height: 1.5;
}
.rtds-body-xs-bold {
    font-family: var(--fontfamily-sans), sans-serif;
    font-size: var(--fontsize-text-xs);
    line-height: 1.5;
    font-weight: 700;
}
.rtds-body-xs-medium {
    font-family: var(--fontfamily-sans), sans-serif;
    font-size: var(--fontsize-text-xs);
    font-weight: 500;
    line-height: 1.5;
}
.rtds-body-sm {
    font-family: var(--fontfamily-sans), sans-serif;
    font-size: var(--fontsize-text-sm);
    font-weight: 400;
    line-height: 1.57;
}
.rtds-body {
    font-family: var(--fontfamily-sans), sans-serif;
    font-size: var(--fontsize-text-base);
    font-weight: 400;
    line-height: 1.625;
}
@media (min-width: 1024px) {
    .rtds-body {
        font-size: var(--fontsize-text-base);
    }
}
@media (min-width: 1280px) {
    .rtds-body {
        font-size: var(--fontsize-text-lg);
    }
}
@media (min-width: 1536px) {
    .rtds-body {
        font-size: var(--fontsize-text-lg);
    }
}
.rtds-body-lg {
    font-family: var(--fontfamily-sans), sans-serif;
    font-size: var(--fontsize-text-base);
    font-weight: 400;
    line-height: 1.57;
}
@media (min-width: 1024px) {
    .rtds-body-lg {
        font-size: var(--fontsize-text-lg);
    }
}
.rtds-body-xl {
    font-family: var(--fontfamily-sans), sans-serif;
    font-size: var(--fontsize-text-xl);
    font-weight: 400;
    line-height: 1.5;
}
  • URL: /components/raw/typography/typography.built.css
  • Filesystem Path: components/01-design-system/tokens/typography/typography.built.css
  • Size: 6.4 KB
  • 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

Tipografia

Sistema tipografico del Design System RTDS. Le dimensioni sono definite in rem con line-height senza unità di misura. Il font di sistema è Open Sans (pesi: 400, 500, 700).

Prefisso classi

Tutte le classi tipografiche usano il prefisso rtds-: rtds-heading-1, rtds-body, ecc.

Headings

Classi per i titoli delle sezioni. Responsive: la dimensione aumenta sui breakpoint lg e xl.

Classe Size base Size lg/xl Line-height Utilizzo
rtds-heading-1 36px (2.25rem) 48px+ 1.25 Titolo principale pagina (<h1>)
rtds-heading-2 24px (1.5rem) 30px+ 1.375 Titolo sezione (<h2>)
rtds-heading-3 20px (1.25rem) 24px 1.375 Sottotitolo sezione (<h3>)
rtds-heading-4 18px (1.125rem) 20px 1.5 Titolo card, accordion (<h4>)
rtds-heading-5 16px (1rem) 18px 1.5 Titolo piccolo (<h5>)
rtds-heading-6 14px (0.875rem) 16px 1.5 Etichetta, caption (<h6>) 
<h1 class="rtds-heading-1">Titolo pagina</h1>
<h2 class="rtds-heading-2">Titolo sezione</h2>
<h3 class="rtds-heading-3">Sottotitolo</h3>

Display Headings

Classi per titoli decorativi di grandi dimensioni. Usare per hero section, landing page, elementi grafici.

Classe Size base Size max Utilizzo
rtds-display-heading-1 128px 9xl Hero principale, impatto visivo massimo
rtds-display-heading-2 96px 8xl Hero secondario
rtds-display-heading-3 72px 7xl Titolo grande
rtds-display-heading-4 60px 6xl Titolo molto grande
rtds-display-heading-5 48px 5xl Titolo grande
rtds-display-heading-6 36px 4xl Titolo medio-grande 
<p class="rtds-display-heading-1">Grande titolo decorativo</p>

Body Text

Classi per il testo del corpo. Includono font-size, line-height e font-family appropriati.

Classe Size Line-height Utilizzo
rtds-body-xs 12px (0.75rem) 1.5 Caption, note legali, testo molto piccolo
rtds-body-sm 14px (0.875rem) 1.625 Testo secondario, metadati, label
rtds-body 16px (1rem) 1.625 Testo corpo principale
rtds-body-lg 18px (1.125rem) 1.625 Testo introduttivo, lead paragraph
rtds-body-xl 20px (1.25rem) 1.625 Testo molto leggibile, focus content

Varianti con peso font

Per ogni taglia body sono disponibili varianti di peso:

  • rtds-body-xs-bold — 12px, font-weight 700
  • rtds-body-xs-medium — 12px, font-weight 500
<p class="rtds-body">Testo corpo normale</p>
<p class="rtds-body-sm">Testo secondario</p>
<span class="rtds-body-xs-bold">Label in grassetto</span>

Pesi Font

Classe Tailwind Peso Utilizzo
rtds-font-normal 400 Testo corpo, paragrafi
rtds-font-medium 500 Enfasi leggera, label
rtds-font-semibold 600 Enfasi medio-alta, sottotitoli
rtds-font-bold 700 Titoli, CTA, etichette importanti

Line Height

Valori unitless usati nel sistema:

Valore Classe Utilizzo
1 rtds-leading-none Titoli display molto grandi
1.25 rtds-leading-tight Heading grandi
1.375 rtds-leading-snug Heading medi
1.5 rtds-leading-normal Heading piccoli, body
1.625 rtds-leading-relaxed Body text, leggibilità ottimale
2 rtds-leading-loose Testo molto spaziato

CSS Custom Properties

Le impostazioni tipografiche sono definite in public/css/custom-properties.css e consumate da tailwind.config.js.

Font family

Variabile Valore
--fontfamily-sans 'Open Sans'

Font size

Variabile Valore Classe Tailwind equivalente
--fontsize-text-xs 0.75rem (12px) rtds-text-xs
--fontsize-text-sm 0.875rem (14px) rtds-text-sm
--fontsize-text-base 1rem (16px) rtds-text-base
--fontsize-text-lg 1.125rem (18px) rtds-text-lg
--fontsize-text-xl 1.25rem (20px) rtds-text-xl
--fontsize-text-2xl 1.5rem (24px) rtds-text-2xl
--fontsize-text-3xl 1.875rem (30px) rtds-text-3xl
--fontsize-text-4xl 2.25rem (36px) rtds-text-4xl
--fontsize-text-5xl 3rem (48px) rtds-text-5xl
--fontsize-text-6xl 3.75rem (60px) rtds-text-6xl
--fontsize-text-7xl 4.5rem (72px) rtds-text-7xl
--fontsize-text-8xl 6rem (96px) rtds-text-8xl
--fontsize-text-9xl 8rem (128px) rtds-text-9xl
--fontsize-text-40px 2.5rem (40px) —
--fontsize-text-42px 2.625rem (42px) —

Note

  • Le classi tipografiche applicano solo dimensione e line-height — colore e spaziatura si aggiungono separatamente
  • Per testi in articoli/contenuto CMS usare rtds-article-body (vedi article-body-utilities)
  • Per testi su sfondi scuri combinare con rtds-content-inverse