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).
1 Like
Hmm, I’ve not seen this myself, can you share the project so we can take a look at what’s going on?
Cheers!
Sure thing @dan → Test.elements. 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 (or 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.
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.
Agreed, it’s on the list to go over again.
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?
There will be defaults, it’s unfinished…
1 Like
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 
1 Like
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.
+1 for public bug list
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.
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 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.