import MeasureHero from '../../site/ui/MeasureHero'

export const meta =  {
  title: 'Measure / Typography / Docs / TACHYONS',
  modules: ['tachyons-typography'],
  subNav: 'typography',
  editUrl: 'https://github.com/tachyons-css/tachyons/edit/master/docs/typography/measure.md'
}

# Measure

<MeasureHero />

## Examples

### 6REM/96PX AT 30EM
```.html
<p class="f-headline measure lh-title mt4">
  Designers create <span class="dn di-m">hierarchy and contrast by playing with the scale of letterforms.</span>
</p>
```

### 5REM/80PX AT 30EM
```.html
<p class="f-subheadline measure lh-title mt4">
  Designers create <span class="dn di-m">hierarchy and contrast by playing with the scale of letterforms.</span>
</p>
```

### 3REM(48PX) AT 30EM

```.html
<p class="f1 measure lh-title mt4">
  Designers create hierarchy and contrast <span class="dn di-m">by playing with the scale of letterforms. Changes in scale help create visual contrast, movement, and depth as well as express hierarchies of importance.</span>
</p>
```

### 2.25REM (36PX) AT 30EM

```.html
<p class="f2 measure lh-copy">
  Designers create hierarchy and contrast <span class="dn di-m">by playing with the scale of letterforms. Changes in scale help create visual contrast, movement, and depth as well as express hierarchies of importance.</span>
</p>
```

### 1.5REM (24PX) AT 34EM

```.html
<p class="f3 measure-wide lh-copy">
  Designers create hierarchy and contrast <span class="dn di-m">by playing with the scale of letterforms. Changes in scale help create visual contrast, movement, and depth as well as express hierarchies of importance.</span>
</p>
```

### 1.5REM (24PX) AT 30EM

```.html
<p class="f3 measure lh-copy">
  Designers create hierarchy and contrast <span class="dn di-m">by playing with the scale of letterforms. Changes in scale help create visual contrast, movement, and depth as well as express hierarchies of importance.</span>
</p>
```

### 1.5REM (24PX) AT 20EM

```.html
<div class="dib f4 measure-narrow mr4">
  <p class="f3 lh-title">
    Designers create hierarchy and contrast. Changes in scale help create visual contrast, movement, and depth as well as express hierarchies of importance.
  </p>
</div>
<div class="dib f4 measure-narrow">
  <p class="f3 lh-title">
    Designers create hierarchy and contrast. Changes in scale help create visual contrast, movement, and depth as well as express hierarchies of importance.
  </p>
</div>
```

### 1.25REM/20PX AT 34EM

```.html
<p class="f4 measure-wide lh-copy">
  Designers create hierarchy and contrast. Changes in scale help create visual contrast, movement, and depth as well as express hierarchies of importance.
</p>
```

### 1.25REM/20PX AT 30EM

```.html
<p class="f4 measure lh-copy">
  Designers create hierarchy and contrast. Changes in scale help create visual contrast, movement, and depth as well as express hierarchies of importance.
</p>
```

### 1.25REM (20PX) AT 20EM

```.html
<div class="dib f4 measure-narrow mr5 v-top">
  <p class="f4 lh-copy">
    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.
  </p>
</div>
<div class="dib f4 measure-narrow v-top">
  <p class="f4 lh-copy">
    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.
  </p>
</div>
```

### 1REM (16PX) AT 30EM

```.html
<p class="f5 measure lh-copy v-top">
  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.
</p>
```

### 1REM (16PX) AT 20EM

```.html
<div class="dib f5 measure-narrow mr4 v-top">
  <p class="f5 lh-copy">
    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.
  </p>
</div>
<div class="dib f5 measure-narrow v-top">
  <p class="f5 lh-copy">
    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.
  </p>
</div>
```

### .875REM (14PX) AT 34EM

```.html
<p class="f6 measure-wide lh-copy">
  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.
</p>
```

### .875REM (14PX) AT 30EM

```.html
<p class="f6 measure lh-copy">
  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.
</p>
```

### .875REM (14PX) AT 20EM

```.html
<div class="dib f5 measure-narrow mr4 v-top">
  <p class="f6 lh-copy">
    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.
  </p>
</div>
<div class="dib f5 measure-narrow v-top">
  <p class="f6 lh-copy">
    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.
  </p>
</div>
```

### Truncation

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

```.html
<p class="mw4 truncate">
  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.
</p>
```
