diff --git a/themes/bs_bootstrap/css/base/elements.css b/themes/bs_bootstrap/css/base/elements.css
index c4833e0..323f965 100644
--- a/themes/bs_bootstrap/css/base/elements.css
+++ b/themes/bs_bootstrap/css/base/elements.css
@@ -1,3 +1,4 @@
+/*! typey | GPLv2 License | https://github.com/jptaranto/typey */
 html {
   box-sizing: border-box;
 }
diff --git a/themes/bs_bootstrap/css/base/normalize.css b/themes/bs_bootstrap/css/base/normalize.css
index 010d7f6..5ad3602 100644
--- a/themes/bs_bootstrap/css/base/normalize.css
+++ b/themes/bs_bootstrap/css/base/normalize.css
@@ -1,3 +1,4 @@
+/*! typey | GPLv2 License | https://github.com/jptaranto/typey */
 /*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
 html {
   font-family: sans-serif;
diff --git a/themes/bs_bootstrap/css/base/transitions.css b/themes/bs_bootstrap/css/base/transitions.css
index c5a8107..e86eb86 100644
--- a/themes/bs_bootstrap/css/base/transitions.css
+++ b/themes/bs_bootstrap/css/base/transitions.css
@@ -1,3 +1,4 @@
+/*! typey | GPLv2 License | https://github.com/jptaranto/typey */
 .fade {
   opacity: 0;
   transition: opacity 0.15s linear;
diff --git a/themes/bs_bootstrap/css/base/util.css b/themes/bs_bootstrap/css/base/util.css
index c87ad73..58a4c4c 100644
--- a/themes/bs_bootstrap/css/base/util.css
+++ b/themes/bs_bootstrap/css/base/util.css
@@ -1,3 +1,4 @@
+/*! typey | GPLv2 License | https://github.com/jptaranto/typey */
 .sr-only {
   position: absolute;
   width: 1px;
@@ -137,60 +138,48 @@ a.text-gray-dark:focus, a.text-gray-dark:hover {
 }
 
 @media (min-width: 576px) {
-
   .text-sm-left {
     text-align: left !important;
   }
-
   .text-sm-right {
     text-align: right !important;
   }
-
   .text-sm-center {
     text-align: center !important;
   }
 }
 
 @media (min-width: 768px) {
-
   .text-md-left {
     text-align: left !important;
   }
-
   .text-md-right {
     text-align: right !important;
   }
-
   .text-md-center {
     text-align: center !important;
   }
 }
 
 @media (min-width: 992px) {
-
   .text-lg-left {
     text-align: left !important;
   }
-
   .text-lg-right {
     text-align: right !important;
   }
-
   .text-lg-center {
     text-align: center !important;
   }
 }
 
 @media (min-width: 1200px) {
-
   .text-xl-left {
     text-align: left !important;
   }
-
   .text-xl-right {
     text-align: right !important;
   }
-
   .text-xl-center {
     text-align: center !important;
   }
diff --git a/themes/bs_bootstrap/css/components/block.css b/themes/bs_bootstrap/css/components/block.css
index 1efcc5c..a5a8554 100644
--- a/themes/bs_bootstrap/css/components/block.css
+++ b/themes/bs_bootstrap/css/components/block.css
@@ -1,3 +1,4 @@
+/*! typey | GPLv2 License | https://github.com/jptaranto/typey */
 .block {
   margin-top: 1rem;
   margin-bottom: 1rem;
diff --git a/themes/bs_bootstrap/css/components/breadcrumb.css b/themes/bs_bootstrap/css/components/breadcrumb.css
index 945cbd6..83472f0 100644
--- a/themes/bs_bootstrap/css/components/breadcrumb.css
+++ b/themes/bs_bootstrap/css/components/breadcrumb.css
@@ -1,3 +1,4 @@
+/*! typey | GPLv2 License | https://github.com/jptaranto/typey */
 .breadcrumb {
   padding: 0.75rem 0;
   margin-bottom: 1rem;
diff --git a/themes/bs_bootstrap/css/components/buttons.css b/themes/bs_bootstrap/css/components/buttons.css
index 4f039b0..e8ac507 100644
--- a/themes/bs_bootstrap/css/components/buttons.css
+++ b/themes/bs_bootstrap/css/components/buttons.css
@@ -1,3 +1,4 @@
+/*! typey | GPLv2 License | https://github.com/jptaranto/typey */
 .btn {
   display: inline-block;
   font-weight: normal;
diff --git a/themes/bs_bootstrap/css/components/close.css b/themes/bs_bootstrap/css/components/close.css
index e7228e9..91d1eb4 100644
--- a/themes/bs_bootstrap/css/components/close.css
+++ b/themes/bs_bootstrap/css/components/close.css
@@ -1,3 +1,4 @@
+/*! typey | GPLv2 License | https://github.com/jptaranto/typey */
 .close {
   float: right;
   font-size: 1.5rem;
diff --git a/themes/bs_bootstrap/css/components/dropdown.css b/themes/bs_bootstrap/css/components/dropdown.css
index 74556fe..be8d45b 100644
--- a/themes/bs_bootstrap/css/components/dropdown.css
+++ b/themes/bs_bootstrap/css/components/dropdown.css
@@ -1,3 +1,4 @@
+/*! typey | GPLv2 License | https://github.com/jptaranto/typey */
 .dropup,
 .dropdown {
   position: relative;
diff --git a/themes/bs_bootstrap/css/components/entity.css b/themes/bs_bootstrap/css/components/entity.css
index 88f7ae9..46782b6 100644
--- a/themes/bs_bootstrap/css/components/entity.css
+++ b/themes/bs_bootstrap/css/components/entity.css
@@ -1,3 +1,4 @@
+/*! typey | GPLv2 License | https://github.com/jptaranto/typey */
 .embedded-entity.align-left {
   margin-right: 1rem;
 }
diff --git a/themes/bs_bootstrap/css/components/forms.css b/themes/bs_bootstrap/css/components/forms.css
index 7a82264..af4aa39 100644
--- a/themes/bs_bootstrap/css/components/forms.css
+++ b/themes/bs_bootstrap/css/components/forms.css
@@ -1,3 +1,4 @@
+/*! typey | GPLv2 License | https://github.com/jptaranto/typey */
 .form-control {
   display: block;
   width: 100%;
@@ -275,7 +276,6 @@ label {
 }
 
 @media (min-width: 576px) {
-
   .form-inline label {
     display: -webkit-flex;
     display: -ms-flexbox;
@@ -288,7 +288,6 @@ label {
     justify-content: center;
     margin-bottom: 0;
   }
-
   .form-inline .form-group {
     display: -webkit-flex;
     display: -ms-flexbox;
@@ -304,26 +303,21 @@ label {
     align-items: center;
     margin-bottom: 0;
   }
-
   .form-inline .form-control {
     display: inline-block;
     width: auto;
     vertical-align: middle;
   }
-
   .form-inline .form-control-static {
     display: inline-block;
   }
-
   .form-inline .input-group {
     width: auto;
   }
-
   .form-inline .form-control-label {
     margin-bottom: 0;
     vertical-align: middle;
   }
-
   .form-inline .form-check {
     display: -webkit-flex;
     display: -ms-flexbox;
@@ -338,18 +332,15 @@ label {
     margin-top: 0;
     margin-bottom: 0;
   }
-
   .form-inline .form-check-label {
     padding-left: 0;
   }
-
   .form-inline .form-check-input {
     position: relative;
     margin-top: 0;
     margin-right: 0.25rem;
     margin-left: 0;
   }
-
   .form-inline .custom-control {
     display: -webkit-flex;
     display: -ms-flexbox;
@@ -362,14 +353,12 @@ label {
     justify-content: center;
     padding-left: 0;
   }
-
   .form-inline .custom-control-indicator {
     position: static;
     display: inline-block;
     margin-right: 0.25rem;
     vertical-align: text-bottom;
   }
-
   .form-inline .has-feedback .form-control-feedback {
     top: 0;
   }
diff --git a/themes/bs_bootstrap/css/components/messages.css b/themes/bs_bootstrap/css/components/messages.css
index a818895..be74169 100644
--- a/themes/bs_bootstrap/css/components/messages.css
+++ b/themes/bs_bootstrap/css/components/messages.css
@@ -1,3 +1,4 @@
+/*! typey | GPLv2 License | https://github.com/jptaranto/typey */
 .alert {
   padding: 0.75rem 1.25rem;
   margin-bottom: 1rem;
diff --git a/themes/bs_bootstrap/css/components/navbar.css b/themes/bs_bootstrap/css/components/navbar.css
index 19d1194..4c96190 100644
--- a/themes/bs_bootstrap/css/components/navbar.css
+++ b/themes/bs_bootstrap/css/components/navbar.css
@@ -1,3 +1,4 @@
+/*! typey | GPLv2 License | https://github.com/jptaranto/typey */
 .nav {
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -181,17 +182,14 @@
 }
 
 @media (min-width: 768px) {
-
   .navbar__inner .row {
     -webkit-flex-direction: row;
     -ms-flex-direction: row;
     flex-direction: row;
   }
-
   .navbar-toggler {
     display: none;
   }
-
   .navbar-collapse {
     display: -webkit-flex;
     display: -ms-flexbox;
@@ -206,22 +204,18 @@
     -ms-flex-align: center;
     align-items: center;
   }
-
   .navbar-collapse .navbar-nav {
     -webkit-flex-direction: row;
     -ms-flex-direction: row;
     flex-direction: row;
   }
-
   .navbar-collapse .navbar-nav .nav-link {
     padding-right: .5rem;
     padding-left: .5rem;
   }
-
   .navbar-collapse .navbar-toggler {
     display: none;
   }
-
   .navbar-nav {
     -webkit-flex-direction: row;
     -ms-flex-direction: row;
diff --git a/themes/bs_bootstrap/css/components/node.css b/themes/bs_bootstrap/css/components/node.css
index 6e9da26..2fe8fda 100644
--- a/themes/bs_bootstrap/css/components/node.css
+++ b/themes/bs_bootstrap/css/components/node.css
@@ -1,3 +1,5 @@
+/*! typey | GPLv2 License | https://github.com/jptaranto/typey */
+/*! typey | GPLv2 License | https://github.com/jptaranto/typey */
 .node-preview-container {
   width: auto;
   padding: 1rem;
diff --git a/themes/bs_bootstrap/css/components/popover.css b/themes/bs_bootstrap/css/components/popover.css
index a4066e4..3678da2 100644
--- a/themes/bs_bootstrap/css/components/popover.css
+++ b/themes/bs_bootstrap/css/components/popover.css
@@ -1,3 +1,4 @@
+/*! typey | GPLv2 License | https://github.com/jptaranto/typey */
 .popover {
   position: absolute;
   top: 0;
diff --git a/themes/bs_bootstrap/css/components/tooltip.css b/themes/bs_bootstrap/css/components/tooltip.css
index b167008..8e1f6d4 100644
--- a/themes/bs_bootstrap/css/components/tooltip.css
+++ b/themes/bs_bootstrap/css/components/tooltip.css
@@ -1,3 +1,4 @@
+/*! typey | GPLv2 License | https://github.com/jptaranto/typey */
 .tooltip {
   position: absolute;
   z-index: 1070;
diff --git a/themes/bs_bootstrap/css/layout/layout.css b/themes/bs_bootstrap/css/layout/layout.css
index f9e708e..bdcd81a 100644
--- a/themes/bs_bootstrap/css/layout/layout.css
+++ b/themes/bs_bootstrap/css/layout/layout.css
@@ -1,3 +1,4 @@
+/*! typey | GPLv2 License | https://github.com/jptaranto/typey */
 .container {
   position: relative;
   margin-left: auto;
@@ -17,6 +18,7 @@
   margin-left: -15px;
 }
 
+/*! typey | GPLv2 License | https://github.com/jptaranto/typey */
 .page__header .row {
   -webkit-justify-content: space-between;
       -ms-flex-pack: justify;
@@ -28,6 +30,7 @@
   padding-left: 15px;
 }
 
+/*! typey | GPLv2 License | https://github.com/jptaranto/typey */
 .page__main {
   margin-top: 3rem;
   margin-bottom: 3rem;
@@ -42,6 +45,7 @@
   padding-left: 15px;
 }
 
+/*! typey | GPLv2 License | https://github.com/jptaranto/typey */
 .page__footer__content .region {
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -80,50 +84,41 @@
 }
 
 @media (min-width: 576px) {
-
   .container {
     padding-right: 15px;
     padding-left: 15px;
   }
-
   .container {
     width: 540px;
     max-width: 100%;
   }
-
   .row {
     margin-right: -15px;
     margin-left: -15px;
   }
-
   .page__header .region {
     padding-right: 15px;
     padding-left: 15px;
   }
-
   .page__content--with-sidebar .page__content-col,
   .page__content--with-sidebar .region-content-sidebar {
     padding-right: 15px;
     padding-left: 15px;
   }
-
   .page__footer__content .block {
     padding-right: 15px;
     padding-left: 15px;
   }
-
   .page__footer__content .block {
     -webkit-flex: 1;
     -ms-flex: 1;
     flex: 1;
     width: auto;
   }
-
   .page__footer .region-footer-copyright {
     margin-right: -15px;
     margin-left: -15px;
   }
-
   .page__footer .region-footer-copyright .block {
     padding-right: 15px;
     padding-left: 15px;
@@ -131,64 +126,53 @@
 }
 
 @media (min-width: 768px) {
-
   .container {
     padding-right: 15px;
     padding-left: 15px;
   }
-
   .container {
     width: 720px;
     max-width: 100%;
   }
-
   .row {
     margin-right: -15px;
     margin-left: -15px;
   }
-
   .page__header .region {
     padding-right: 15px;
     padding-left: 15px;
   }
-
   .page__content--with-sidebar .page__content-col,
   .page__content--with-sidebar .region-content-sidebar {
     padding-right: 15px;
     padding-left: 15px;
   }
-
   .page__content--with-sidebar .page__content-col {
     -webkit-flex: 0 0 75%;
     -ms-flex: 0 0 75%;
     flex: 0 0 75%;
     max-width: 75%;
   }
-
   .page__content--with-sidebar .region-content-sidebar {
     -webkit-flex: 0 0 25%;
     -ms-flex: 0 0 25%;
     flex: 0 0 25%;
     max-width: 25%;
   }
-
   .page__footer__content .region {
     -webkit-flex: 1;
     -ms-flex: 1;
     flex: 1;
     width: auto;
   }
-
   .page__footer__content .block {
     padding-right: 15px;
     padding-left: 15px;
   }
-
   .page__footer .region-footer-copyright {
     margin-right: -15px;
     margin-left: -15px;
   }
-
   .page__footer .region-footer-copyright .block {
     padding-right: 15px;
     padding-left: 15px;
@@ -196,43 +180,35 @@
 }
 
 @media (min-width: 992px) {
-
   .container {
     padding-right: 15px;
     padding-left: 15px;
   }
-
   .container {
     width: 960px;
     max-width: 100%;
   }
-
   .row {
     margin-right: -15px;
     margin-left: -15px;
   }
-
   .page__header .region {
     padding-right: 15px;
     padding-left: 15px;
   }
-
   .page__content--with-sidebar .page__content-col,
   .page__content--with-sidebar .region-content-sidebar {
     padding-right: 15px;
     padding-left: 15px;
   }
-
   .page__footer__content .block {
     padding-right: 15px;
     padding-left: 15px;
   }
-
   .page__footer .region-footer-copyright {
     margin-right: -15px;
     margin-left: -15px;
   }
-
   .page__footer .region-footer-copyright .block {
     padding-right: 15px;
     padding-left: 15px;
@@ -240,43 +216,35 @@
 }
 
 @media (min-width: 1200px) {
-
   .container {
     padding-right: 15px;
     padding-left: 15px;
   }
-
   .container {
     width: 1140px;
     max-width: 100%;
   }
-
   .row {
     margin-right: -15px;
     margin-left: -15px;
   }
-
   .page__header .region {
     padding-right: 15px;
     padding-left: 15px;
   }
-
   .page__content--with-sidebar .page__content-col,
   .page__content--with-sidebar .region-content-sidebar {
     padding-right: 15px;
     padding-left: 15px;
   }
-
   .page__footer__content .block {
     padding-right: 15px;
     padding-left: 15px;
   }
-
   .page__footer .region-footer-copyright {
     margin-right: -15px;
     margin-left: -15px;
   }
-
   .page__footer .region-footer-copyright .block {
     padding-right: 15px;
     padding-left: 15px;
diff --git a/themes/bs_bootstrap/css/theme/print.css b/themes/bs_bootstrap/css/theme/print.css
index b76bd84..60bc97b 100644
--- a/themes/bs_bootstrap/css/theme/print.css
+++ b/themes/bs_bootstrap/css/theme/print.css
@@ -1,3 +1,4 @@
+/*! typey | GPLv2 License | https://github.com/jptaranto/typey */
 @media print {
     *,
   *::before,
diff --git a/themes/bs_bootstrap/css/theme/theme.css b/themes/bs_bootstrap/css/theme/theme.css
index 2f34814..2e94a3d 100644
--- a/themes/bs_bootstrap/css/theme/theme.css
+++ b/themes/bs_bootstrap/css/theme/theme.css
@@ -1,67 +1,163 @@
-h1, .h1 {
+/*! typey | GPLv2 License | https://github.com/jptaranto/typey */
+/*! typey | GPLv2 License | https://github.com/jptaranto/typey */
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 100%;
+  line-height: 1.5em;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  min-height: 100%;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  background-color: color(text-bg);
+  color: color(text);
+}
+
+abbr[title] {
+  border-bottom: 0;
+  text-decoration: underline;
+  text-decoration: underline dotted;
+}
+
+pre,
+code,
+kbd,
+samp,
+var {
+  font-family: Menlo, "DejaVu Sans Mono", "Ubuntu Mono", Courier, "Courier New", monospace, sans-serif;
+  font-size: 1rem;
+}
+
+mark {
+  background-color: color(mark-bg);
+  color: color(text);
+}
+
+small {
+  font-size: 0.875rem;
+}
+
+sub,
+sup {
+  font-size: 0.625rem;
+  position: relative;
+  line-height: 0;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+h1 {
+  font-size: 2rem;
   line-height: 3rem;
   margin-top: 1.5rem;
-  margin-bottom: 3rem;
+  margin-bottom: 1.5rem;
 }
 
-h2, .h2 {
-  line-height: 3rem;
+h2 {
+  font-size: 1.5rem;
+  line-height: 2.25rem;
   margin-top: 1.5rem;
   margin-bottom: 1.5rem;
 }
 
-h3, .h3 {
-  line-height: 1.5rem;
+h3 {
+  font-size: 1.25rem;
+  line-height: 2.25rem;
   margin-top: 1.5rem;
-  margin-bottom: 0rem;
+  margin-bottom: 1.5rem;
 }
 
-h4, .h4 {
+h4 {
+  font-size: 1rem;
   line-height: 1.5rem;
   margin-top: 1.5rem;
-  margin-bottom: 0rem;
+  margin-bottom: 1.5rem;
 }
 
-h5, .h5 {
+h5 {
+  font-size: 0.875rem;
   line-height: 1.5rem;
   margin-top: 1.5rem;
-  margin-bottom: 0rem;
+  margin-bottom: 1.5rem;
 }
 
-h6, .h6 {
+h6 {
+  font-size: 0.625rem;
   line-height: 1.5rem;
   margin-top: 1.5rem;
-  margin-bottom: 0rem;
+  margin-bottom: 1.5rem;
 }
 
-p, ul, ol, pre, table, blockquote {
-  margin-top: 0rem;
-  margin-bottom: 1.5rem;
+blockquote {
+  margin: 1.5rem 2rem;
 }
 
-ul ul, ol ol, ul ol, ol ul {
-  margin-top: 0rem;
-  margin-bottom: 0rem;
+dl,
+menu,
+ol,
+ul {
+  margin: 1.5rem 0;
 }
 
-hr, .hr {
-  border: 1px solid;
-  margin: -1px 0;
+ol ol,
+ol ul,
+ul ol,
+ul ul {
+  margin: 0;
 }
 
-sub, sup {
-  position: relative;
-  vertical-align: baseline;
+dd {
+  margin: 0 0 0 32px;
 }
 
-sup {
-  top: -0.5em;
+.divider,
+hr {
+  margin: 1.5rem 0;
+  border: 0;
+  border-top: 1px solid color(border);
 }
 
-sub {
-  bottom: -0.25em;
+.divider > :first-child, hr > :first-child {
+  margin-top: 1.5rem;
+}
+
+hr {
+  box-sizing: content-box;
+  height: 0;
+  overflow: visible;
+}
+
+p,
+pre {
+  margin: 1.5rem 0;
 }
 
+table {
+  margin: 1.5rem 0;
+  border-collapse: collapse;
+  border-spacing: 0;
+  width: 100%;
+}
+
+td,
+th {
+  padding: 0;
+}
+
+/*! typey | GPLv2 License | https://github.com/jptaranto/typey */
 .page__footer {
   background-color: #eceeef;
   color: #292b2c;
@@ -97,6 +193,7 @@ sub {
   color: #299bfd;
 }
 
+/*! typey | GPLv2 License | https://github.com/jptaranto/typey */
 .navbar-brand {
   font-size: 1.25rem;
   line-height: inherit;
@@ -160,3 +257,12 @@ sub {
 .navbar .navbar-text {
   color: #0275d8;
 }
+
+@media print {
+  html {
+    font-size: 12pt;
+  }
+  abbr[title]::after {
+    content: " (" attr(title) ")";
+  }
+}
diff --git a/themes/bs_bootstrap/package.json b/themes/bs_bootstrap/package.json
index f4f42ab..a97dd78 100644
--- a/themes/bs_bootstrap/package.json
+++ b/themes/bs_bootstrap/package.json
@@ -36,6 +36,7 @@
     "stylelint-config-standard": "^16.0.0",
     "stylelint-order": "^0.3.0",
     "stylelint-scss": "^1.4.3",
-    "stylelint-selector-bem-pattern": "^1.0.0"
+    "stylelint-selector-bem-pattern": "^1.0.0",
+    "typey": "^1.0.0"
   }
 }
diff --git a/themes/bs_bootstrap/sass/_init.scss b/themes/bs_bootstrap/sass/_init.scss
index fe3654f..911b8f0 100644
--- a/themes/bs_bootstrap/sass/_init.scss
+++ b/themes/bs_bootstrap/sass/_init.scss
@@ -15,3 +15,7 @@
 
 // Load needed mixins.
 @import "bootstrap/scss/mixins";
+
+// Load typey to manage font sizes and margins.
+@import 'typey/stylesheets/typey';
+2
\ No newline at end of file
diff --git a/themes/bs_bootstrap/sass/theme/base/_elements.scss b/themes/bs_bootstrap/sass/theme/base/_elements.scss
index b5e8e05..0fbe052 100644
--- a/themes/bs_bootstrap/sass/theme/base/_elements.scss
+++ b/themes/bs_bootstrap/sass/theme/base/_elements.scss
@@ -1,69 +1,225 @@
 @import "init";
 
-// Experimenting with gridlover vertical rythm.
-// @see https://www.gridlover.net/try
-//   Font size:    16
-//   Line height:  1.5
-//   Scale factor: 1.333
-//
-// @todo - Investigate next links
-// - http://typecast.com/blog/4-simple-steps-to-vertical-rhythm
-// - https://scotch.io/tutorials/aesthetic-sass-3-typography-and-vertical-rhythm
-// - https://www.smashingmagazine.com/2012/12/css-baseline-the-good-the-bad-and-the-ugly/
-// and figure something nicer.
-h1, .h1 {
-  line-height: 3rem;
-  margin-top: 1.5rem;
-  margin-bottom: 3rem;
-}
-h2, .h2 {
-  line-height: 3rem;
-  margin-top: 1.5rem;
-  margin-bottom: 1.5rem;
-}
-h3, .h3 {
-  line-height: 1.5rem;
-  margin-top: 1.5rem;
-  margin-bottom: 0rem;
-}
-h4, .h4 {
-  line-height: 1.5rem;
-  margin-top: 1.5rem;
-  margin-bottom: 0rem;
-}
-h5, .h5 {
-  line-height: 1.5rem;
-  margin-top: 1.5rem;
-  margin-bottom: 0rem;
-}
-h6, .h6 {
-  line-height: 1.5rem;
-  margin-top: 1.5rem;
-  margin-bottom: 0rem;
-}
-p, ul, ol, pre, table, blockquote {
-  margin-top: 0rem;
-  margin-bottom: 1.5rem;
-}
-ul ul, ol ol, ul ol, ol ul {
-  margin-top: 0rem;
-  margin-bottom: 0rem;
-}
-
-// Let's make sure all's aligned.
-hr, .hr {
-  border: 1px solid;
-  margin: -1px 0;
-}
-
-sub, sup {
-  //line-height: 0;
+// Root
+
+// Use the saner border-box model for all elements.
+* {
+  box-sizing: border-box;
+}
+
+html {
+  @include define-type-sizing;
+  // Prevent adjustments of font size after orientation changes in IE and iOS.
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  // On short pages, we want any background gradients to fill the entire height
+  // of the browser.
+  min-height: 100%;
+}
+
+body {
+  // Output a horizontal grid to help with debugging typography. The
+  // $typey-debug variable will toggle its output.
+  @include typey-debug-grid;
+  // Remove default margin and padding.
+  margin: 0;
+  padding: 0;
+  background-color: color(text-bg);
+  color: color(text);
+}
+
+// Text-level semantics
+
+// Abbreviation / Acroynym
+abbr[title] {
+  // Remove the bottom border in Firefox <40.
+  border-bottom: 0;
+  // Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+  text-decoration: underline;
+  text-decoration: underline dotted;
+
+  @media print {
+    // Add visible title after abbreviations.
+    &::after {
+      content: " (" attr(title) ")";
+    }
+  }
+}
+
+// Code
+%monospace,
+code,
+kbd,
+samp,
+var {
+  // Correct the inheritance and scaling of font size in all browsers.
+  @include typeface(monospace);
+  // Correct the odd `em` font sizing in all browsers.
+  font-size: 1rem;
+}
+
+// Marked text
+mark {
+  // Add the correct background and color in IE <10.
+  background-color: color(mark-bg);
+  color: color(text);
+}
+
+// Small text
+small {
+  // Add the correct font size in all browsers.
+  @include font-size(s);
+}
+
+// Superscript / Subscript
+sub,
+sup {
+  // Prevent `sub` and `sup` elements from affecting the line height in
+  // all browsers.
+  @include font-size(xs);
+
   position: relative;
+  line-height: 0;
   vertical-align: baseline;
 }
+
+sub {
+  bottom: -0.25em;
+}
+
 sup {
   top: -0.5em;
 }
-sub {
-  bottom: -0.25em;
+
+// Headings
+h1,
+%h1 {
+  // Set the font-size and line-height while keeping a proper vertical rhythm.
+  @include type-layout(xxl, 2);
+
+  // Set 1 unit of vertical rhythm on the top and bottom margins.
+  @include margin-top(1, xxl);
+  @include margin-bottom(1, xxl);
+}
+
+h2,
+%h2 {
+  @include type-layout(xl, 1.5);
+  @include margin-top(1, xl);
+  @include margin-bottom(1, xl);
+}
+
+h3,
+%h3 {
+  @include type-layout(l, 1.5);
+  @include margin-top(1, l);
+  @include margin-bottom(1, l);
+}
+
+h4,
+%h4 {
+  @include type-layout(m, 1);
+  @include margin-top(1, m);
+  @include margin-bottom(1, m);
+}
+
+h5,
+%h5 {
+  @include type-layout(s, 1);
+  @include margin-top(1, s);
+  @include margin-bottom(1, s);
+}
+
+h6,
+%h6 {
+  @include type-layout(xs, 1);
+  @include margin-top(1, xs);
+  @include margin-bottom(1, xs);
+}
+
+// Grouping content
+
+// Block quotes
+blockquote {
+  // Set 1 unit of vertical rhythm on the top and bottom margin.
+  // Also indent the quote on both sides.
+  @include margin(1 $indent-amount);
+}
+
+// Lists
+dl,
+menu,
+ol,
+ul {
+  // Address margins set differently in IE 6/7.
+  @include margin(1 0);
+}
+
+// Turn off margins on nested lists.
+ol,
+ul {
+  ol,
+  ul {
+    margin: 0;
+  }
+}
+
+dd {
+  margin: 0 0 0 $indent-amount;
+}
+
+// Divider
+.divider,
+%divider {
+  @include margin(1 0);
+
+  border: 0;
+  border-top: 1px solid color(border);
+
+  // If used as a container, add a top margin to the first child.
+  > :first-child {
+    @include margin-top(1);
+  }
+}
+
+// Horizontal rule
+hr {
+  @extend %divider;
+  // Add the correct box sizing in Firefox.
+  box-sizing: content-box;
+  height: 0;
+  // Show the overflow in Edge and IE.
+  overflow: visible;
+}
+
+// Body copy
+p,
+pre {
+  // Set 1 unit of vertical rhythm on the top and bottom margin.
+  @include margin(1 0);
+}
+
+// Preformatted text
+pre {
+  @extend %monospace;
+}
+
+// Tables
+
+table {
+  // Add vertical rhythm margins.
+  @include margin(1 0);
+
+  // Remove most spacing between table cells.
+  border-collapse: collapse;
+  border-spacing: 0;
+
+  // Prevent cramped-looking tables
+  width: 100%;
+}
+
+td,
+th {
+  // Remove most spacing between table cells.
+  padding: 0;
 }
diff --git a/themes/bs_bootstrap/sass/variables/_bs_bootstrap.scss b/themes/bs_bootstrap/sass/variables/_bs_bootstrap.scss
index fd8a17a..9a7fcbe 100644
--- a/themes/bs_bootstrap/sass/variables/_bs_bootstrap.scss
+++ b/themes/bs_bootstrap/sass/variables/_bs_bootstrap.scss
@@ -5,3 +5,67 @@
 // Defines screen size between 'bigger' and 'smaller' screens. Usually this is
 // a size where navigation bar is hidden for smaller screen and toggler is show.
 $responsive-break: 'md' !default;
+
+// Font styling and line heights
+//
+// Variables and mixins are documented on the [Typey
+// homepage](https://github.com/jptaranto/typey).
+//
+
+// The length unit in which to output font size and margin values.
+// Supported values: px, em, rem.
+$base-unit:         'rem';
+
+// The font size set on the root html element.
+$base-font-size:    16px;
+
+// The base line height determines the basic unit of vertical rhythm.
+$base-line-height:  24px;
+
+// The method to calculate line-height.
+// Rhytm uses a vertical rhythm approach where line-height is specified as
+// a multiple of the $base-line-height.
+$line-height-method:       rhythm !default;
+
+// px fallbacks for rem units are needed for IE 8 and earlier.
+$rem-fallback:      false;
+
+// The font sizes in our type hierarchy as tee shirt sizes.
+$font-size: (
+        xxl:              32px,
+        xl:               24px,
+        l:                20px,
+        m:                $base-font-size,
+        s:                14px,
+        xs:               10px
+);
+
+// Typey allows you to alter font weights site-wide with this map.
+$font-weight: (
+        bold:             bold,
+        medium:           500,
+        normal:           normal,
+        light:            300,
+        lighter:          lighter,
+);
+
+// Monospace font stacks.
+$menlo:           Menlo, 'DejaVu Sans Mono', 'Ubuntu Mono', Courier, 'Courier New', monospace, sans-serif;
+
+// The font faces you specify in the $typefaces map can be used in the
+// typeface() mixin.
+$typefaces: (
+        monospace: (
+                font-family: $menlo,
+        ),
+);
+
+// Output a horizontal grid to help with debugging typography.
+$typey-debug: false;
+
+// Debug grid coloring
+$typey-debug-color:        #4affff !default;
+
+
+// Miscellaneous variable
+$indent-amount: 2 * $base-font-size;