# Font sizes differ between Elements and Safari preview

**URL:** <https://forums.realmacsoftware.com/t/font-sizes-differ-between-elements-and-safari-preview/45556>\
**Category:** RapidWeaver Elements\
**Created:** [December 9, 2024, 2:06pm UTC](https://forums.realmacsoftware.com/t/font-sizes-differ-between-elements-and-safari-preview/45556 "2024-12-09T14:06:48Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![anon68150607](https://avatars.discourse-cdn.com/v4/letter/a/4bbf92/32.png) [@anon68150607](https://forums.realmacsoftware.com/u/anon68150607)\
**Post date:** [December 9, 2024, 2:06pm UTC](https://forums.realmacsoftware.com/t/font-sizes-differ-between-elements-and-safari-preview/45556/1 "2024-12-09T14:06:48Z")

</div>

I’ve just been playing around with the ‘typography element’ (it needs some love) and noticed that there is a discrepancy between what Elements shows in the editor (smaller text) vs what is displayed in the Safari preview (bigger text).

 ![CleanShot 2024-12-09 at 09.04.33@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/6/f/6f3790ea0470e78d12e0aa346fd4b3eed77f72df.jpeg)

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [December 9, 2024, 3:04pm UTC](https://forums.realmacsoftware.com/t/font-sizes-differ-between-elements-and-safari-preview/45556/2 "2024-12-09T15:04:57Z")

</div>

Hmm, I’ve not seen this myself, can you share the project so we can take a look at what’s going on?

Cheers!

---

<div class="post-metadata">

**Author:** ![anon68150607](https://avatars.discourse-cdn.com/v4/letter/a/4bbf92/32.png) [@anon68150607](https://forums.realmacsoftware.com/u/anon68150607)\
**Post date:** [December 9, 2024, 4:35pm UTC](https://forums.realmacsoftware.com/t/font-sizes-differ-between-elements-and-safari-preview/45556/3 "2024-12-09T16:35:03Z")

</div>

Sure thing @dan → [Test.elements](elementsapp://downloadDocument/EaX2ouF1cjxF). At first I thought I had inadvertently scaled the text within my browser, but that wasn’t the case.

I wonder if it might have something to do with [CSS font/text sizing](https://web.dev/blog/font-size-adjust) (or [size-adjust](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/size-adjust)) as often fonts will render at different visual sizes despite being the same px/em/etc size. The browser vendors introduced CSS font size-adjust to enable designers and developers to account for this, and to help reduce layout shift when web fonts are loaded.

BTW adding fonts to a project needs A LOT of work, as the process is really not intuitive, requires you to add them one-by-one, and doesn’t allow for variations between normal, bold and italic (no light, heavy, etc) - and there’s absolutely no support for variable fonts.

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [December 9, 2024, 6:56pm UTC](https://forums.realmacsoftware.com/t/font-sizes-differ-between-elements-and-safari-preview/45556/4 "2024-12-09T18:56:07Z")

</div>

I’ve taken a “quick” look and it might be because you’re not setting a font size, you’re just leaving it to the Browser to decide, you’ll probably get different results in different browsers…

You can fix this by choosing a size in the Typography area, Elements and Safari should then match.

> [@anon68150607](#):
>
> BTW adding fonts to a project needs A LOT of work, as the process is really not intuitive, requires you to add them one-by-one, and doesn’t allow for variations between normal, bold and italic (no light, heavy, etc) - and there’s absolutely no support for variable fonts.

Agreed, it’s on the list to go over again.

---

<div class="post-metadata">

**Author:** ![anon68150607](https://avatars.discourse-cdn.com/v4/letter/a/4bbf92/32.png) [@anon68150607](https://forums.realmacsoftware.com/u/anon68150607)\
**Post date:** [December 9, 2024, 7:04pm UTC](https://forums.realmacsoftware.com/t/font-sizes-differ-between-elements-and-safari-preview/45556/5 "2024-12-09T19:04:38Z")

</div>

Unfortunately that didn’t fix it for me, and the text size within the Text Style inspector of the typography element is meaningless (set to 9xl, but no change - see image).

What the idea of having ‘None’ for Font Family and Font Size in the Typography section of the Theme Inspector? Shouldn’t ‘base’ be default? Why should the user be required to set a font size if Elements could set ‘base’ (or ‘inherit’ or whatever) as the default?

 ![CleanShot 2024-12-09 at 14.02.55@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/7/4/74d68883808bd026e1ea11771b60aa6c9caa31bd.jpeg)

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [December 9, 2024, 7:14pm UTC](https://forums.realmacsoftware.com/t/font-sizes-differ-between-elements-and-safari-preview/45556/6 "2024-12-09T19:14:03Z")

</div>

> [@anon68150607](#):
>
> What the idea of having ‘None’ for Font Family and Font Size in the Typography section of the Theme Inspector? Shouldn’t ‘base’ be default? Why should the user be required to set a font size if Elements could set ‘base’ (or ‘inherit’ or whatever) as the default?

There will be defaults, it’s unfinished…

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [December 9, 2024, 7:19pm UTC](https://forums.realmacsoftware.com/t/font-sizes-differ-between-elements-and-safari-preview/45556/7 "2024-12-09T19:19:00Z")

</div>

> [@anon68150607](#):
>
> Unfortunately that didn’t fix it for me, and the text size within the Text Style inspector of the typography element is meaningless (set to 9xl, but no change - see image).

I think you’ve been hit by the editor update bug (this should fixed in the next build).  
Try creating another page, switch to it, then switch back.

And here’s a little video for you with some context 🙏

---

<div class="post-metadata">

**Author:** ![anon68150607](https://avatars.discourse-cdn.com/v4/letter/a/4bbf92/32.png) [@anon68150607](https://forums.realmacsoftware.com/u/anon68150607)\
**Post date:** [December 9, 2024, 7:27pm UTC](https://forums.realmacsoftware.com/t/font-sizes-differ-between-elements-and-safari-preview/45556/8 "2024-12-09T19:27:51Z")

</div>

Thanks @Dan. When I opened the document again it had updated to the larger font. Still having issues getting heading sizes (h1, etc) set in a Typography element to take the values from the Theme Editor, but I’m just going to hold back working with text until an update for it is pushed.

Is there a public facing bug database where we can search for bugs to get some idea of what has and has not been reported? I know the Forum is sort of intended to be that, but there’s so much other noise many of the feature/bug details get lost in the mix.

---

<div class="post-metadata">

**Author:** ![sbchasin](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/sbchasin/32/26943_2.png) [@sbchasin](https://forums.realmacsoftware.com/u/sbchasin)\
**Post date:** [December 9, 2024, 7:29pm UTC](https://forums.realmacsoftware.com/t/font-sizes-differ-between-elements-and-safari-preview/45556/9 "2024-12-09T19:29:28Z")

</div>

> [@anon68150607](#):
>
> Is there a public facing bug database where we can search for bugs to get some idea of what has and has not been reported?

+1 for public bug list

---

<div class="post-metadata">

**Author:** ![Flash](https://avatars.discourse-cdn.com/v4/letter/f/f475e1/32.png) [@Flash](https://forums.realmacsoftware.com/u/Flash)\
**Post date:** [December 9, 2024, 7:35pm UTC](https://forums.realmacsoftware.com/t/font-sizes-differ-between-elements-and-safari-preview/45556/10 "2024-12-09T19:35:03Z")

</div>

> [@anon68150607](#):
>
> What the idea of having ‘None’ for Font Family and Font Size in the Typography section of the Theme Inspector?

I would imagine this is to default to the system fonts of the OS that is browsing the site. System fonts is my default. At least that is my wish. I will always use the rem or pixels to spec sizes as I have found that to be more reliable, mostly.

---

<div class="post-metadata">

**Author:** ![anon68150607](https://avatars.discourse-cdn.com/v4/letter/a/4bbf92/32.png) [@anon68150607](https://forums.realmacsoftware.com/u/anon68150607)\
**Post date:** [December 9, 2024, 7:43pm UTC](https://forums.realmacsoftware.com/t/font-sizes-differ-between-elements-and-safari-preview/45556/11 "2024-12-09T19:43:07Z")

</div>

The browser will always use the default system fonts if the specified fonts aren’t available - if None is synonymous with System Default, then it should probably be named as such.

As for font size, [Tailwind uses a base font size of 1rem/16px by default](https://tailwindcss.com/docs/font-size) which is pretty much standard. None would imply no size is specified, when in fact it’s either using Tailwind’s base size, or the System/Browser Default size - which could get interesting when users have set their preferred font size to something other than the default setting.
