KNACSS/sass/_typography.scss
2013-07-09 14:01:24 +02:00

73 lines
1.4 KiB
SCSS

/* ----------------------------- */
/* ==typography */
/* ----------------------------- */
/**
* 1. Base font-size (corresponds to 10px) adapted to REM unit
* 2. Orientation iOS font-size fix
*/
html {
font-size: 62.5%; /* 1 */
@media (orientation: landscape) and (max-device-width: 768px) {
-webkit-text-size-adjust: 100%; /* 2 */
}
}
body {
color: #000;
font-family: "Century Gothic", helvetica, arial, sans-serif;
@include rem(14);
line-height: 1.5;
}
/**
* Font-sizing for content
* Preserves vertical-rythm
* Source: http://soqr.fr/vertical-rhythm/
*/
p, ul, ol, dl,
blockquote, pre,
td, th,
label, textarea,
caption, details, figure {
@include rem(14);
line-height: 1.5;
margin: .75em 0 0;
}
h1, .h1-like,
h2, .h2-like,
h3, .h3-like,
h4, .h4-like,
h5, .h5-like,
h6, .h6-like {
font-weight: normal;
margin: 21px 0 0 0;
}
h1, .h1-like,
h2, .h2-like,
h3, .h3-like {
line-height: 42px;
}
h4, .h4-like,
h5, .h5-like,
h6, .h6-like {
line-height: 21px;
}
h1, .h1-like { @include rem(26); }
h2, .h2-like { @include rem(24); }
h3, .h3-like { @include rem(22); }
h4, .h4-like { @include rem(20); }
h5, .h5-like { @include rem(18); }
h6, .h6-like { @include rem(16); }
/* alternate font-sizing */
.smaller { @include rem(10); }
.small { @include rem(12); }
.medium { @include rem(14); }
.big { @include rem(16); }
.bigger { @include rem(18); }
.biggest { @include rem(20); }