@vaadin/vaadin-lumo-styles/src/global/typography.css

Lumo is a design system foundation for modern web applications, used by Vaadin components

/**
 * @license
 * Copyright (c) 2017 - 2026 Vaadin Ltd.
 * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
 */
:where(body),
:where(:host) {
  font-family: var(--lumo-font-family);
  font-size: var(--lumo-font-size-m);
  line-height: var(--lumo-line-height-m);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

small,
[theme~='font-size-s'] {
  font-size: var(--lumo-font-size-s);
  line-height: var(--lumo-line-height-s);
}

[theme~='font-size-xs'] {
  font-size: var(--lumo-font-size-xs);
  line-height: var(--lumo-line-height-xs);
}

:where(h1, h2, h3, h4, h5, h6) {
  font-weight: 600;
  line-height: var(--lumo-line-height-xs);
  color: var(--lumo-header-text-color);
  margin-block: 0;
}

:where(h1) {
  font-size: var(--lumo-font-size-xxxl);
}

:where(h2) {
  font-size: var(--lumo-font-size-xxl);
}

:where(h3) {
  font-size: var(--lumo-font-size-xl);
}

:where(h4) {
  font-size: var(--lumo-font-size-l);
}

:where(h5) {
  font-size: var(--lumo-font-size-m);
}

:where(h6) {
  font-size: var(--lumo-font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

p,
blockquote {
  margin-top: 0.5em;
  margin-bottom: 0.75em;
}

a {
  text-decoration: none;
}

a:where(:any-link) {
  color: var(--lumo-primary-text-color);
}

a:where(:any-link):hover {
  text-decoration: underline;
}

a:not(:any-link) {
  color: var(--lumo-disabled-text-color);
}

hr {
  display: block;
  align-self: stretch;
  height: 1px;
  border: 0;
  padding: 0;
  margin: var(--lumo-space-s) calc(var(--lumo-border-radius-m) / 2);
  background-color: var(--lumo-contrast-10pct);
}

b,
strong {
  font-weight: 600;
}

code,
pre {
  border-radius: var(--lumo-border-radius-m);
}

pre code {
  background: transparent;
}

blockquote {
  border-left: 2px solid var(--lumo-contrast-30pct);
  color: var(--lumo-secondary-text-color);
}

blockquote[dir='rtl'] {
  border-left: none;
  border-right: 2px solid var(--lumo-contrast-30pct);
}