diff --git a/src/devtools/views/Profiler/ChartNode.js b/src/devtools/views/Profiler/ChartNode.js
index 121f46ecb2..a85f7702a3 100644
--- a/src/devtools/views/Profiler/ChartNode.js
+++ b/src/devtools/views/Profiler/ChartNode.js
@@ -1,7 +1,6 @@
 // @flow
 
 import React from 'react';
-import { textHeight } from './constants';
 
 import styles from './ChartNode.css';
 
@@ -57,7 +56,7 @@ export default function ChartNode({
             opacity: isDimmed ? 0.75 : 1,
             display: width < minWidthToDisplay ? 'none' : 'block',
           }}
-          y={height < textHeight ? -textHeight : 0}
+          y={0}
         >
           <div className={styles.Div} style={textStyle}>
             {label}
diff --git a/src/devtools/views/Profiler/CommitFlamegraph.js b/src/devtools/views/Profiler/CommitFlamegraph.js
index e9f8718d16..676a2f1334 100644
--- a/src/devtools/views/Profiler/CommitFlamegraph.js
+++ b/src/devtools/views/Profiler/CommitFlamegraph.js
@@ -6,9 +6,9 @@ import { FixedSizeList } from 'react-window';
 import { ProfilerContext } from './ProfilerContext';
 import NoCommitData from './NoCommitData';
 import CommitFlamegraphListItem from './CommitFlamegraphListItem';
-import { barHeight } from './constants';
 import { scale } from './utils';
 import { StoreContext } from '../context';
+import { SettingsContext } from '../Settings/SettingsContext';
 
 import styles from './CommitFlamegraph.css';
 
@@ -84,6 +84,7 @@ type Props = {|
 |};
 
 function CommitFlamegraph({ chartData, commitTree, height, width }: Props) {
+  const { lineHeight } = useContext(SettingsContext);
   const { selectFiber, selectedFiberID } = useContext(ProfilerContext);
 
   const selectedChartNodeIndex = useMemo<number>(() => {
@@ -135,7 +136,7 @@ function CommitFlamegraph({ chartData, commitTree, height, width }: Props) {
       innerElementType={InnerElementType}
       itemCount={chartData.depth}
       itemData={itemData}
-      itemSize={barHeight}
+      itemSize={lineHeight}
       width={width}
     >
       {CommitFlamegraphListItem}
diff --git a/src/devtools/views/Profiler/CommitFlamegraphListItem.js b/src/devtools/views/Profiler/CommitFlamegraphListItem.js
index d5bc614542..00566d272b 100644
--- a/src/devtools/views/Profiler/CommitFlamegraphListItem.js
+++ b/src/devtools/views/Profiler/CommitFlamegraphListItem.js
@@ -1,10 +1,11 @@
 // @flow
 
-import React, { Fragment, memo, useCallback } from 'react';
+import React, { Fragment, memo, useCallback, useContext } from 'react';
 import { areEqual } from 'react-window';
-import { barHeight, barWidthThreshold } from './constants';
+import { barWidthThreshold } from './constants';
 import { getGradientColor } from './utils';
 import ChartNode from './ChartNode';
+import { SettingsContext } from '../Settings/SettingsContext';
 
 import type { ItemData } from './CommitFlamegraph';
 
@@ -25,6 +26,7 @@ function CommitFlamegraphListItem({ data, index, style }: Props) {
   } = data;
   const { renderPathNodes, maxSelfDuration, rows } = chartData;
 
+  const { lineHeight } = useContext(SettingsContext);
   const handleClick = useCallback(
     (event: SyntheticMouseEvent<*>, id: number, name: string) => {
       event.stopPropagation();
@@ -89,7 +91,7 @@ function CommitFlamegraphListItem({ data, index, style }: Props) {
         return (
           <ChartNode
             color={color}
-            height={barHeight}
+            height={lineHeight}
             isDimmed={index < selectedChartNodeIndex}
             key={id}
             label={label}
diff --git a/src/devtools/views/Profiler/CommitRanked.js b/src/devtools/views/Profiler/CommitRanked.js
index 55e039ae90..379dab481d 100644
--- a/src/devtools/views/Profiler/CommitRanked.js
+++ b/src/devtools/views/Profiler/CommitRanked.js
@@ -6,9 +6,9 @@ import { FixedSizeList } from 'react-window';
 import { ProfilerContext } from './ProfilerContext';
 import NoCommitData from './NoCommitData';
 import CommitRankedListItem from './CommitRankedListItem';
-import { barHeight } from './constants';
 import { scale } from './utils';
 import { StoreContext } from '../context';
+import { SettingsContext } from '../Settings/SettingsContext';
 
 import styles from './CommitRanked.css';
 
@@ -82,6 +82,7 @@ type Props = {|
 |};
 
 function CommitRanked({ chartData, commitTree, height, width }: Props) {
+  const { lineHeight } = useContext(SettingsContext);
   const { selectedFiberID, selectFiber } = useContext(ProfilerContext);
 
   const selectedFiberIndex = useMemo(
@@ -107,7 +108,7 @@ function CommitRanked({ chartData, commitTree, height, width }: Props) {
       innerElementType="svg"
       itemCount={chartData.nodes.length}
       itemData={itemData}
-      itemSize={barHeight}
+      itemSize={lineHeight}
       width={width}
     >
       {CommitRankedListItem}
diff --git a/src/devtools/views/Profiler/CommitRankedListItem.js b/src/devtools/views/Profiler/CommitRankedListItem.js
index 996a207469..5a25b3c49d 100644
--- a/src/devtools/views/Profiler/CommitRankedListItem.js
+++ b/src/devtools/views/Profiler/CommitRankedListItem.js
@@ -1,10 +1,11 @@
 // @flow
 
-import React, { memo, useCallback } from 'react';
+import React, { memo, useCallback, useContext } from 'react';
 import { areEqual } from 'react-window';
-import { barHeight, minBarWidth } from './constants';
+import { minBarWidth } from './constants';
 import { getGradientColor } from './utils';
 import ChartNode from './ChartNode';
+import { SettingsContext } from '../Settings/SettingsContext';
 
 import type { ItemData } from './CommitRanked';
 
@@ -19,6 +20,8 @@ function CommitRankedListItem({ data, index, style }: Props) {
 
   const node = chartData.nodes[index];
 
+  const { lineHeight } = useContext(SettingsContext);
+
   const handleClick = useCallback(
     event => {
       event.stopPropagation();
@@ -36,7 +39,7 @@ function CommitRankedListItem({ data, index, style }: Props) {
   return (
     <ChartNode
       color={getGradientColor(node.value / chartData.maxValue)}
-      height={barHeight}
+      height={lineHeight}
       isDimmed={index < selectedFiberIndex}
       key={node.id}
       label={node.label}
diff --git a/src/devtools/views/Profiler/constants.js b/src/devtools/views/Profiler/constants.js
index d050882f2a..664dfe354b 100644
--- a/src/devtools/views/Profiler/constants.js
+++ b/src/devtools/views/Profiler/constants.js
@@ -1,10 +1,7 @@
 // @flow
 
-export const barHeight = 20;
 export const barWidthThreshold = 2;
 export const interactionCommitSize = 10;
 export const interactionLabelWidth = 200;
 export const maxBarWidth = 30;
-export const minBarHeight = 5;
 export const minBarWidth = 5;
-export const textHeight = 18;
diff --git a/src/devtools/views/Settings/SettingsContext.js b/src/devtools/views/Settings/SettingsContext.js
index 6913a6260a..1870ac82aa 100644
--- a/src/devtools/views/Settings/SettingsContext.js
+++ b/src/devtools/views/Settings/SettingsContext.js
@@ -5,7 +5,7 @@ import { useLocalStorage } from '../hooks';
 
 import type { BrowserTheme } from '../DevTools';
 
-export type DisplayDensity = 'compact' | 'comfortable';
+export type DisplayDensity = 'comfortable' | 'compact';
 export type Theme = 'auto' | 'light' | 'dark';
 
 type Context = {|
@@ -78,27 +78,24 @@ function SettingsContextController({
     settingsPortalContainer,
   ]);
 
+  const computedStyle = getComputedStyle((document.body: any));
   const comfortableLineHeight = parseInt(
-    getComputedStyle((document.body: any)).getPropertyValue(
-      '--comfortable-line-height-data'
-    ),
+    computedStyle.getPropertyValue('--comfortable-line-height-data'),
     10
   );
   const compactLineHeight = parseInt(
-    getComputedStyle((document.body: any)).getPropertyValue(
-      '--compact-line-height-data'
-    ),
+    computedStyle.getPropertyValue('--compact-line-height-data'),
     10
   );
 
   useLayoutEffect(() => {
     switch (displayDensity) {
-      case 'compact':
-        updateDisplayDensity('compact', documentElements);
-        break;
       case 'comfortable':
         updateDisplayDensity('comfortable', documentElements);
         break;
+      case 'compact':
+        updateDisplayDensity('compact', documentElements);
+        break;
       default:
         throw Error(`Unsupported displayDensity value "${displayDensity}"`);
     }
@@ -193,6 +190,15 @@ function updateDisplayDensity(
   updateStyleHelper(displayDensity, 'font-size-sans-large', documentElements);
   updateStyleHelper(displayDensity, 'font-size-sans-small', documentElements);
   updateStyleHelper(displayDensity, 'line-height-data', documentElements);
+
+  // Sizes and paddings/margins are all rem-based,
+  // so update the root font-size as well when the display preference changes.
+  const computedStyle = getComputedStyle((document.body: any));
+  const fontSize = computedStyle.getPropertyValue(
+    `--${displayDensity}-root-font-size`
+  );
+  const root = document.querySelector(':root');
+  ((root: any): HTMLElement).style.fontSize = fontSize;
 }
 
 function updateThemeVariables(
diff --git a/src/devtools/views/root.css b/src/devtools/views/root.css
index 0f25b7d321..e9690a01bc 100644
--- a/src/devtools/views/root.css
+++ b/src/devtools/views/root.css
@@ -142,6 +142,7 @@
   --compact-font-size-sans-normal: 12px;
   --compact-font-size-sans-large: 14px;
   --compact-line-height-data: 18px;
+  --compact-root-font-size: 16px;
 
   /* Comfortable density */
   --comfortable-font-size-monospace-small: 10px;
@@ -151,6 +152,7 @@
   --comfortable-font-size-sans-normal: 14px;
   --comfortable-font-size-sans-large: 16px;
   --comfortable-line-height-data: 22px;
+  --comfortable-root-font-size: 20px;
 
   /* GitHub.com system fonts */
   --font-family-monospace: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo,