diff --git a/Mac/Base.lproj/Preferences.storyboard b/Mac/Base.lproj/Preferences.storyboard
index 222404ba9..39114909f 100644
--- a/Mac/Base.lproj/Preferences.storyboard
+++ b/Mac/Base.lproj/Preferences.storyboard
@@ -242,7 +242,6 @@
                         </constraints>
                     </view>
                     <connections>
-                        <outlet property="articleTextSizePopup" destination="Z6O-Zt-V1g" id="qNu-i3-fFB"/>
                         <outlet property="defaultBrowserPopup" destination="Ci4-fW-KjU" id="7Nh-nU-Sbc"/>
                         <outlet property="showUnreadCountCheckbox" destination="mwT-nY-TrX" id="ZH9-P5-JkT"/>
                     </connections>
@@ -430,16 +429,16 @@
                         <autoresizingMask key="autoresizingMask"/>
                         <subviews>
                             <customView translatesAutoresizingMaskIntoConstraints="NO" id="7UM-iq-OLB" customClass="PreferencesTableViewBackgroundView" customModule="NetNewsWire" customModuleProvider="target">
-                                <rect key="frame" x="20" y="44" width="180" height="334"/>
+                                <rect key="frame" x="20" y="44" width="180" height="344"/>
                                 <subviews>
                                     <scrollView borderType="none" autohidesScrollers="YES" horizontalLineScroll="26" horizontalPageScroll="10" verticalLineScroll="26" verticalPageScroll="10" hasHorizontalScroller="NO" horizontalScrollElasticity="none" translatesAutoresizingMaskIntoConstraints="NO" id="PaF-du-r3c">
-                                        <rect key="frame" x="1" y="0.0" width="178" height="333"/>
+                                        <rect key="frame" x="1" y="0.0" width="178" height="343"/>
                                         <clipView key="contentView" id="cil-Gq-akO">
-                                            <rect key="frame" x="0.0" y="0.0" width="178" height="333"/>
+                                            <rect key="frame" x="0.0" y="0.0" width="178" height="343"/>
                                             <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                                             <subviews>
                                                 <tableView verticalHuggingPriority="750" allowsExpansionToolTips="YES" columnAutoresizingStyle="lastColumnOnly" columnReordering="NO" columnSelection="YES" columnResizing="NO" multipleSelection="NO" autosaveColumns="NO" rowHeight="24" viewBased="YES" id="aTp-KR-y6b">
-                                                    <rect key="frame" x="0.0" y="0.0" width="178" height="333"/>
+                                                    <rect key="frame" x="0.0" y="0.0" width="178" height="343"/>
                                                     <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                                                     <size key="intercellSpacing" width="3" height="2"/>
                                                     <color key="backgroundColor" name="controlBackgroundColor" catalog="System" colorSpace="catalog"/>
@@ -546,7 +545,7 @@
                                 <rect key="frame" x="83" y="20" width="117" height="24"/>
                             </customView>
                             <customView translatesAutoresizingMaskIntoConstraints="NO" id="Y7D-xQ-wep">
-                                <rect key="frame" x="208" y="20" width="222" height="358"/>
+                                <rect key="frame" x="208" y="20" width="222" height="368"/>
                             </customView>
                         </subviews>
                         <constraints>
@@ -601,16 +600,16 @@
                         <autoresizingMask key="autoresizingMask"/>
                         <subviews>
                             <customView translatesAutoresizingMaskIntoConstraints="NO" id="pjs-G4-byk" customClass="PreferencesTableViewBackgroundView" customModule="NetNewsWire" customModuleProvider="target">
-                                <rect key="frame" x="20" y="44" width="180" height="327"/>
+                                <rect key="frame" x="20" y="44" width="180" height="337"/>
                                 <subviews>
                                     <scrollView borderType="none" autohidesScrollers="YES" horizontalLineScroll="26" horizontalPageScroll="10" verticalLineScroll="26" verticalPageScroll="10" hasHorizontalScroller="NO" horizontalScrollElasticity="none" translatesAutoresizingMaskIntoConstraints="NO" id="29T-r2-ckC">
-                                        <rect key="frame" x="1" y="0.0" width="178" height="326"/>
+                                        <rect key="frame" x="1" y="0.0" width="178" height="336"/>
                                         <clipView key="contentView" id="dXw-GY-TP8">
-                                            <rect key="frame" x="0.0" y="0.0" width="178" height="326"/>
+                                            <rect key="frame" x="0.0" y="0.0" width="178" height="336"/>
                                             <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                                             <subviews>
                                                 <tableView verticalHuggingPriority="750" allowsExpansionToolTips="YES" columnAutoresizingStyle="lastColumnOnly" columnReordering="NO" columnSelection="YES" columnResizing="NO" multipleSelection="NO" autosaveColumns="NO" rowHeight="24" viewBased="YES" id="dfn-Vn-oDp">
-                                                    <rect key="frame" x="0.0" y="0.0" width="178" height="326"/>
+                                                    <rect key="frame" x="0.0" y="0.0" width="178" height="336"/>
                                                     <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                                                     <size key="intercellSpacing" width="3" height="2"/>
                                                     <color key="backgroundColor" name="controlBackgroundColor" catalog="System" colorSpace="catalog"/>
@@ -713,7 +712,7 @@
                                 <rect key="frame" x="83" y="20" width="117" height="24"/>
                             </customView>
                             <customView translatesAutoresizingMaskIntoConstraints="NO" id="N1N-pE-gBL">
-                                <rect key="frame" x="208" y="20" width="222" height="351"/>
+                                <rect key="frame" x="208" y="20" width="222" height="361"/>
                             </customView>
                         </subviews>
                         <constraints>
diff --git a/Mac/MainWindow/Detail/DetailWebViewController.swift b/Mac/MainWindow/Detail/DetailWebViewController.swift
index 9e13e9129..b1f8de853 100644
--- a/Mac/MainWindow/Detail/DetailWebViewController.swift
+++ b/Mac/MainWindow/Detail/DetailWebViewController.swift
@@ -40,13 +40,7 @@ final class DetailWebViewController: NSViewController, WKUIDelegate {
 		}
 	}
 	
-	private var articleTextSize = AppDefaults.shared.articleTextSize {
-		didSet {
-			if articleTextSize != oldValue {
-				reloadHTML()
-			}
-		}
-	}
+	private var articleTextSize = AppDefaults.shared.articleTextSize
 
 	#if !MAC_APP_STORE
 		private var webInspectorEnabled: Bool {
@@ -146,7 +140,10 @@ final class DetailWebViewController: NSViewController, WKUIDelegate {
 	}
 	
 	@objc func userDefaultsDidChange(_ note: Notification) {
-		self.articleTextSize = AppDefaults.shared.articleTextSize
+		if articleTextSize != AppDefaults.shared.articleTextSize {
+			articleTextSize = AppDefaults.shared.articleTextSize
+			webView.evaluateJavaScript("updateTextSize(\"\(articleTextSize.cssClass)\");")
+		}
 	}
 	
 	// MARK: Media Functions
diff --git a/Mac/MainWindow/Detail/styleSheet.css b/Mac/MainWindow/Detail/styleSheet.css
index 1dba70762..0d83a62ea 100644
--- a/Mac/MainWindow/Detail/styleSheet.css
+++ b/Mac/MainWindow/Detail/styleSheet.css
@@ -4,7 +4,26 @@ body {
 	padding-left: 48px;
 	padding-right: 48px;
 	font-family: -apple-system;
-	font-size: [[font-size]]px;
+}
+
+.smallText {
+	font-size: 14px;
+}
+
+.mediumText {
+	font-size: 16px;
+}
+
+.largeText {
+	font-size: 18px;
+}
+
+.xlargeText {
+	font-size: 20px;
+}
+
+.xxlargeText {
+	font-size: 22px;
 }
 
 :root {
diff --git a/Shared/Article Rendering/ArticleRenderer.swift b/Shared/Article Rendering/ArticleRenderer.swift
index 2daae0382..da1f2c116 100644
--- a/Shared/Article Rendering/ArticleRenderer.swift	
+++ b/Shared/Article Rendering/ArticleRenderer.swift	
@@ -166,7 +166,11 @@ private extension ArticleRenderer {
 		}
 		
 		d["body"] = body
-
+		
+		#if os(macOS)
+		d["text_size_class"] = AppDefaults.shared.articleTextSize.cssClass
+		#endif
+		
 		var components = URLComponents()
 		components.scheme = Self.imageIconScheme
 		components.path = article.articleID
@@ -287,9 +291,7 @@ private extension ArticleRenderer {
 	}
 	#else
 	func styleSubstitutions() -> [String: String] {
-		var d = [String: String]()
-		d["font-size"] = String(describing: AppDefaults.shared.articleTextSize.fontSize)
-		return d
+		return [String: String]()
 	}
 	#endif
 
diff --git a/Shared/Article Rendering/ArticleTextSize.swift b/Shared/Article Rendering/ArticleTextSize.swift
index 6911e8ba1..00a95039f 100644
--- a/Shared/Article Rendering/ArticleTextSize.swift	
+++ b/Shared/Article Rendering/ArticleTextSize.swift	
@@ -15,24 +15,22 @@ enum ArticleTextSize: Int, CaseIterable, Identifiable {
 	case xlarge = 4
 	case xxlarge = 5
 	
-	#if os(macOS)
-	var fontSize: Int {
+	var id: String { description() }
+	
+	var cssClass: String {
 		switch self {
 		case .small:
-			return 14
+			return "smallText"
 		case .medium:
-			return 16
+			return "mediumText"
 		case .large:
-			return 18
+			return "largeText"
 		case .xlarge:
-			return 20
+			return "xLargeText"
 		case .xxlarge:
-			return 22
+			return "xxLargeText"
 		}
 	}
-	#endif
-	
-	var id: String { description() }
 	
 	func description() -> String {
 		switch self {
diff --git a/Shared/Article Rendering/main.js b/Shared/Article Rendering/main.js
index 0b42889bd..927d7f6a4 100644
--- a/Shared/Article Rendering/main.js	
+++ b/Shared/Article Rendering/main.js	
@@ -131,6 +131,12 @@ function stopMediaPlayback() {
 	});
 }
 
+function updateTextSize(cssClass) {
+	var bodyElement = document.getElementById("bodyContainer");
+	bodyElement.classList.remove("smallText", "mediumText", "largeText", "xLargeText", "xxLargeText");
+	bodyElement.classList.add(cssClass);
+}
+
 function error() {
 	document.body.innerHTML = "error";
 }
diff --git a/Shared/Article Rendering/template.html b/Shared/Article Rendering/template.html
index f5f1e7aa6..295b28fd4 100644
--- a/Shared/Article Rendering/template.html	
+++ b/Shared/Article Rendering/template.html	
@@ -11,5 +11,5 @@
 <div class="articleTitle"><h1>[[title]]</h1></div>
 <div class="[[dateline_style]]">[[date_medium]]</div>
 <div class="externalLink">[[external_link]]</div>
-<div class="articleBody">[[body]]</div>
+<div id="bodyContainer" class="articleBody [[text_size_class]]">[[body]]</div>
 </article>