typebase.css
Version:
**typebase.css** aims to provide a minimal CSS typography boiler plate. Most css frameworks fail web typography in one of a few ways:
111 lines (86 loc) • 2.13 kB
text/stylus
/*! Typebase.less v0.1.0 | MIT License */
// Typesetting variables. Edit these!
baseFontSize = 22 // in pixels. This would result in 22px on desktop
baseLineHeight = 1.5 // how large the line height is as a multiple of font size
leading = baseLineHeight * 1rem
// Rate of growth for headings
// I actually like this to be slightly smaller then the leading. Makes for tight headings.
scale = 1.414
/* Setup */
html
/* Change default typefaces here */
font-family serif
font-size baseFontSize / 16 * 100%
// Make everything look a little nicer in webkit
-webkit-font-smoothing antialiased
// -webkit-text-size-adjust auto
// -moz-text-size-adjust auto
// -ms-text-size-adjust auto
// -o-text-size-adjust auto
// text-size-adjust auto
/* Copy & Lists */
p
line-height leading
margin-top leading
margin-bottom 0
ul,
ol
margin-top leading
margin-bottom leading
li
line-height leading
ul,
ol
margin-top 0
margin-bottom 0
blockquote
line-height leading
margin-top leading
margin-bottom leading
/* Headings */
h1,
h2,
h3,
h4,
h5,
h6
/* Change heading typefaces here */
font-family sans-serif
margin-top leading
margin-bottom 0
line-height leading
h1
font-size 3 * scale * 1rem
line-height 3 * leading
margin-top 2 * leading
h2
font-size 2 * scale * 1rem
line-height 2 * leading
margin-top 2 * leading
h3
font-size 1 * scale * 1rem
h4
font-size scale / 2 * 1rem
h5
font-size scale / 3 * 1rem
h6
font-size scale / 4 * 1rem
/* Tables */
table
margin-top leading
border-spacing 0px
border-collapse collapse
td,
th
padding 0
line-height baseLineHeight * baseFontSize - 0px
/* Code blocks */
code
// Forces text to constrain to the line-height. Not ideal, but works.
vertical-align bottom
/* Leading paragraph text */
.lead
font-size scale * 1rem
/* Hug a the block above you */
.hug
margin-top 0