nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Font line spacing (?) gets weird once you choose any of the new theme options

NicoleJohnson

I made the mistake of immediately modifying one of my apps to use some of the new theme options, and 1) they don't seem to be working as I'd expect, and 2) I also can't seem to revert my app back to how it was.

Thankfully, I did have a template created from this app a few months ago that has the original settings. Take note that there is a title (heading 1) and a subtitle for the app in the upper left:

To illustrate what's happening, I've changed the theme to "Ocean," one of the new theme options. As you can see, the bulk of the text (the paragraph-sized text at least) is pretty much the same size visually as it was before. However, the title/heading 1 now takes up so much space that the subtitle underneath it isn't even visible anymore:

In the real app, I didn't realize immediately how much the look of the text had changed, and so I brought in Montserrat font through Google Fonts. Initially, I thought this was the issue, but you can see the overall layout of the text is pretty much the same as the previous screenshot:

Realizing today that I need to just revert my app back to how it was until these features work better, I found that I can't seem to do that. It seems that once you've chosen any of the new themes, the line spacing is just... stuck like this.

I don't have any web development experience, so in trying to figure out what is happening, I "inspected" heading 1 of the original version, and I see this:

When I inspect the same heading after changing the theme to "Ocean," some of the settings are different:

I don't know what the cause is or if these last two screenshots are all that relevant, but the new themes do not seem to be working in this regard?

You can better see just how large (and vertically offset?) the line spacing is on heading 1 when I highlight it:

It looks even worse when the text needs to wrap (heading 2):

Find more posts tagged with

ArcGIS Online

Accepted answers

All comments

JianxiaSong

@NicoleJohnson thanks for sharing detailed information. We are investigating it.

Wei_Ying

Hi @NicoleJohnson , this is as expected. As in new themes the text font changes even with the same type. Here is a comparison:

The headings font size are different in old and new theme (the number indicates the font size of the text type).

So when you use ocean theme, the heading 1 font is much bigger than in old theme which also affect the old theme. So here are some facts:
1. apps created by previous version earlier than this release will still use old theme.
2. new apps since this release will use new theme
3. We warn user to be careful if they want switch from old theme to a new theme for their existing apps. Some elements may not look good if you do so because the system structures of old and new theme are absolutely different and variables cannot be mapped accurately. So something odd might been seen if you do a switch (user may have to do lots manual work fixing the problems).
We would recommend not to switch if not that necessary or at least switch to a same mode theme（i.e. light theme-to-light theme，or dark theme-to-dark theme）.

However, if you are saying you cannot revert back to your original theme, that should be a problem. If you do not save and you refresh you app or click undo, your app should recover. Can you share us a copy of the app so we see what is the problem for reverting? Thank you!

NicoleJohnson

@Wei_Ying, thank you for pointing out that the new themes have much larger default font sizes (in pixels). What I'm still stuck on is why the line heights are so different (much taller) even after I adjust the font size? It's almost like when I choose heading 1, the line height is still as if my text were 48 px even when I've adjusted it to be smaller.

Something I'll try when I'm back at a computer is comparing rems to px and see if I'm still seeing the line height issues.

Also, "revert" was totally the wrong word for me to use to describe what I wanted to do, sorry. Essentially I wanted to manually change everything back to how it was: Avenir Next font, same font sizes as ever (in rems at least), same line spacing heights as ever. I just couldn't get it to actually look anything like the old way because of the line heights.

NicoleJohnson

@Wei_Ying, here's a comparison of some text themed the old way:

And the new way--there's now a lot of negative space between the lines despite the font size and line spacing staying the same (at least as far as settings I can access through the builder):

I totally understand warning users that opting for a new theme will make changes to their app. What I didn't expect is that I can't even manually return everything back to how it was. It really seems as if the headings are "locked in" to appearing a certain way. For example, if I choose heading 1 then change the pixel size to 16, there's a ton of negative space above the text, as if it's expecting much larger text to be there:

There's much less negative space (maybe half as much?) when doing this with the old theme options:

Text.gif

NicoleJohnson

Here's Esri's ultimate response from customer care:

After reaching out internally regarding this issue, it appears as if this is was likely caused by the release, but is unfortunately expected behavior after a change of this nature. As Wei said on the community post, " "Some elements may not look good if you do so because the system structures of old and new theme are absolutely different and variables cannot be mapped accurately. So something odd might been seen if you do a switch"
That is to say, we can't log a bug for this - but if you have specific concerns or requests for updates to the new theme, I'd be happy to write up and create an Enhancement request for you, and you could also post on the ArcGIS Ideas forum as well.
We cannot advise on what accessibility guidelines/requirements may be - However, if you find something that does not meet accessibility requirements that would absolutely be a valid Enhancement request.

I found that I can somewhat recreate what I'm used to seeing (that is, not a lot of negative space above headings but rather spread more evenly above and below) if I use a line spacing of less than 1. This doesn't work though if there's only one line of text with descenders (g, y, etc.)--those get cut off.

I don't know if this is kosher but at this point I'm giving up. 🙃

Wei_Ying

@NicoleJohnson really sorry about the inconvenience bring from the theme change and we appreciate your feedback. The new theme is a breaking change but we have to do so as the new theme framework provides a better structure for defining colors, typography, and other style variables. And it is helpful for further theme feature extending.
We do make efforts to prevent breaking user existing apps by ensuring the old theme working still. That's why we recommended not switch to new theme for your existing apps to avoid unexpected change and additional work.

But based on your feedback, we can still improve the user experience:
1. "I can't even manually return everything back to how it was."

If you didn't save the app, by clicking Undo or refresh the app should bring you back to previous setting. If not it would be a bug. Please contact support to give us a ticket.

2. "if I choose heading 1 then change the pixel size to 16, there's a ton of negative space above the text, as if it's expecting much larger text to be"

The spacing is current based on the heading typography's original theme size, which here is 48. That's why you see a large gap. We will see if we could improve this when user change the font size.

Thank you again.

NicoleJohnson

@Wei_Ying, thank you!!

Not a bug (I saved the app; definitely learned a hard lesson there--always test on a copy). However, unless I make sure to always copy an existing experience in order to access the old theme options, I'm stuck using the new ones for new experiences. It would be nice if we could still choose the old theme options, while understanding that if we then opt for the new ones, we can't go back (within that experience).
I would be delighted if this got addressed. A common interface I've seen in lots of experiences (especially ones that are static/non-scrolling page) is to have a fairly narrow header. Since the title of the page should be H1, the new spacing makes it much more complicated to find a text size and line spacing height combination that works.

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.