milligram/src/_Typography.sass


// Typography
// ––––––––––––––––––––––––––––––––––––––––––––––––––

b,
strong
	font-weight: bold

p
	margin-top: 0

h1,
h2,
h3,
h4,
h5,
h6
	font-weight: 300
	letter-spacing: -.1rem
	margin-bottom: 2.0rem
	margin-top: 0

h1
	line-height: 1.2

h2
	line-height: 1.25

h3
	line-height: 1.3

h4
	letter-spacing: -.08rem
	line-height: 1.35

h5
	letter-spacing: -.05rem
	line-height: 1.5

h6
	letter-spacing: 0
	line-height: 1.4

// Larger than mobile screen
@media (min-width: 40.0rem) // Safari desktop has a bug using `rem`, but Safari mobile works

	h1
		font-size: 4.8rem

	h2
		font-size: 3.6rem

	h3
		font-size: 2.4rem

	h4
		font-size: 2.1rem

	h5
		font-size: 1.8rem

	h6
		font-size: 1.4rem
-												typography created

											
										
										
											2015-12-26 01:58:41 +00:00
 								// Typography
 								// ––––––––––––––––––––––––––––––––––––––––––––––––––
-												Add the correct font weight for b and strong

											
										
										
											2016-12-01 03:30:47 +00:00
+								b,
 								strong
 									font-weight: bold
-												typography created

											
										
										
											2015-12-26 01:58:41 +00:00
+								p
 									margin-top: 0
 								h1,
 								h2,
 								h3,
 								h4,
 								h5,
 								h6
 									font-weight: 300
-												Improvements in the typographies

											
										
										
											2016-09-10 05:00:51 +00:00
+									letter-spacing: -.1rem
-												typography created

											
										
										
											2015-12-26 01:58:41 +00:00
+									margin-bottom: 2.0rem
 									margin-top: 0
 								h1
 									line-height: 1.2
 								h2
 									line-height: 1.25
 								h3
 									line-height: 1.3
 								h4
 									letter-spacing: -.08rem
 									line-height: 1.35
 								h5
 									letter-spacing: -.05rem
 									line-height: 1.5
 								h6
 									letter-spacing: 0
 									line-height: 1.4
 								// Larger than mobile screen
-												Small fix to keep style guide defined

											
										
										
											2016-09-10 05:26:01 +00:00
+								@media (min-width: 40.0rem) // Safari desktop has a bug using `rem`, but Safari mobile works
-												typography created

											
										
										
											2015-12-26 01:58:41 +00:00
 									h1
-												Change header sizes

+ Remove header size adjustment on mobile
+ Header sizes follow the traditional typographic scale, making larger heading sizes easier to differentiate visually.
											
										
										
											2016-12-14 21:16:09 +00:00
+										font-size: 4.8rem
-												typography created

											
										
										
											2015-12-26 01:58:41 +00:00
 									h2
-												Change header sizes

+ Remove header size adjustment on mobile
+ Header sizes follow the traditional typographic scale, making larger heading sizes easier to differentiate visually.
											
										
										
											2016-12-14 21:16:09 +00:00
+										font-size: 3.6rem
-												typography created

											
										
										
											2015-12-26 01:58:41 +00:00
 									h3
-												Change header sizes

+ Remove header size adjustment on mobile
+ Header sizes follow the traditional typographic scale, making larger heading sizes easier to differentiate visually.
											
										
										
											2016-12-14 21:16:09 +00:00
+										font-size: 2.4rem
-												typography created

											
										
										
											2015-12-26 01:58:41 +00:00
 									h4
-												Change header sizes

+ Remove header size adjustment on mobile
+ Header sizes follow the traditional typographic scale, making larger heading sizes easier to differentiate visually.
											
										
										
											2016-12-14 21:16:09 +00:00
+										font-size: 2.1rem
-												typography created

											
										
										
											2015-12-26 01:58:41 +00:00
 									h5
-												Change header sizes

+ Remove header size adjustment on mobile
+ Header sizes follow the traditional typographic scale, making larger heading sizes easier to differentiate visually.
											
										
										
											2016-12-14 21:16:09 +00:00
+										font-size: 1.8rem
-												typography created

											
										
										
											2015-12-26 01:58:41 +00:00
 									h6
-												Change header sizes

+ Remove header size adjustment on mobile
+ Header sizes follow the traditional typographic scale, making larger heading sizes easier to differentiate visually.
											
										
										
											2016-12-14 21:16:09 +00:00
+										font-size: 1.4rem