Typography Default Resets

The Phenix Design System includes a comprehensive set of typography resets to ensure consistent text rendering across different browsers and platforms. These resets provide a clean foundation upon which to build your website or application.

Overview

The typography reset in Phenix Design System addresses several key areas:

• Base font settings for HTML and body
• Headings (h1-h6) reset
• Paragraph settings
• Inline text elements (strong, small, links, etc.)
• Lists
• Responsive font sizing

These resets are applied automatically when you include the Phenix framework, creating a consistent typographic baseline for your project.

Base Font Settings

The framework sets default font properties for the html and body elements:

html, body {
  direction: $direction;
  font-size: var(--current-rem);
  line-height: var(--line-height);
  hanging-punctuation: first last;
  font-family: var(--secondary-font), "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-variant-numeric: tabular-nums;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

body {
  margin: 0;
  padding: 0;
  position: relative;
  background: var(--body-bg);
  color: var(--typography-color);
}

Key features:

• Font smoothing for cleaner text rendering
• Support for emoji fonts
• Numeric characters set to tabular form for better alignment
• Direction support for RTL/LTR layouts
• Font size based on responsive REM units

Headings Reset

All heading elements (h1-h6) receive consistent default styling:

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  text-wrap: pretty;
  margin-bottom: .5rem;
  font-family: var(--primary-font);
  font-weight: var(--strong-weight);
}

Key features:

• Zero top margin with a small bottom margin
• Uses primary font family by default
• Consistent bold weight
• Modern text wrapping for better readability
• Inherits color for nested links

Paragraph Reset

Paragraphs receive simple, clean styling:

p {
  text-wrap: pretty;
  margin-bottom: 1rem;
}

p:last-child {
  margin-bottom: 0;
}

The last paragraph in a container has its bottom margin removed to prevent unwanted spacing.

Inline Text Elements

Various inline text elements receive specific resets:

/* Strong and Bold */
b, strong {
  font-weight: var(--strong-weight);
}

/* Small Text */
small {
  font-size: 0.8rem;
}

/* Italic Text */
dfn {
  font-style: italic;
}

/* Code, Keyboard, etc. */
pre, code, kbd, samp {
  font-size: 1em;
  font-family: inherit;
}

/* Subscript and Superscript */
sub, sup {
  line-height: 0;
  font-size: 0.75rem;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25rem;
}

sup {
  top: -0.5rem;
}

Links Reset

Links receive special treatment to ensure consistent styling:

a {
  color: var(--links-color, inherit);
}

a:where(:not(.wp-element-button):not([class*="color-"])) {
  color: var(--links-color, inherit);
}

a, .reset-link, .px-navigation a, .btn {
  text-decoration: none !important;
  -webkit-text-decoration-skip: objects;
  text-decoration-skip: objects;
}

The framework removes underlines from links by default but preserves accessible color changes.

Lists Reset

Lists (ul, ol, dl) receive standardized spacing and styling:

ul, ol {
  margin-top: 0;
  padding-inline: REM(25);
}

dl {
  margin-bottom: REM(25);
}

dt {
  font-weight: 700;
}

dt + dd {
  margin-top: .25rem;
}

dt:not(:first-child) {
  margin-top: .5rem;
}

dd {
  margin-inline: 0;
  padding-inline: REM(15);
}

Responsive Font Sizing

Phenix Design System implements a responsive REM base that adjusts the root font size based on screen size:

:root {
  --current-rem: var(--rem-xs);
  
  /* Small Screens */
  @include small() {
    --current-rem: var(--rem-sm);
  }
  
  /* Medium Screens */
  @include medium() {
    --current-rem: var(--rem-md);
  }
  
  /* Large Screens */
  @include large() {
    --current-rem: var(--rem-lg);
  }
  
  /* xLarge Screens */
  @include xlarge() {
    --current-rem: var(--rem-xl);
  }
}

This allows all REM-based measurements to scale proportionally across different screen sizes.

High-Resolution Displays

For high-resolution displays, the framework adds specific font size adjustments:

/* FHD, UHD, 2K (4:3, 16:9, 21:9, 5:3) */
@media screen and (min-width: 1600px) {
  body, html {
    font-size: 0.93vw;
  }
}

/* 4K, 8K (4:3, 16:9, 21:9, 5:3) */
@media screen and (min-width: 2500px) {
  body, html {
    font-size: 1vw;
  }
}

This ensures text remains readable on very large or high-density displays.

Media Element Resets

Images and SVG elements also receive typography-related resets:

img {
  height: auto;
  max-width: 100%;
  max-height: 100%;
  border-style: none;
}

svg:not(:root) {
  overflow: hidden;
}

Focus State

The framework includes accessibility-friendly focus states for text-related elements:

a:focus, a:active, button:active, button:focus {
  outline: 1px dashed var(--primary-color);
}

Other Resets

Additional typography-related resets include:

mark {
  background-color: var(--warning-light);
  color: var(--light-reverse);
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
}

Using the Resets

No additional classes are needed to use these resets - they are automatically applied when you include the Phenix Design System in your project. However, you can customize the CSS variables used by these resets to tailor the typography to your brand.