diff --git a/webclient/src/App.js b/webclient/src/App.js
index 9f8ba8d..cbce1bd 100644
--- a/webclient/src/App.js
+++ b/webclient/src/App.js
@@ -21,7 +21,7 @@ function App() {
 	const [isFullScreen, setIsFullScreen] = useState(!!document.fullscreenElement);
 	const [waitingWorker, setWaitingWorker] = useState(null);
 	const [settingsOpen, setSettingsOpen] = useState(false);
-	const defaultBodyFontSize = 16;
+	const defaultBodyFontSize = 1.0;
 	const defaultStoryFontSize = 1.2;
 	const [bodyFontSize, setBodyFontSize] = useState(Number(localStorage.getItem('bodyFontSize')) || defaultBodyFontSize);
 	const [storyFontSize, setStoryFontSize] = useState(Number(localStorage.getItem('storyFontSize')) || defaultStoryFontSize);
@@ -52,8 +52,8 @@ function App() {
 
 	const changeBodyFontSize = (amount) => {
 		const newSize = bodyFontSize + amount;
-		setBodyFontSize(newSize);
-		localStorage.setItem('bodyFontSize', newSize);
+		setBodyFontSize(parseFloat(newSize.toFixed(1)));
+		localStorage.setItem('bodyFontSize', newSize.toFixed(1));
 	};
 
 	const changeStoryFontSize = (amount) => {
@@ -62,14 +62,18 @@ function App() {
 		localStorage.setItem('storyFontSize', newSize.toFixed(1));
 	};
 
-	const resetFontSettings = () => {
+	const resetBodyFontSize = () => {
 		setBodyFontSize(defaultBodyFontSize);
 		localStorage.removeItem('bodyFontSize');
+	};
+
+	const resetStoryFontSize = () => {
 		setStoryFontSize(defaultStoryFontSize);
 		localStorage.removeItem('storyFontSize');
 	};
 
-	const fontSettingsChanged = bodyFontSize !== defaultBodyFontSize || storyFontSize !== defaultStoryFontSize;
+	const bodyFontSettingsChanged = bodyFontSize !== defaultBodyFontSize;
+	const storyFontSettingsChanged = storyFontSize !== defaultStoryFontSize;
 
 	useEffect(() => {
 		const onSWUpdate = e => {
@@ -119,7 +123,7 @@ function App() {
 	}, [theme]);
 
 	useEffect(() => {
-		document.documentElement.style.fontSize = `${bodyFontSize}px`;
+		document.documentElement.style.fontSize = `${bodyFontSize}rem`;
 	}, [bodyFontSize]);
 
 	useEffect(() => {
@@ -153,17 +157,18 @@ function App() {
 						</div>
 						<div className="setting-group">
 							<h4>Body Font Size</h4>
-							<button onClick={() => changeBodyFontSize(-1)}>-</button>
-							<span className="font-size-display">{bodyFontSize}px</span>
-							<button onClick={() => changeBodyFontSize(1)}>+</button>
+							<button onClick={() => changeBodyFontSize(-0.1)}>-</button>
+							<span className="font-size-display">{bodyFontSize.toFixed(1)}</span>
+							<button onClick={() => changeBodyFontSize(0.1)}>+</button>
+							<button onClick={resetBodyFontSize} disabled={!bodyFontSettingsChanged}>Reset</button>
 						</div>
 						<div className="setting-group">
 							<h4>Story Font Size</h4>
 							<button onClick={() => changeStoryFontSize(-0.1)}>-</button>
-							<span className="font-size-display">{storyFontSize.toFixed(1)}rem</span>
+							<span className="font-size-display">{storyFontSize.toFixed(1)}</span>
 							<button onClick={() => changeStoryFontSize(0.1)}>+</button>
+							<button onClick={resetStoryFontSize} disabled={!storyFontSettingsChanged}>Reset</button>
 						</div>
-						<button onClick={resetFontSettings} disabled={!fontSettingsChanged}>Reset Font Settings</button>
 					</div>
 				</div>
 			}