UX: Bump up base font size 1px, add smaller text size option

UX: Bump up base font size 1px, add smaller text size option

diff --git a/app/assets/javascripts/discourse/controllers/preferences/interface.js.es6 b/app/assets/javascripts/discourse/controllers/preferences/interface.js.es6
index c9b8d79..b1dbc21 100644
--- a/app/assets/javascripts/discourse/controllers/preferences/interface.js.es6
+++ b/app/assets/javascripts/discourse/controllers/preferences/interface.js.es6
@@ -20,7 +20,7 @@ const USER_HOMES = {
   5: "top"
 };
 
-const TEXT_SIZES = ["normal", "larger", "largest"];
+const TEXT_SIZES = ["smaller", "normal", "larger", "largest"];
 
 export default Ember.Controller.extend(PreferencesTabController, {
   @computed("makeThemeDefault")
diff --git a/app/assets/stylesheets/common/foundation/base.scss b/app/assets/stylesheets/common/foundation/base.scss
index adf8476..ab3e2cc 100644
--- a/app/assets/stylesheets/common/foundation/base.scss
+++ b/app/assets/stylesheets/common/foundation/base.scss
@@ -14,6 +14,10 @@ html {
   overflow-y: scroll;
   direction: ltr;
 
+  &.text-size-smaller {
+    font-size: $base-font-size-smaller;
+  }
+
   &.text-size-larger {
     font-size: $base-font-size-larger;
   }
diff --git a/app/assets/stylesheets/common/foundation/variables.scss b/app/assets/stylesheets/common/foundation/variables.scss
index b2090dd..1e64ab9 100644
--- a/app/assets/stylesheets/common/foundation/variables.scss
+++ b/app/assets/stylesheets/common/foundation/variables.scss
@@ -32,9 +32,10 @@ $bronze: #cd7f32 !default;
 // Fonts
 // --------------------------------------------------
 
-$base-font-size: 14px !default;
-$base-font-size-larger: 16px !default;
-$base-font-size-largest: 18px !default;
+$base-font-size-smaller: 13px !default;
+$base-font-size: 15px !default;
+$base-font-size-larger: 17px !default;
+$base-font-size-largest: 19px !default;
 $base-font-family: Helvetica, Arial, sans-serif !default;
 
 // Font-size defintions, multiplier ^ (step / interval)
diff --git a/app/assets/stylesheets/mobile/discourse.scss b/app/assets/stylesheets/mobile/discourse.scss
index c91e185..8b833ca 100644
--- a/app/assets/stylesheets/mobile/discourse.scss
+++ b/app/assets/stylesheets/mobile/discourse.scss
@@ -4,15 +4,6 @@
 // throughout the Discourse application
 
 // Base Elements
-html {
-  font-size: $base-font-size + 1; // Increasing overall font-size on mobile by 1px
-  &.text-size-larger {
-    font-size: $base-font-size-larger + 1;
-  }
-  &.text-size-largest {
-    font-size: $base-font-size-largest + 1;
-  }
-}
 
 body {
   background-color: $secondary;
diff --git a/app/models/user_option.rb b/app/models/user_option.rb
index 95b0d75..e51f10b 100644
--- a/app/models/user_option.rb
+++ b/app/models/user_option.rb
@@ -29,7 +29,7 @@ class UserOption < ActiveRecord::Base
   end
 
   def self.text_sizes
-    @text_sizes ||= Enum.new(normal: 0, larger: 1, largest: 2)
+    @text_sizes ||= Enum.new(normal: 0, larger: 1, largest: 2, smaller: 3)
   end
 
   validates :text_size_key, inclusion: { in: UserOption.text_sizes.values }
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index f06d08a..7eaf1b6 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -912,6 +912,7 @@ en:
 
       text_size:
         title: "Text Size"
+        smaller: "Smaller"
         normal: "Normal"
         larger: "Larger"
         largest: "Largest"
diff --git a/config/site_settings.yml b/config/site_settings.yml
index ff5b8c1..d69c5af 100644
--- a/config/site_settings.yml
+++ b/config/site_settings.yml
@@ -1824,6 +1824,7 @@ user_preferences:
     type: enum
     default: normal
     choices:
+      - smaller
       - normal
       - larger
       - largest

GitHub sha: 675bf941

1 Like