Tachyons
v4.12.0
Type Scale Measure Line Height / Leading Tracking Font Weights Font Style Vertical Align Text Align Text Transform Text Decoration White Space Font Families

Measure

Measure refers to the length of a line of text. It is one of the most important aspects of readability.

“Anything from 45 to 75 characters is widely regarded as a satisfactory length of line for a single-column page… the 66-character line (counting both letters and spaces) is widely regarded as ideal. For multiple-column work, a better average is 40-50 characters.” —Robert Bringhurst, The Elements of Typographic Style

Tachyons provides 3 classes for setting measure.

.measure = line lengths ~66 characters .measure-narrow = line lengths ~45 characters .measure-wide = line lengths ~80 characters

Examples

6rem/96px at 30em

<h3 class="f-headline measure">Title</h3>

Designers create hierarchy and contrast by playing with the scale of letterforms.

5rem/80px at 30em

<h3 class="f-subheadline measure">Title</h3>

Designers create hierarchy and contrast by playing with the scale of letterforms.

3rem(48px) at 30em

<h3 class="f1 measure">Title</h3>

Designers create hierarchy and contrast by playing with the scale of letterforms. Changes in scale help create visual contrast, movement, and depth as well as express hierarchies of importance.

2.25rem (36px) at 30em

<h3 class="f2 measure">Title</h3>

Designers create hierarchy and contrast by playing with the scale of letterforms. Changes in scale help create visual contrast, movement, and depth as well as express hierarchies of importance.

1.5rem (24px) at 34em

<h3 class="f3 measure-wide">Title</h3>

Designers create hierarchy and contrast by playing with the scale of letterforms. Changes in scale help create visual contrast, movement, and depth as well as express hierarchies of importance.

1.5rem (24px) at 30em

<h3 class="f3 measure">Title</h3>

Designers create hierarchy and contrast by playing with the scale of letterforms. Changes in scale help create visual contrast, movement, and depth as well as express hierarchies of importance.

1.5rem (24px) at 20em

<h3 class="f3 measure-narrow">Title</h3>

Designers create hierarchy and contrast. Changes in scale help create visual contrast, movement, and depth as well as express hierarchies of importance.

Designers create hierarchy and contrast. Changes in scale help create visual contrast, movement, and depth as well as express hierarchies of importance.

1.25rem/20px at 34em

<h3 class="f4 measure-wide">Title</h3>

Designers create hierarchy and contrast. Changes in scale help create visual contrast, movement, and depth as well as express hierarchies of importance.

1.25rem/20px at 30em

<h3 class="f4 measure">Title</h3>

Designers create hierarchy and contrast. Changes in scale help create visual contrast, movement, and depth as well as express hierarchies of importance.

1.25rem (20px) at 20em

<h3 class="f4 measure-narrow">Title</h3>

Scale is the size of design elements in comparison to other elements in a layout as well as to the physical context of the work. Scale is relative. 12-pt type displayed on a 32-inch monitor can look very small, while 12-pt type printed on a book page can look flabby and overweight.

Designers create hierarchy and contrast by playing with the scale of letterforms. Changes in scale help create visual contrast, movement, and depth as well as express hierarchies of importance. Scale is physical. People intuitively judge the size of objects in relation to their own bodies and environments.

1rem (16px) at 30em

<h3 class="f5 measure">Title</h3>

Scale is the size of design elements in comparison to other elements in a layout as well as to the physical context of the work. Scale is relative. 12-pt type displayed on a 32-inch monitor can look very small, while 12-pt type printed on a book page clook flabby and overweight.

1rem (16px) at 20em

<h3 class="f5 measure-narrow">Title</h3>

Designers create hierarchy and contrast by playing with the scale of letterforms. Changes in scale help create visual contrast, movement, and depth as well as express hierarchies of importance. Scale is physical. People intuitively judge the size of objects in relation to their own bodies and environments.

Scale is the size of design elements in comparison to other elements in a layout as well as to the physical context of the work. Scale is relative. 12-pt type displayed on a 32-inch monitor can look very small, while 12-pt type printed on a book page can look flabby and overweight.

.875rem (14px) at 34em

<h3 class="f6 measure-wide">Title</h3>

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

.875rem (14px) at 30em

<h3 class="f6 measure">Title</h3>

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

.875rem (14px) at 20em

<h3 class="f6 measure-narrow">Title</h3>

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Truncation

If you want to truncate text that exceeds past a certain width you can use the truncate class combined with a width

<p class="mw4 truncate"></p>

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Previous

Type-scale

Next

Line-height

Reference

MDN - width Choose a Comfortable Measure

tachyons-typography

v3.0.5 270 B
Declarations
40
Selectors
24
Max. Specificity Score
10
Size of Avg. Rule
1.6666666666666667
src/_typography.css 

/*

   TYPOGRAPHY
   http://tachyons.io/docs/typography/measure/

   Media Query Extensions:
     -ns = not-small
     -m  = medium
     -l  = large

*/



/* Measure is limited to ~66 characters */
.measure {
  max-width: 30em;
}

/* Measure is limited to ~80 characters */
.measure-wide {
  max-width: 34em;
}

/* Measure is limited to ~45 characters */
.measure-narrow {
  max-width: 20em;
}

/* Book paragraph style - paragraphs are indented with no vertical spacing. */
.indent {
  text-indent: 1em;
  margin-top: 0;
  margin-bottom: 0;
}

.small-caps {
  font-variant: small-caps;
}

/* Combine this class with a width to truncate text (or just leave as is to truncate at width of containing element. */

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (--breakpoint-not-small) {
  .measure-ns  {
    max-width: 30em;
  }
  .measure-wide-ns {
    max-width: 34em;
  }
  .measure-narrow-ns {
    max-width: 20em;
  }
  .indent-ns {
    text-indent: 1em;
    margin-top: 0;
    margin-bottom: 0;
  }
  .small-caps-ns {
    font-variant: small-caps;
  }
  .truncate-ns {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (--breakpoint-medium) {
  .measure-m {
    max-width: 30em;
  }
  .measure-wide-m {
    max-width: 34em;
  }
  .measure-narrow-m {
    max-width: 20em;
  }
  .indent-m {
    text-indent: 1em;
    margin-top: 0;
    margin-bottom: 0;
  }
  .small-caps-m {
    font-variant: small-caps;
  }
  .truncate-m {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (--breakpoint-large) {
  .measure-l {
    max-width: 30em;
  }
  .measure-wide-l {
    max-width: 34em;
  }
  .measure-narrow-l {
    max-width: 20em;
  }
  .indent-l {
    text-indent: 1em;
    margin-top: 0;
    margin-bottom: 0;
  }
  .small-caps-l {
    font-variant: small-caps;
  }
  .truncate-l {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}