/* ================================================================== * Typography ($typography) Modular scale: 12px @ 1:1.333 (perfect fourth) Important number: 20px (maximum `font-size`) http://modularscale.com/scale/?px1=12&px2=20&ra1=1.333&ra2=0 \* ================================================================== */ html { font-size: 75%; } /* 12px */ @media only screen and (min-width: 320px) { html { font-size: 75%; } } /* 13px */ @media only screen and (min-width: 480px) { html { font-size: 81.25%; } } /* 14px */ @media only screen and (min-width: 640px) { html { font-size: 87.5%; } } /* 16px */ /** * 1. Remove default `margin` * 2. Inherits percentage declared on above as root `font-size` * 3. Unitless `line-height`, which acts as multiple of root `font-size` */ body { margin: 0; /* 1 */ color: $bodyFontColor; font-size: 1rem; /* 2 */ font-family: 'Open Sans', "Helvetica Neue", Arial, sans-serif; line-height: 1.5; /* 3 */ } /* Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome */ b, strong { font-weight: 600; } blockquote, dl, figure, hr, menu, ol, p, pre, summary, table, ul { margin: 0 0 1rem; } dl { dt { color: $black; font-weight: 700; } dd { margin: 0 0 1rem; } } em, i, cite { font-style: italic; } /* NOTE: Use `text-rendering` with caution - http://cbrac.co/SJt8p1 */ h1, h2, h3, h4, h5, h6 { margin: 0 0 0.75rem; color: $black; font-weight: 600; line-height: 1.333; text-rendering: optimizeLegibility; } h1 { font-size: 2rem; } h2 { font-size: 1.6rem; } h3 { font-size: 1.4rem; } h4 { font-size: 1.2rem; } h5 { font-size: 1rem; } h6 { font-size: 0.75rem; } /* Address differences between Firefox and other browsers */ hr { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; height: 0; border: 0; border-bottom: 1px solid $lightGray; } /* 1. Address inconsistent and variable `font-size` in all browsers */ small { display: inline-block; font-size: 87.5%; /* 1 */ line-height: 1.333; } /* Prevent and affecting `line-height` in all browsers */ sub, sup { position: relative; vertical-align: baseline; font-size: 75%; line-height: 0; } sup { top: -0.5em; } sub { bottom: -0.25em; } .caps { font-weight: 600; text-transform: uppercase; color: $darkerGray; font-size: 0.96rem; letter-spacing: 0.06rem; } .microcopy { background: #f7f7f7; font-size: 0.85rem; padding: 0.375rem 1rem; border-radius: $radius; max-width: 22rem; } // Actionable links within .microcopy .microcopy_action { display: block; }