Porsche Design System

Typography

Table of Contents

Display
Heading
Text

The Porsche Design System Tailwind theme includes the custom @utility CSS classes .prose-display-*, .prose-heading-* and .prose-text-* to style headings and paragraphs consistently.

Additionally, it customizes Tailwind variables such as --font-*, --leading-* and --text-*, which affect multiple Tailwind classes including .font-*, .leading-*, .text-* and others.

Display#

.prose-display-lg

.prose-display-md

.prose-display-sm

Open in Stackblitz

<!doctype html>
<html lang="en" class="auto">
<head>
  <title></title>
</head>
<body class="bg-base">

<div class="grid gap-fluid-md">
  <h3 class="prose-display-lg">
    .prose-display-lg
  </h3>
  <h3 class="prose-display-md">
    .prose-display-md
  </h3>
  <h3 class="prose-display-sm">
    .prose-display-sm
  </h3>
</div>
<script>

</script>
</body>
</html>

Heading#

.prose-heading-2xl

.prose-heading-xl

.prose-heading-lg

.prose-heading-md

.prose-heading-sm

Open in Stackblitz

<!doctype html>
<html lang="en" class="auto">
<head>
  <title></title>
</head>
<body class="bg-base">

<div class="grid gap-fluid-md">
  <h3 class="prose-heading-2xl">
    .prose-heading-2xl
  </h3>
  <h3 class="prose-heading-xl">
    .prose-heading-xl
  </h3>
  <h3 class="prose-heading-lg">
    .prose-heading-lg
  </h3>
  <h3 class="prose-heading-md">
    .prose-heading-md
  </h3>
  <h3 class="prose-heading-sm">
    .prose-heading-sm
  </h3>
</div>
<script>

</script>
</body>
</html>

Text#

.prose-text-xl

.prose-text-lg

.prose-text-md

.prose-text-sm

.prose-text-xs

.prose-text-2xs

Open in Stackblitz

<!doctype html>
<html lang="en" class="auto">
<head>
  <title></title>
</head>
<body class="bg-base">

<div class="grid gap-fluid-md">
  <p class="prose-text-xl hyphens-auto">
    .prose-text-xl
  </p>
  <p class="prose-text-lg hyphens-auto">
    .prose-text-lg
  </p>
  <p class="prose-text-md hyphens-auto">
    .prose-text-md
  </p>
  <p class="prose-text-sm hyphens-auto">
    .prose-text-sm
  </p>
  <p class="prose-text-xs hyphens-auto">
    .prose-text-xs
  </p>
  <p class="prose-text-2xs hyphens-auto">
    .prose-text-2xs
  </p>
</div>
<script>

</script>
</body>
</html>