Skip to content

Add snug and relaxed line-heights #673

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Feb 21, 2019
Merged

Conversation

adamwathan
Copy link
Member

@adamwathan adamwathan commented Feb 21, 2019

This PR adds two new line-height values:

  lineHeight: {
    none: 1,
    tight: 1.25,
+   snug: 1.375,
    normal: 1.5,
+   relaxed: 1.625,
    loose: 2,
  },

The snug value is useful for larger text that is still laid out in a paragraph-ish style, like the "Got creative ideas? ..." text on the Framer home page:

image

The relaxed value is useful for smaller paragraph text, close to what sites like Medium use for long form writing:

image

None of the existing values have been renamed or changed so this isn't a breaking change 👍

@sandren
Copy link

sandren commented Feb 21, 2019

In graphic design, the leading is typically set to something like 1.25 for headlines, 1.5 for body copy, and captions somewhere in between. Then lists of course have something closer to 2.0 leading.

If this pull request is merged, then Tailwind would by default cover all of the approximate values of what graphic designers use day to day. This would make the work of developers building their web design mockups much easier! 😄

@adamwathan adamwathan merged commit 26a0c23 into next Feb 21, 2019
@adamwathan adamwathan deleted the extend-line-height-scale branch February 21, 2019 16:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants