Skip to contentPorsche Design System
You are currently viewing an earlier release of the Porsche Design System.Switch to the latest Porsche Design System documentation.
SearchGitHub repository of Porsche Design SystemOpen settings sidebar
Typography Table of Contents Classes Heading Tailwind @utility CSS classDescription.prose-heading-2xsApplies the heading style in size 2xs..prose-heading-xsApplies the heading style in size xs..prose-heading-smApplies the heading style in size sm..prose-heading-mdApplies the heading style in size md..prose-heading-lgApplies the heading style in size lg..prose-heading-xlApplies the heading style in size xl..prose-heading-2xlApplies the heading style in size 2xl..prose-heading-3xlApplies the heading style in size 3xl..prose-heading-4xlApplies the heading style in size 4xl..prose-heading-5xlApplies the heading style in size 5xl. Text Tailwind @utility CSS classDescription.prose-text-2xsApplies the text style in size 2xs..prose-text-xsApplies the text style in size xs..prose-text-smApplies the text style in size sm..prose-text-mdApplies the text style in size md..prose-text-lgApplies the text style in size lg..prose-text-xlApplies the text style in size xl..prose-text-2xlApplies the text style in size 2xl..prose-text-3xlApplies the text style in size 3xl..prose-text-4xlApplies the text style in size 4xl..prose-text-5xlApplies the text style in size 5xl. Display Tailwind @utility CSS classDescription.prose-display-smApplies the display style in size sm..prose-display-mdApplies the display style in size md..prose-display-lgApplies the display style in size lg. Variables Font Family Tailwind CSS variableTailwind CSS classDescriptionValue--font-porsche-next.font-porsche-nextApplies the Porsche Next font family along with fallback fonts. Automatically swaps to the locale-specific CJK stack (Simplified Chinese, Traditional Chinese, Japanese, Korean) via :lang() based on the nearest lang attribute.var(--_font-porsche-next-dynamic)--font-sans.font-sansAliases the Tailwind --font-sans variable to --font-porsche-next, so the built-in .font-sans utility automatically applies the Porsche Next typeface.--theme(--font-porsche-next) Font Weight Tailwind CSS variableTailwind CSS classDescriptionValue--font-weight-normal.font-normalApplies the regular font weight optimized for the Porsche Next typeface.400--font-weight-semibold.font-semiboldApplies the semi-bold font weight optimized for the Porsche Next typeface.600--font-weight-bold.font-boldApplies the bold font weight optimized for the Porsche Next typeface.700 Line Height Tailwind CSS variableTailwind CSS classDescriptionValue--leading-normal.leading-normalApplies a dynamic default line height specifically optimized for the Porsche Next typeface.calc(6px + 2.125ex) Typescale Tailwind CSS variableTailwind CSS classDescriptionValue--text-2xs.text-2xsApplies the 2x-small font size and line height optimized for the Porsche Next typeface..75rem--text-xs.text-xsApplies the x-small font size and line height optimized for the Porsche Next typeface..875rem--text-sm.text-smApplies the small font size and line height optimized for the Porsche Next typeface.1rem--text-md.text-mdApplies the medium font size and line height optimized for the Porsche Next typeface.clamp(1.13rem, 0.21vw + 1.08rem, 1.33rem)--text-lg.text-lgApplies the large font size and line height optimized for the Porsche Next typeface.clamp(1.27rem, 0.51vw + 1.16rem, 1.78rem)--text-xl.text-xlApplies the x-large font size and line height optimized for the Porsche Next typeface.clamp(1.42rem, 0.94vw + 1.23rem, 2.37rem)--text-2xl.text-2xlApplies the 2x-large font size and line height optimized for the Porsche Next typeface.clamp(1.6rem, 1.56vw + 1.29rem, 3.16rem)--text-3xl.text-3xlApplies the 3x-large font size and line height optimized for the Porsche Next typeface.clamp(1.8rem, 2.41vw + 1.32rem, 4.21rem)--text-4xl.text-4xlApplies the 4x-large font size and line height optimized for the Porsche Next typeface.clamp(2.03rem, 3.58vw + 1.31rem, 5.61rem)--text-5xl.text-5xlApplies the 5x-large font size and line height optimized for the Porsche Next typeface.clamp(2.28rem, 5.2vw + 1.24rem, 7.48rem)
Global settingsColor SchemeAll color tokens use the light-dark() CSS function. Set the theme via the CSS color-scheme property: light for light mode, dark for dark mode, or light dark to follow the user's system preference.LightDarkLight DarkDirectionThe dir global attribute in HTML changes the direction of text and other content within an element. It's most often used on the <html> tag to set the entire page's direction, which is crucial for supporting languages that are written from right to left (RTL), such as Arabic and Hebrew. For example, using <html dir="rtl"> makes the entire page display from right to left, adjusting the layout and text flow accordingly.LTR (left-to-right)RTL (right-to-left)Text ZoomTo ensure accessibility and comply with WCAG 2.2 AA standards, it is mandatory for web content to support text resizing up to at least 200% without loss of content or functionality. Using relative units like rem is a best practice for achieving this, as they allow the text to scale uniformly based on the user's browser settings.100%130%150%200%