Base typography

Author: ernest-phillips

public/typography.css

@@ -0,0 +1,76 @@
+body,
+input,
+button {
+    -webkit-font-smoothing: antialiased;
+}
+
+body {
+    -webkit-font-smoothing: antialiased;
+}
+
+/* This tells the browser that, whenever possible, it should strive to render the additional font features to improve readability */
+body {
+    text-rendering: optimizeLegibility;
+}
+
+p {
+    -moz-osx-font-smoothing: grayscale;
+}
+
+html {
+    font: 100%/1.5 Arial, sans-serif;
+}
+
+/* HEADINGS */
+h1 {
+    font-size: 2em;
+    /* 2*16 = 32 */
+}
+
+h2 {
+    font-size: 1.5em;
+    /* 1.5*16 = 24 */
+}
+
+h3 {
+    font-size: 1.17em;
+    /* 1.17*16 = 18.72 */
+}
+
+h4 {
+    font-size: 1em;
+    /* 1*16 = 16 */
+}
+
+h5 {
+    font-size: 0.83em;
+    /* 0.83*16 = 13.28 */
+}
+
+h6 {
+    font-size: 0.75em;
+    /* 0.75*16 = 12 */
+}
+
+p {
+    line-height: 1.5;
+    margin: 0 0 1em;
+}
+
+/* For indenting paragraphs */
+.indent p {
+    margin: 0;
+}
+
+.indent p+p {
+    text-indent: 2em;
+}
+
+/* Anchors */
+a:active {
+    color: tomato;
+}
+
+a:focus {
+    border: 1px dotted tomato;
+}