// Document: Content-box & Responsive typography // Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border` *, *::before, *::after { box-sizing: border-box; // 1 } // 1. Add text decoration inheritance in all browsers (opinionated) // 2. Add vertical alignment inheritance in all browsers (opinionated) //::before, //::after { // text-decoration: inherit; // 1 // vertical-align: inherit; // 2 //} // 1. Correct the line height in all browsers // 2. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS // 3. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS // 4. Change the default tap highlight to be completely transparent in iOS // 5. Use the default cursor in all browsers (opinionated) // 6. Use a 4-space tab width in all browsers (opinionated) html { text-rendering: optimizeLegibility; background-color: var(--c1); color: var(--f1); font-family: var(--ff); font-weight: var(--fw); font-size: var(--fs); line-height: var(--lh); // 1 // -ms-text-size-adjust: 100%; // 2 // -webkit-text-size-adjust: 100%; // 3 // -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // 4 // cursor: default; // 5 // tab-size: 4; // 6 }