In the list of change requests, regarding font sizes Dave asked: “Also if you can make it so those values can be changed in the browser. The way they have it set up, I can’t play with via the debugger, and that’s much faster than going back and forth in the editor.”

The font sizes in the base Retrospect theme are set using CSS variables. I’ve never worked with CSS variables before, so I asked my friend ChatGPT 4o: “In the Chrome dev tools, I am viewing a site where the font-size is set with a css variable. How can I try out a new font-size in the dev tools?”

ChatGPT answered:

---

Nice — Chrome DevTools is great for this kind of experimentation! If the font-size is set using a CSS variable, you can easily test a new value by overriding that variable or applying a direct style.

Here are your options:

---

✅ Option 1: Override the CSS variable in DevTools

Example situation:

The element has this style:

font-size: var(--wp--preset--font-size--small);

To test a new size:

1. Open Chrome DevTools (Right-click > Inspect).
2. Find the element in the Elements panel.
3. In the Styles pane on the right, find the rule that uses the variable.
4. Right below it, add a new line and override the variable:

--wp--preset--font-size--small: 24px;

You’re directly changing the variable value — everything using it will update.

🔁 If multiple elements use that variable, they’ll all reflect your test size immediately.

---

✅ Option 2: Add a temporary inline override

If you just want to test the result on a single element without affecting others:

1. In the same Styles panel, add:

font-size: 24px !important;

This overrides the variable usage completely.

---

✅ Option 3: Modify the variable on the :root or body

Some variables are defined globally on the :root or body element. You can go to the Styles pane for html or body, find the declaration like:

:root {
  --wp--preset--font-size--small: 16px;
}

And change it there to:

--wp--preset--font-size--small: 24px;

That updates the variable site-wide — great for testing global changes.

---

🎯 Pro Tip: See the resolved size

If you hover over the computed font-size in DevTools, Chrome will show you:

• The computed pixel value
• The source CSS variable