Last active
July 15, 2023 15:22
-
-
Save scabbiaza/0cf0138544b6f5a6226e to your computer and use it in GitHub Desktop.
Typography. Vertical Rhythm.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// How it works: https://youtu.be/IbfsvI6dh4U | |
@textFontSize: 20px; | |
@lineHeight: 1.5rem; | |
// Set up font size and line-height | |
html { | |
font-size: @textFontSize; | |
} | |
body { | |
line-height: @lineHeight; | |
} | |
// Control line length | |
.container.text { | |
max-width: 40rem; // about 65 Chars per line | |
} | |
// Set up vertical margins for text elements | |
p, blockquote, ul, ol, dl { | |
margin: 0 0 @lineHeight 0; | |
} | |
hr { | |
margin: 1.5rem 0 1.5rem 0; | |
} | |
// Set up font sizes for header: each header is bigger by 25% as previous one | |
h1 { font-size: @textFontSize*1.25*1.25*1.25*1.25*1.25*1.25; } | |
h2 { font-size: @textFontSize*1.25*1.25*1.25*1.25*1.25; } | |
h3 { font-size: @textFontSize*1.25*1.25*1.25*1.25; } | |
h4 { font-size: @textFontSize*1.25*1.25*1.25; } | |
h5 { font-size: @textFontSize*1.25*1.25; } | |
h6 { font-size: @textFontSize*1.25; } | |
// Support vertical rhytm by manipulating with line-height and vertical margins | |
h1 { line-height: @lineHeight*2.65; margin-top: @lineHeight*2; margin-bottom: @lineHeight*1.35; } // @lineHeight x 6 | |
h2 { line-height: @lineHeight*2.65; margin-top: @lineHeight*1.35; margin-bottom: @lineHeight; } // @lineHeight x 5 | |
h3 { line-height: @lineHeight*1.65; margin-top: @lineHeight*1.35; margin-bottom: @lineHeight; } // @lineHeight x 4 | |
h4 { line-height: @lineHeight*1.65; margin-top: @lineHeight*1.35; margin-bottom: @lineHeight; } // @lineHeight x 4 | |
h5 { line-height: @lineHeight; margin-top: @lineHeight*1.15; margin-bottom: @lineHeight*0.85; } // @lineHeight x 3 | |
h6 { line-height: @lineHeight; margin-top: @lineHeight*1.15; margin-bottom: @lineHeight*0.85; } // @lineHeight x 3 | |
// Supported classes | |
.h1:extend(h1){} | |
.h2:extend(h2){} | |
.h3:extend(h3){} | |
.h4:extend(h4){} | |
.h5:extend(h5){} | |
.h6:extend(h6){} | |
// Grid | |
body.lines { | |
background: linear-gradient( | |
to bottom, | |
white, white 95%, #aaa 100%, #aaa | |
); | |
background-size: 100% @lineHeight; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I think, that line height should be saved on pixels - when there were relative units, line height is too small on mobile :/