Tachyons

Docs

/

Typography

/

Line Height & Leading

Version
1.1.0
Filesize
146 B
Declarations
12
Selectors
12
Max. Specificity Score
10
Size of Avg. Rule
1

line-height is a css property

lead [rhyming with red]:
Originally a strip of soft metal used for vertical spacing between lines of type. Now meaning the vertical distance from the baseline of one line to the baseline of the next. Also called leading.

Examples

No applied line-height (default)

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.

Prose Leading (1.6)

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.

No Applied Title Leading (Default)

Lorem ipsum dolor sit amet, consetetur sadipscing elitr

Title Leading (1.3)

Lorem ipsum dolor sit amet, consetetur sadipscing elitr

Solid Leading (1)

Lorem ipsum dolor sit amet, consetetur sadipscing elitr

Previous

Measure

Next

Tracking

Reference

MDN - Line Height
src/_line-height.css

/*

   LINE HEIGHT / LEADING

*/

.lh-solid { line-height: 1; }
.lh-title { line-height: 1.3; }
.lh-copy  { line-height: 1.6; }

@media (--breakpoint-not-small) {
  .lh-solid-ns { line-height: 1; }
  .lh-title-ns { line-height: 1.3; }
  .lh-copy-ns  { line-height: 1.6; }
}

@media (--breakpoint-medium) {
  .lh-solid-m { line-height: 1; }
  .lh-title-m { line-height: 1.3; }
  .lh-copy-m  { line-height: 1.6; }
}

@media (--breakpoint-large) {
  .lh-solid-l { line-height: 1; }
  .lh-title-l { line-height: 1.3; }
  .lh-copy-l  { line-height: 1.6; }
}


Docs

General

Debugging Images