diff --git a/source/_static/css/breeze.css b/source/_static/css/breeze.css
index c3db4c4..55c2406 100644
--- a/source/_static/css/breeze.css
+++ b/source/_static/css/breeze.css
@@ -1,217 +1,258 @@
 @import url('https://fonts.googleapis.com/css?family=Noto+Sans');
 
 /* color definitions */
 .iconred {
     color: #da4453;
 }
 .plasmablue {
     color: #3daee9;
 }
 .noblefir {
     color: #27ae60;
 }
 
 body {
     font-family: "Noto Sans","Helvetica Neue", Arial, sans-serif;
     font-size: 14px;
     color: #232627;
 }
 
 h1, h2, .rst-content .toctree-wrapper p.caption, h3, h4, h5, h6, legend {
     margin-top: 0;
     font-weight: 700;
     font-family: "Noto Sans", "Helvetica Neue", Arial, sans-serif;
 }
 
 p, ul > li, a {
     font-size: 14px;
 }
 
 a.reference, a:visited {
     color: #2980b9;
 }
 
 a.icon {
     color: #fcfcfc;
 }
 
 .flex {
     display: flex;
     flex-wrap: wrap;
     align-items: flex-start;
 }
 .flex > * {
     margin-right: 18px;
     max-width: 340px;
 }
 
 .flex > *:last-child {
     margin-right: 0;
 }
 
 .wy-nav-side {
     background-color: #eff0f1 !important;
     box-shadow: 0 1px 4px 0 rgba(0,0,0,.37);
 }
 
 .wy-side-nav-search {
     background-color: #27ae60 !important;
 }
 
 .wy-side-nav-search .icon-home:before {
     vertical-align: middle;
     font-size: 350%;
     display: "block";
 }
 
 .wy-side-nav-search > div.version {
     color: rgba(255,255,255,0.7);
 }
 
 .wy-side-nav-search input[type="text"] {
     border-radius: 4px;
     border: 0 solid transparent;
 }
 
 .wy-nav-content-wrap {
     background-color: #fcfcfc;
 }
 
 .wy-menu-vertical a {
     color: #232627;
 }
 
 .wy-menu-vertical .current a {
     color: #232627;
 }
 
 .wy-menu-vertical a:hover {
     background-color: #93cee9;
     cursor: pointer;
 }
 
 .wy-menu-vertical li.toctree-l2 > a:hover {
     background: #93cee9;
 }
 
 .wy-menu-vertical li.toctree-l2.current > a {
     background-color: #fcfcfc;
     color: #232627;
 }
 
 .wy-menu-vertical li a.current:last-of-type {
     background: #3daee9;
     color: #fcfcfc;
 }
 
 .wy-menu-vertical li.current a {
     color: #232627;
     border-top: none;
     border-bottom: none;
 }
 
 .wy-menu-vertical li.toctree-l2.current li.toctree-l3.current > a {
     background: #3daee9;
     color: #fcfcfc;
 }
 
 .wy-menu-vertical li.toctree-l2 li.toctree-l3 > a:hover {
     background: #93cee9;
 }
 
 .admonition {
     box-shadow: 1px 1px 2px 2px rgba(0,0,0,.17);
 }
 
 .admonition.caution .admonition-title {
     background-color: #fdbc4b;
 }
 .admonition.hint .admonition-title {
     background-color: #27ae60;
 }
 
 .btn {
     background-color: #eff0f1 !important;
     box-shadow: 0.5px 0.5px 0.5px 0.5px rgba(35,38,39,.1);
     border-color: #bdc3c7;
     border-radius: 3px;
     padding: 8px;
 }
 .btn:hover {
     border-color: #93cee9;
     background-color: #eff0f1 !important;
 }
 .btn:active {
     box-shadow: 0.5px 0.5px 0.5px 0.5px rgba(35,38,39,.1);
     padding: 8px;
 }
 
 
 [itemprop='articleBody'] {
     position: relative;
 }
 
 .intend {
     position: absolute;
     top: 0;
     right: 0;
     color: #7f8c8d;
 }
 .intend:before {
     content: "For "
 }
 
 .intend a + a:before {
     content: " and ";
     color: #7f8c8d;
 }
 
 .available {
     position: absolute;
     top: 30px;
     right: 0;
     color: #da4453;
 }
 
 .border img {
     border: 1px solid #bdc3c7;
 }
 
 .available.qwidgets:before {
     content: 'Not available for qWidgets'
 }
 
 .available.plasma:before {
     content: 'Not available for Plasma'
 }
 
 .available.plasma.qwidgets:before {
     content: 'Not available for Plasma and qWidgets'
 }
 
 @font-face {
     font-family:"icons";
     src:url("icons.eot?842739648e48d469142df14af06c1a3c");
     src:url("icons.eot?#iefix") format("embedded-opentype"),
         url("icons.woff2?842739648e48d469142df14af06c1a3c") format("woff2"),
         url("icons.woff?842739648e48d469142df14af06c1a3c") format("woff"),
         url("icons.ttf?842739648e48d469142df14af06c1a3c") format("truetype"),
         url("icons.svg?842739648e48d469142df14af06c1a3c#icons") format("svg");
     font-weight:normal;
     font-style:normal;
 }
 
 .fa-arrow-circle-left:before {
     font-family:"icons";
     content:"\f101";
 }
 
 .fa-arrow-circle-right:before {
     font-family:"icons";
     content:"\f102";
 }
 
 .icon-home:before {
     font-family:"icons";
     content:"\f104";
 }
+
+/*
+ * Add more spacing and a 1px seperator between sections */
+div[itemprop="articleBody"] .section:not(:first-of-type) {
+	margin-top: 20px;
+	padding-top: 20px;
+}
+
+div[itemprop="articleBody"] > .section > .section:not(:first-of-type) {
+	border-top: 1px solid #bdc3c7;
+	margin-top: 30px;
+	padding-top: 30px;
+}
+
+/* Increase font sized to have more visual difference */
+h1 {
+	font-size: 300%;
+	margin-bottom: 8px;
+	font-weight: normal;
+}
+h2 {
+	font-size: 240%;
+	margin-bottom: 8px;
+	font-weight: normal;
+}
+h3 {
+	font-size: 180%;
+	margin-bottom: 8px;
+	font-weight: normal;
+}
+h4 {
+	font-size: 140%;
+	margin-bottom: 8px;
+	font-weight: normal;
+}
+h5 {
+	font-size: 120%;
+	margin-bottom: 10px;
+	font-weight: normal;
+}
+
diff --git a/source/style/typography.rst b/source/style/typography.rst
index 3887270..7081055 100644
--- a/source/style/typography.rst
+++ b/source/style/typography.rst
@@ -1,155 +1,160 @@
 Typography
 ==========
-The guideline helps ensure that typography is always in harmony with the overall visual design.
+
+The guideline helps ensure that typography is always in harmony with the overall 
+visual design. These guidelines apply to application and widgets, but not to 
+documents.
+It is fine to use a wider range of different font sizes and formatings in 
+documents.
 
 Typeface Styles
 ---------------
 
 KDE's default font is *Hack* for monospace and *Noto Sans* for everything else. 
 The default font size is 10pt. KDE Plasma and Applications display seven 
 variants of this typeface.
 
 .. figure:: /img/Typography1.png
    :alt: Show different typefaces in KDE
    :figclass: border
    
    The seven default typeface styles
    
 Typeface settings can be adjusted by the user and have 
 :doc:`great influence on sizing and spacing  </layout/units>` in KDE's 
 workspace and applications.
 
 * The monospace typeface should be used for code content, filenames, file paths.
 * Typography is treated like any other visual element when considering 
   :doc:`spacing </layout/metrics>` and 
   :doc:`alignment </layout/alignment>`.
 * Multi-line blocks of text should be either left or right aligned; avoid center 
   alignment.
 * Limit the range of any dynamic type resizing to preserve the intended visual 
   hierarchy. For example, don't resize body text to be bigger than 
   the heading text. Or don't resize the section heading text to fit more words 
   so that it's smaller than the body text. Or don't resize text of relatively 
   lesser importance so that it's bigger than text or other visual elements that 
   should be of relatively greater importance.
 
 .. warning::
    |devicon| Never use **Text{}** in Kirigami or Plasma, because it  
    doesn't follow the system font rendering settings. See :ref:`typography-code` 
    for implemntation.
    
 .. warning::
    |devicon| Never use a hardcoded value of px or pt to define a 
    font size. See the entry about :doc:`units </layout/units>` for more 
    information.
 
 .. hint::
    |designicon| The px values are only for design and mockup; don't use them 
    for development.
 
     - Header 1: Noto Sans 18px
     - Header 2: Noto Sans 13px
     - Header 3: Noto Sans 12px
     - Header 4: Noto Sans 11px
     - Body: Noto Sans 10px
     - Code: Hack 10px
     - Small: Noto Sans 8px
 
 Guidelines
 ----------
 
 Components
 ^^^^^^^^^^
 
 Most :doc:`components </components/index>` have a recommended typeface style. 
 If you create a new component you should give it the same typeface style as 
 similar existing components.
 
 Content
 ^^^^^^^
 
 You can use any typeface styles to structure your content, but try not to 
 overuse the larger headings.
 
 When the visual design calls for an area of exceptional focus, a larger 
 typeface size may be used. In this case use a Light typeface weight to keep the 
 stroke width similar to other styles throughout the interface. All other 
 typeface characteristics for the typographic category should be maintained. For 
 such exceptions to be effective, they must be very rare.
 
 Text Color and Contrast
 ^^^^^^^^^^^^^^^^^^^^^^^
 
 The text :doc:`color <./color/index>` and 
 :doc:`background  color <./color/index>` can be varied to provide additional 
 hierarchical hints (e.g. selected text). However, the contrast between the text 
 and background color must be sufficient to preserve legibility of the text.
 
 Words per line
 ^^^^^^^^^^^^^^
 
 Unless the content is long-form text like a book or a report, try to keep line 
 lengths to no more than about eight to ten words per line. For styles requiring 
 the use of an all-caps typeface, try to keep line lengths to no more 
 than about three to four words per line.
 
 .. _typography-code:
 
 Code
 ----
 
 Kirigami
 ^^^^^^^^
 
 .. code-block:: qml
 
     ...
     import QtQuick.Controls 2.2 as Controls
     import org.kde.kirigami 2.4 as Kirigami
     ...
     Kirigami.Heading {
         level: 1
         text: "Header 1"
     }
     Kirigami.Heading {
         level: 4
         text: "Header 4"
     }
     Controls.Label {
         font.pointSize: 24
         text: "Extra large title"
     }
     Controls.Label {
         text: "Normal text in your application"
     }
     Controls.Label {
         text: "Use this to label buttons, checkboxes, ..."
     }
 
     
 Plasma
 ^^^^^^
 
 .. code-block:: qml
 
     ...
     import org.kde.plasma.extras 2.0 as PlasmaExtras
     import org.kde.plasma.components 3.0 as PlasmaComponents
     ...
     PlasmaExtras.Heading {
         level: 1
         text: "Header 1"
     }
     PlasmaExtras.Heading {
         level: 4
         text: "Header 4"
     }
     PlasmaComponents.Label {
         font.pointSize: 24
         text: "Extra large title"
     }
     PlasmaComponents.Label {
         text: "Normal text in your application"
     }
     PlasmaComponents.Label {
         text: "Use this to label buttons, checkboxes, ..."
     }