CSS - Responsive typography

About

Responsive typography refers to scaling text and components by simply adjusting the root element’s font-size within a series of media queries

See also: UI - Responsive Design

Example

html {
  font-size: 1rem;
}

@include media-breakpoint-up(sm) {
  html {
    font-size: 1.2rem;
  }
}

@include media-breakpoint-up(md) {
  html {
    font-size: 1.4rem;
  }
}

@include media-breakpoint-up(lg) {
  html {
    font-size: 1.6rem;
  }
}

Documentation / Reference





Discover More
CSS - font-size property

CSS font-size in CSS is a property that defines the length (size) of a font. font-size by himself is an element of typography. responsive typography The font-size uses generally a relative sizing...



Share this page:
Follow us:
Task Runner