diff --git a/public/res/core.js b/public/res/core.js
index f1470dc1..93938e8d 100644
--- a/public/res/core.js
+++ b/public/res/core.js
@@ -329,6 +329,19 @@ define([
 
     // Create the layout
     var $editorButtonsElt;
+    var maxWidthMap = [
+        { screenWidth: 0, maxWidth: 600 },
+        { screenWidth: 1000, maxWidth: 700 },
+        { screenWidth: 1200, maxWidth: 800 },
+        { screenWidth: 1400, maxWidth: 900 },
+    ];
+    var maxWidthMapReversed = maxWidthMap.slice(0).reverse();
+    function getMaxWidth() {
+        var actualWidth = $(window).width();
+        return _.find(maxWidthMapReversed, function(value) {
+            return actualWidth > value.screenWidth;
+        }).maxWidth;
+    }
     function createLayout() {
         var layoutGlobalConfig = {
             closable: true,
@@ -348,6 +361,12 @@ define([
             north__minSize: 49,
             center__minWidth: 250,
             center__minHeight: 180,
+            east__onAlert: function() {
+                window.location.href = 'viewer';
+            },
+            south__onAlert: function() {
+                window.location.href = 'viewer';
+            },
             fxSettings: {
                 easing: "easeInOutQuad",
                 duration: 350
@@ -371,7 +390,7 @@ define([
                     bottomMargin < 0 && (bottomMargin = 0);
                     aceEditor.renderer.setScrollMargin(0, bottomMargin, 0, 0);
                     setTimeout(function() {
-                        var padding = (aceEditor.renderer.$size.scrollerWidth - settings.maxWidth) / 2;
+                        var padding = (aceEditor.renderer.$size.scrollerWidth - getMaxWidth()) / 2;
                         if(padding < constants.EDITOR_DEFAULT_PADDING) {
                             padding = constants.EDITOR_DEFAULT_PADDING;
                         }
@@ -403,7 +422,6 @@ define([
                 south__minSize: 200
             }));
         }
-        settings.maxWidth && $('#preview-contents').css('max-width', (settings.maxWidth + 30) + 'px');
         $(".navbar").click(function() {
             layout.allowOverflow('north');
         });
@@ -441,8 +459,8 @@ define([
     var $titleContainer;
     var marginWidth = 18 * 2 + 25 + 25;
     var titleWidth = 18 + 348;
-    var leftButtonsWidth = 18 * 4 + 79 + 158 + 159 + 79;
-    var rightButtonsWidth = 18 + 79;
+    var leftButtonsWidth = 18 * 4 + 80 + 160 + 160 + 80;
+    var rightButtonsWidth = 18 + 80;
     var buttonsDropdownWidth = 40;
     function adjustWindow() {
         if(!window.viewerMode) {
@@ -678,6 +696,49 @@ define([
         else {
             document.body.innerHTML = bodyIndexHTML;
         }
+        
+        var styleContent = '';
+
+        // Apply font
+        function applyFont(size, screenWidth) {
+            screenWidth = screenWidth || 0;
+            //var codeFontSize = settings.editorFontSize;
+            //var codeLineHeight = Math.round(codeFontSize * 20 / 12);
+            var previewFontSize = Math.round(size * 8 / 7);
+            styleContent += [
+                '@media (min-width: ' + screenWidth + 'px) {',
+                '#wmd-input, .textarea-helper {',
+                '   font-size: ' + size + 'px;',
+                //'   font-family: ' + settings.editorFontFamily + ';',
+                '}',
+                '#preview-contents {',
+                '   font-size: ' + previewFontSize + 'px;',
+                '}',
+                '}',
+            ].join('\n');
+        }
+        applyFont(14);
+        applyFont(15, 600);
+        applyFont(16, 1200);
+                
+        function applyMaxWidth(maxWidth, screenWidth) {
+            styleContent += [
+                '@media (min-width: ' + screenWidth + 'px) {',
+                '#preview-contents {',
+                '   max-width: ' + (maxWidth + 30) + 'px;',
+                '}',
+                '}',
+            ].join('\n');
+        }
+        _.each(maxWidthMap, function(entry) {
+            applyMaxWidth(entry.maxWidth, entry.screenWidth);
+        });
+        
+        // Apply dynamic stylesheet
+        var style = document.createElement("style");
+        style.innerHTML = styleContent;
+        document.head.appendChild(style);
+
         $navbarElt = $('.navbar');
         $leftBtnElts = $navbarElt.find('.left-buttons');
         $rightBtnElts = $navbarElt.find('.right-buttons');
@@ -781,27 +842,18 @@ define([
             $('#wmd-input').replaceWith(function() {
                 return $('<textarea id="wmd-input">').addClass(this.className).addClass('form-control');
             });
+            
+            // Create UI layout after textarea
+            createLayout();
         }
+        else {
+            // Create UI layout before ACE editor
+            createLayout();
 
-        $editorElt = $("#wmd-input, .textarea-helper").css({
-            // Apply editor font
-            "font-family": settings.editorFontFamily,
-            "font-size": settings.editorFontSize + "px",
-            "line-height": Math.round(settings.editorFontSize * (20 / 12)) + "px"
-        });
-
-        if(!window.lightMode) {
             // ACE editor
             createAceEditor();
-
-            // Editor's element
-            $editorElt.find('.ace_content').css({
-                "background-size": "64px " + Math.round(settings.editorFontSize * (20 / 12)) + "px",
-            });
         }
-
-        // UI layout
-        createLayout();
+        $editorElt = $('#wmd-input');
 
         // Do periodic tasks
         intervalId = window.setInterval(function() {
diff --git a/public/res/extensions/buttonPublish.js b/public/res/extensions/buttonPublish.js
index 545b6cf9..0fc766aa 100644
--- a/public/res/extensions/buttonPublish.js
+++ b/public/res/extensions/buttonPublish.js
@@ -33,7 +33,7 @@ define([
     };
 
     buttonPublish.onCreateButton = function() {
-        var button = crel('button', {
+        var button = crel('a', {
             class: 'btn btn-success button-publish',
             title: 'Update document publication'
         }, crel('i', {
diff --git a/public/res/extensions/buttonSync.js b/public/res/extensions/buttonSync.js
index 7e5126f7..bd0cc05b 100644
--- a/public/res/extensions/buttonSync.js
+++ b/public/res/extensions/buttonSync.js
@@ -56,7 +56,7 @@ define([
     };
 
     buttonSync.onCreateButton = function() {
-        var button = crel('button', {
+        var button = crel('a', {
             class: 'btn btn-success button-synchronize',
             title: 'Synchronize all'
         }, crel('i', {
diff --git a/public/res/html/bodyIndex.html b/public/res/html/bodyIndex.html
index 72b02617..dcce5276 100644
--- a/public/res/html/bodyIndex.html
+++ b/public/res/html/bodyIndex.html
@@ -195,7 +195,7 @@
 			<div class="modal-header">
 				<button type="button" class="close" data-dismiss="modal"
 					aria-hidden="true">&times;</button>
-				<h3 class="modal-title">Manage documents</h3>
+				<h2 class="modal-title">Manage documents</h2>
 			</div>
 			<div class="modal-body">
 				<div></div>
@@ -251,7 +251,7 @@
 			<div class="modal-header">
 				<button type="button" class="close" data-dismiss="modal"
 					aria-hidden="true">&times;</button>
-				<h3 class="modal-title">Hyperlink</h3>
+				<h2 class="modal-title">Hyperlink</h2>
 			</div>
 			<div class="modal-body">
 				<p>Please provide the link URL and an optional title:</p>
@@ -278,7 +278,7 @@
 			<div class="modal-header">
 				<button type="button" class="close" data-dismiss="modal"
 					aria-hidden="true">&times;</button>
-				<h3 class="modal-title">Image</h3>
+				<h2 class="modal-title">Image</h2>
 			</div>
 			<div class="modal-body">
 				<p>Please provide the image URL and an optional title:</p>
@@ -307,7 +307,7 @@
 			<div class="modal-header">
 				<button type="button" class="close" data-dismiss="modal"
 					aria-hidden="true">&times;</button>
-				<h3 class="modal-title">Google+ image import</h3>
+				<h2 class="modal-title">Google+ image import</h2>
 			</div>
 			<div class="modal-body">
 				<div class="form-horizontal">
@@ -351,7 +351,7 @@
 			<div class="modal-header">
 				<button type="button" class="close" data-dismiss="modal"
 					aria-hidden="true">&times;</button>
-				<h3 class="modal-title">Delete</h3>
+				<h2 class="modal-title">Delete</h2>
 			</div>
 			<div class="modal-body">
 				<p>
@@ -379,7 +379,7 @@
 			<div class="modal-header">
 				<button type="button" class="close" data-dismiss="modal"
 					aria-hidden="true">&times;</button>
-				<h3 class="modal-title">Open from URL</h3>
+				<h2 class="modal-title">Open from URL</h2>
 			</div>
 			<div class="modal-body">
 				<p>Please provide a link to a Markdown document.</p>
@@ -410,7 +410,7 @@
 			<div class="modal-header">
 				<button type="button" class="close" data-dismiss="modal"
 					aria-hidden="true">&times;</button>
-				<h3 class="modal-title">Import from disk</h3>
+				<h2 class="modal-title">Import from disk</h2>
 			</div>
 			<div class="modal-body">
 				<p>Please select your Markdown files here:</p>
@@ -437,7 +437,7 @@
 			<div class="modal-header">
 				<button type="button" class="close" data-dismiss="modal"
 					aria-hidden="true">&times;</button>
-				<h3 class="modal-title">Convert HTML to Markdown</h3>
+				<h2 class="modal-title">Convert HTML to Markdown</h2>
 			</div>
 			<div class="modal-body">
 				<p>Please select your HTML files here:</p>
@@ -484,7 +484,7 @@
 			<div class="modal-header">
 				<button type="button" class="close" data-dismiss="modal"
 					aria-hidden="true">&times;</button>
-				<h3 class="modal-title">Export to Dropbox</h3>
+				<h2 class="modal-title">Export to Dropbox</h2>
 			</div>
 			<div class="modal-body">
 				<p>
@@ -532,7 +532,7 @@
 			<div class="modal-header">
 				<button type="button" class="close" data-dismiss="modal"
 					aria-hidden="true">&times;</button>
-				<h3 class="modal-title">Synchronization</h3>
+				<h2 class="modal-title">Synchronization</h2>
 			</div>
 			<div class="modal-body">
 				<p class="msg-sync-list hide">
@@ -569,9 +569,9 @@
 			<div class="modal-header">
 				<button type="button" class="close" data-dismiss="modal"
 					aria-hidden="true">&times;</button>
-				<h3 class="modal-title">
+				<h2 class="modal-title">
 					Publish on <span class="publish-provider-name"></span>
-				</h3>
+				</h2>
 			</div>
 			<div class="modal-body">
 				<div class="form-horizontal">
@@ -825,7 +825,7 @@
 			<div class="modal-header">
 				<button type="button" class="close" data-dismiss="modal"
 					aria-hidden="true">&times;</button>
-				<h3 class="modal-title">Publication</h3>
+				<h2 class="modal-title">Publication</h2>
 			</div>
 			<div class="modal-body">
 				<p class="msg-publish-list hide">
@@ -858,7 +858,7 @@
 			<div class="modal-header">
 				<button type="button" class="close" data-dismiss="modal"
 					aria-hidden="true">&times;</button>
-				<h3 class="modal-title">Sharing</h3>
+				<h2 class="modal-title">Sharing</h2>
 			</div>
 			<div class="modal-body">
 				<p class="msg-share-list hide">
@@ -893,7 +893,7 @@
 			<div class="modal-header">
 				<button type="button" class="close" data-dismiss="modal"
 					aria-hidden="true">&times;</button>
-				<h3 class="modal-title">Settings</h3>
+				<h2 class="modal-title">Settings</h2>
 				<ul class="nav nav-tabs">
 					<li class="active"><a class="action-load-settings"
 						href="#tabpane-settings-basic" data-toggle="tab">Basic</a></li>
@@ -1183,7 +1183,7 @@
 		<div class="modal-content">
 
 			<div class="modal-header">
-				<h3 class="modal-title">Ooops...</h3>
+				<h2 class="modal-title">Ooops...</h2>
 			</div>
 			<div class="modal-body">
 				<p>StackEdit has stopped because another instance was running in
@@ -1205,7 +1205,7 @@
 		<div class="modal-content">
 
 			<div class="modal-header">
-				<h3 class="modal-title">Redirection</h3>
+				<h2 class="modal-title">Redirection</h2>
 			</div>
 			<div class="modal-body">
 			    <p class="redirect-msg"></p>
@@ -1225,7 +1225,7 @@
 		<div class="modal-content">
 
 			<div class="modal-header">
-				<h3 class="modal-title">Reset application</h3>
+				<h2 class="modal-title">Reset application</h2>
 			</div>
 			<div class="modal-body">
 				<p>This will delete all your local documents.</p>
@@ -1246,7 +1246,7 @@
 		<div class="modal-content">
 
 			<div class="modal-header">
-				<h3 class="modal-title">Import documents and settings</h3>
+				<h2 class="modal-title">Import documents and settings</h2>
 			</div>
 			<div class="modal-body">
 				<p>This will delete all existing local documents.</p>
diff --git a/public/res/html/dialogAutoSyncGdrive.html b/public/res/html/dialogAutoSyncGdrive.html
index f840bc60..a49fac1d 100644
--- a/public/res/html/dialogAutoSyncGdrive.html
+++ b/public/res/html/dialogAutoSyncGdrive.html
@@ -4,7 +4,7 @@
 		<div class="modal-header">
 			<button type="button" class="close" data-dismiss="modal"
 				aria-hidden="true">&times;</button>
-			<h3 class="modal-title">AutoSync to <%= providerName %></h3>
+			<h2 class="modal-title">AutoSync to <%= providerName %></h2>
 		</div>
 		<div class="modal-body">
 			<p>
diff --git a/public/res/html/dialogExportGdrive.html b/public/res/html/dialogExportGdrive.html
index 841b7c00..61a236fc 100644
--- a/public/res/html/dialogExportGdrive.html
+++ b/public/res/html/dialogExportGdrive.html
@@ -4,7 +4,7 @@
 		<div class="modal-header">
 			<button type="button" class="close" data-dismiss="modal"
 				aria-hidden="true">&times;</button>
-			<h3 class="modal-title">Export to <%= providerName %></h3>
+			<h2 class="modal-title">Export to <%= providerName %></h2>
 		</div>
 		<div class="modal-body">
 			<p>
diff --git a/public/res/libs/layout.js b/public/res/libs/layout.js
index 60d930ec..6adcf9b8 100644
--- a/public/res/libs/layout.js
+++ b/public/res/libs/layout.js
@@ -793,6 +793,7 @@ $.layout.defaults = {
 	,	onswap_end:				null		// CALLBACK when pane ENDS being Swapped
 	,	ondrag_start:			null		// CALLBACK when pane STARTS being ***MANUALLY*** Resized
 	,	ondrag_end:				null		// CALLBACK when pane ENDS being ***MANUALLY*** Resized
+    ,   onAlert:                null
 	}
 /*
  *	PANE-SPECIFIC SETTINGS
@@ -3478,7 +3479,7 @@ $.fn.layout = function (opts) {
 			if (s.minSize > s.maxSize) { // INSUFFICIENT ROOM FOR PANE TO OPEN!
 				syncPinBtns(pane, false); // make sure pin-buttons are reset
 				if (!noAlert && o.tips.noRoomToOpen)
-					alert(o.tips.noRoomToOpen);
+					o.onAlert ? o.onAlert(o.tips.noRoomToOpen) : alert(o.tips.noRoomToOpen);
 				return queueNext(); // ABORT
 			}
 
diff --git a/public/res/styles/base.less b/public/res/styles/base.less
index 544098f9..22d18822 100644
--- a/public/res/styles/base.less
+++ b/public/res/styles/base.less
@@ -9,99 +9,68 @@
 @kbd-border-color: fade(@text-color, 25%);
 @blockquote-border-color: #eee;
 @blockquote-bg: #f8f8f8;
-@title-base-size: 15px;
+@title-base-size: 1em;
 @code-color: @text-color;
 @code-bg: fade(@text-color, 4%);
 @pre-bg: @blockquote-bg;
 @pre-border-color: @blockquote-border-color;
-
+@font-size-base: 15px;
+@line-height-base: 1.45;
+@p-margin: 1.1em;
 
 @font-face {
-    font-family: 'Open Sans';
+    font-family: 'Source Sans Pro';
     font-style: normal;
     font-weight: 300;
-    src: local('Open Sans Light'), local('OpenSans-Light'), url("../font/OpenSans-Light-webfont.woff") format('woff');
+    src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url("../font/SourceSansPro-Light-webfont.woff") format('woff');
 }
 @font-face {
-    font-family: 'Open Sans';
+    font-family: 'Source Sans Pro';
     font-style: normal;
     font-weight: 400;
-    src: local('Open Sans'), local('OpenSans'), url("../font/OpenSans-Regular-webfont.woff") format('woff');
+    src: local('Source Sans Pro'), local('SourceSansPro'), url("../font/SourceSansPro-Regular-webfont.woff") format('woff');
 }
 @font-face {
-    font-family: 'Open Sans';
+    font-family: 'Source Sans Pro';
     font-style: normal;
     font-weight: 700;
-    src: local('Open Sans Bold'), local('OpenSans-Bold'), url("../font/OpenSans-Bold-webfont.woff") format('woff');
+    src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url("../font/SourceSansPro-Bold-webfont.woff") format('woff');
 }
 @font-face {
-    font-family: 'Open Sans';
+    font-family: 'Source Sans Pro';
     font-style: italic;
     font-weight: 300;
-    src: local('Open Sans Light Italic'), local('OpenSansLight-Italic'), url("../font/OpenSans-LightItalic-webfont.woff") format('woff');
+    src: local('Source Sans Pro Light Italic'), local('SourceSansProLight-Italic'), url("../font/SourceSansPro-LightItalic-webfont.woff") format('woff');
 }
 @font-face {
-    font-family: 'Open Sans';
+    font-family: 'Source Sans Pro';
     font-style: italic;
     font-weight: 400;
-    src: local('Open Sans Italic'), local('OpenSans-Italic'), url("../font/OpenSans-Italic-webfont.woff") format('woff');
+    src: local('Source Sans Pro Italic'), local('SourceSansPro-Italic'), url("../font/SourceSansPro-Italic-webfont.woff") format('woff');
 }
 @font-face {
-    font-family: 'Open Sans';
+    font-family: 'Source Sans Pro';
     font-style: italic;
     font-weight: 700;
-    src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'), url("../font/OpenSans-BoldItalic-webfont.woff") format('woff');
-}
-@media screen and (-webkit-min-device-pixel-ratio:0) {
-    @font-face {
-        font-family: 'Open Sans';
-        font-style: normal;
-        font-weight: 300;
-        src: local('Open Sans Light'), local('OpenSans-Light'), url('../font/OpenSans-Light-webfont.svg') format('svg');
-    }
-}
-@media screen and (-webkit-min-device-pixel-ratio:0) {
-    @font-face {
-        font-family: 'Open Sans';
-        font-style: normal;
-        font-weight: 400;
-        src: local('Open Sans'), local('OpenSans'), url('../font/OpenSans-Regular-webfont.svg') format('svg');
-    }
-}
-@media screen and (-webkit-min-device-pixel-ratio:0) {
-    @font-face {
-        font-family: 'Open Sans';
-        font-style: normal;
-        font-weight: 700;
-        src: local('Open Sans Bold'), local('OpenSans-Bold'), url('../font/OpenSans-Bold-webfont.svg') format('svg');
-    }
-}
-@media screen and (-webkit-min-device-pixel-ratio:0) {
-    @font-face {
-        font-family: 'Open Sans';
-        font-style: italic;
-        font-weight: 300;
-        src: local('Open Sans Light Italic'), local('OpenSansLight-Italic'), url('../font/OpenSans-LightItalic-webfont.svg') format('svg');
-    }
-}
-@media screen and (-webkit-min-device-pixel-ratio:0) {
-    @font-face {
-        font-family: 'Open Sans';
-        font-style: italic;
-        font-weight: 400;
-        src: local('Open Sans Italic'), local('OpenSans-Italic'), url('../font/OpenSans-Italic-webfont.svg') format('svg');
-    }
-}
-@media screen and (-webkit-min-device-pixel-ratio:0) {
-    @font-face {
-        font-family: 'Open Sans';
-        font-style: italic;
-        font-weight: 700;
-        src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'), url('../font/OpenSans-BoldItalic-webfont.svg') format('svg');
-    }
+    src: local('Source Sans Pro Bold Italic'), local('SourceSansPro-BoldItalic'), url("../font/SourceSansPro-BoldItalic-webfont.woff") format('woff');
 }
 
-@font-family-sans-serif: 'Open Sans', "Trebuchet MS", Helvetica, sans-serif;
+@font-face {
+    font-family: 'Source Code Pro';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Source Code Pro'), local('SourceCodePro-Regular'), url("../font/SourceCodePro-Regular-webfont.woff") format('woff');
+}
+@font-face {
+    font-family: 'Source Code Pro';
+    font-style: normal;
+    font-weight: 700;
+    src: local('Source Code Pro Bold'), local('SourceCodePro-Bold'), url("../font/SourceCodePro-Bold-webfont.woff") format('woff');
+}
+
+@font-family-sans-serif: "Source Sans Pro", sans-serif;
+@font-family-monospace: "Source Code Pro", monospace;
+@font-family-monospace-letter-spacing: -0.06em;
 
 body {
     -webkit-font-smoothing: antialiased;
@@ -131,43 +100,32 @@ a code {
 	color: inherit;
 }
 
-h1 { font-size: floor(@title-base-size * 2.60); }
-h2 { font-size: floor(@title-base-size * 2.15); }
-h3 { font-size: ceil(@title-base-size * 1.70); }
-h4 { font-size: ceil(@title-base-size * 1.25); }
-h5 { font-size:  @title-base-size; }
-h6 { font-size: ceil(@title-base-size * 0.85); }
+h1 { font-size: @title-base-size * 2.60; }
+h2 { font-size: @title-base-size * 2.15; }
+h3 { font-size: @title-base-size * 1.70; }
+h4 { font-size: @title-base-size * 1.25; }
+h5 { font-size: @title-base-size; }
+h6 { font-size: @title-base-size * 0.85; }
 
-h1 {
-	margin: 60px 0 60px;
-}
-
-h2 {
-	margin: 50px 0 50px;
-}
-
-h3 {
-	margin: 40px 0 40px;
-}
-
-h4, h5, h6 {
-	margin: 25px 0 25px;
+h1, h2, h3, h4, h5, h6 {
+	margin: 1.3em 0;
 }
 
 p,
 pre,
 pre.prettyprint,
 blockquote {
-	margin: 0 0 15px;
+	margin: 0 0 @p-margin;
 }
 
 hr {
-	margin: 30px 0;
+	margin: 2em 0;
 }
 
 code, pre {
-	font-family: Menlo, Consolas, "Courier New", monospace;
-	font-size: 12px !important;
+	font-family: @font-family-monospace;
+    letter-spacing: @font-family-monospace-letter-spacing;
+	font-size: 0.95em !important;
 }
 
 pre, pre.prettyprint {
@@ -229,8 +187,8 @@ blockquote {
 	border-bottom-right-radius: 5px;
 	padding: 15px 20px;
 	p {
-	    margin-bottom: 15px;
-	    font-size: @font-size-base;
+	    margin-bottom: @p-margin;
+	    font-size: 1em;
 	    line-height: @line-height-base;
 	}
 	
@@ -241,9 +199,9 @@ blockquote {
 }
 
 ul,ol {
-	margin-bottom: 15px;
+	margin-bottom: @p-margin;
 	ul,ol {
-		margin-bottom: 15px;
+		margin-bottom: @p-margin;
 	}
 }
 
@@ -279,14 +237,14 @@ kbd {
 
 [class^="icon-"], [class*=" icon-"] {
 	display: inline-block;
-	line-height: 14px;
+	line-height: 1.2em;
 	vertical-align: middle;
 	background-repeat: no-repeat;
 }
 
 // Custom icons (not from Font Awesome)
 .icon-code {
-	font-size: 80%;
+	font-size: 83%;
 	&:before {
     	margin-left: 0.1em;
     	margin-right: 0.6em;
diff --git a/public/res/styles/main.less b/public/res/styles/main.less
index 017efe0f..981d89e8 100644
--- a/public/res/styles/main.less
+++ b/public/res/styles/main.less
@@ -57,6 +57,7 @@
 @document-panel-width: 320px;
 @jgrowl-width: 260px;
 @resizer-size: 32px;
+@editor-line-weight: 1.7;
 
 /* Bootstrap */
 @body-bg: @secondary-bg-light;
@@ -65,7 +66,8 @@
 @link-hover-color: darken(@link-color, 20%);
 @input-bg: @secondary-bg-lighter;
 @input-border: @secondary-border-color;
-@input-height-base: 38px;
+@input-height-base: 42px;
+@input-height-slim: 38px;
 @blockquote-border-color: fade(@secondary-desaturated, 7.5%);
 @blockquote-bg: fade(@secondary-desaturated, 5%);
 @code-color: @secondary-color-darkest;
@@ -136,26 +138,10 @@ body {
     outline: none !important;
 }
 
-// Bug with SVG font on Windows
-@media screen and (-webkit-min-device-pixel-ratio:0) {
-    select {
-        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-    }
-}
-
 #preview-contents {
 	padding: 15px;
 	margin: 0 auto 180px;
-    font-size: 15px;
-    line-height: 1.6;
-    blockquote p {
-        font-size: 15px;
-        line-height: 1.6;
-    }
-    code, pre {
-        font-size: 13px !important;
-        line-height: 1.6;
-    }
+    text-align: justify;
 }
 
 .working {
@@ -407,12 +393,12 @@ a {
 	border-radius: 0;
 	.left-space, .right-space {
 		width: 25px;
-		height: @input-height-base;
+		height: @input-height-slim;
 	}
 	.nav {
 		float: left;
 		margin: 5px 9px;
-		height: @input-height-base;
+		height: @input-height-slim;
 		& > li {
 			display: inline-block;
 		}
@@ -432,8 +418,8 @@ a {
 		}
 	}
 	.btn {
-		height: @input-height-base;
-		padding: 8px 10px;
+		height: @input-height-slim;
+		padding: 6px 8px;
 	}
 	.btn-group > .btn {
 		&.disabled,
@@ -448,8 +434,9 @@ a {
 	.file-title-navbar {
 		display: inline-block;
 		vertical-align: middle;
-		padding: 4px 15px;
-		font-size: 20px;
+		padding: 1px 15px;
+		font-size: 1.5em;
+        line-height: 1.4em;
 		font-weight: 200;
 		max-width: @file-title-width;
 		overflow: hidden;
@@ -462,6 +449,7 @@ a {
         .input-file-title {
     		width: @file-title-width;
             font-size: 16px;
+            height: @input-height-slim;
         }
 	}
 
@@ -469,7 +457,7 @@ a {
 		display: inline-block;
 		vertical-align: middle;
 	    overflow: hidden;
-        height: @input-height-base;
+        height: @input-height-slim;
         width: 60px;
         padding-top: 9px;
 		.bar {
@@ -488,7 +476,7 @@ a {
 	.offline-status > div {
 		display: inline-block;
 		vertical-align: middle;
-		height: @input-height-base;
+		height: @input-height-slim;
 		padding: 9px 10px;
 	}
 	
@@ -530,7 +518,7 @@ a {
 	overflow: initial;
     .collapse-button {
        	background-color: @panel-button-bg-color;
-        height: @input-height-base;
+        height: @input-height-slim;
         border-radius: 8px;
 		position: absolute;
 		margin-top: 6px;
@@ -738,11 +726,12 @@ a {
 		input {
 			cursor: pointer;
 			margin: 0 16px;
-			height: @input-height-base;
+			height: @input-height-slim;
 		}
 	}
 	.input-rename {
 		width: 220px;
+		height: @input-height-slim;
 	}
 	.name, .file-count {
 		padding: 9px 20px 9px 15px;		
@@ -978,7 +967,7 @@ a {
 			line-height: 0;
 			i {
     			font-size: 16px;
-                height: 9.5px;
+                height: 10.5px;
                 overflow: hidden;
 			}
 		}
@@ -1202,24 +1191,29 @@ a {
 }
 
 #wmd-input {
-	border-radius: 0;
+    font-family: @font-family-monospace;
+    letter-spacing: @font-family-monospace-letter-spacing;
+	font-size: @font-size-base;
+    border-radius: 0;
 	color: @tertiary-color-dark;
 	.box-shadow(none);
 	resize: none;
 	border: none;
     padding: 0 @padding-base-horizontal;
+    line-height: @editor-line-weight;
 	div& {
 		padding: 0;
 	}
 }
 
 .textarea-helper {
+    font-family: @font-family-monospace;
+    font-size: @font-size-base;
     position: absolute;
     top: -100px;
     height: 1px;
     padding: 0 @padding-base-horizontal;
-    font-size: @font-size-base;
-    line-height: @line-height-base;
+    line-height: @editor-line-weight;
     position: absolute;
     overflow: auto;
     white-space: pre-wrap;
@@ -1260,17 +1254,8 @@ div.dropdown-menu,  {
     a:focus {
         color: @link-hover-color;
     }
-    h1 {
-    	margin: 40px 0;
-    }
-    h2 {
-    	margin: 30px 0;
-    }
-    h3 {
-    	margin: 20px 0;
-    }
-    h4, h5, h6 {
-    	margin: 15px 0;
+    h1, h2, h3, h4, h5, h6 {
+    	margin: 1em 0;
     }
 }
     
@@ -1286,7 +1271,7 @@ div.dropdown-menu,  {
     margin-top: -2px;
     margin-left: -2px;
     margin-right: 3px;
-    font-size: 14px;
+    font-size: 1em;
     vertical-align: top;
     .file-title-navbar & {
         font-size: 16px;
diff --git a/public/res/themes/original.less b/public/res/themes/original.less
index 2b6d8cde..3451b7bb 100644
--- a/public/res/themes/original.less
+++ b/public/res/themes/original.less
@@ -83,9 +83,7 @@
 
 // Navbar buttons
 .btn-success {
-    border-width: 0;
-    .buttons-dropdown & {
-        color: #777;
+    .buttons-dropdown .dropdown-menu & {
         &:hover,
         &:focus,
         &:active {
diff --git a/public/res/themes/school.less b/public/res/themes/school.less
index 7fee7a34..e22f5616 100644
--- a/public/res/themes/school.less
+++ b/public/res/themes/school.less
@@ -55,6 +55,7 @@
 	.ace_content {
 	    background-image: url("../img/school-line.png");
 		background-repeat: repeat;
+        background-size: 64px 1.65em;
 	}
 
     .ace_print-margin-layer {