What's the best way to scale the UI font independently from the document font?

[laurastephsmith]

I'd like to either:

1. Raise the Appearance > Font Size slider to make the UI font (file explorer, right sidebar, quick switcher, etc.) bigger. And then be able to shrink the document font back down to a sensible size.

Or do the reverse:

2. Set the Appearance > Font Size slider to make the live editor/preview type the right size. And then use a CSS snippet to increase the UI type size.

Which way around do you think is easiest, and is there a CSS selector I can use that will catch all of the elements I want? Thanks!

[hungsu]

Hi @laurastephsmith !

By chance are you just using Obsidian on a desktop or laptop computer?

I've been doing this on my Windows machine by pressing Control + - and Control + = to make UI text and Document text bigger/smaller, then using Control + Mousewheel to resize just the document text, which is just a shortcut for the Appearance > Font Size slider. On Mac you should be able to replace where I've said Control with Command. I hope this helps!

EDIT: You'll need the Quick font size adjustment setting turned on for this to work. You can always turn it off after you're done if you like

[laurastephsmith]

Hiya @hungsu :). Thanks for your quick response. I was about to say I'd tried that. But when I just did some testing, it turns out that ctrl +/- is not in fact a shortcut for the slider. The slider only affects the content of notes. But ctrl +/-/scroll sales the whole UI. So if I set the size of the UI with ctrl +, I can then use the slider to independently scale the note content. Perfect!

I would like to be able to have a different slider position for desktop and mobile. Have you come across a way to do that by any chance? It's not a deal-breaker, but would be nice just to get a few more words to a line on mobile.

Thanks for an awesome theme, by the way! Laura

[laurastephsmith]

I've got it working!

@media only screen
and (max-device-width: 1080px) {
    body {
        --editor-font-size: 16px !important;
}
}

Is that a bit hacky putting it on the body tag? Seems to only affect what I want. Custom properties didn't even exist the last time I did much CSS :).

[hungsu]

I would like to be able to have a different slider position for desktop and mobile. Have you come across a way to do that by any chance? It's not a deal-breaker, but would be nice just to get a few more words to a line on mobile.

The font size is controlled by a file called appearance.json in the .obsidian folder. If your desktop and mobile are the same, that means that file is being synchronised. I don't know what you're using to sync, but if you prevent that file from being copied, you can set whatever font size you like on both devices.

[laurastephsmith]

Thanks for the info. I'm sycing with Dropbox, so that's definitely doable.

After using Typomagical for a couple of days, I've decided that what I really want is for the UI to use the default theme font (think it's just picking up the system sans font?), and only have the Typomagical styling apply to the notes themselves. That way I can shrink the UI back down to a sensible size and keep the sidebars as narrow as I had them with the default theme. I think I just find the line width on Spectral too thin to be able to comfortably read in a smaller size. I think it's just a combination of my preference and working with a 13" screen!

What would you suggest is the best way to achieve that? I think it would make an excellent option for putting in Style Settings. But happy to use a CSS snippet in the meantime, or instead.

Out of interest, what size screen do you use? Thanks again! L

[laurastephsmith]

Oh, and also, I think keeping the sans typeface for the UI looks more native on Gnome. The serif UI with Typomagical just looks a bit... odd... next to the rest of my desktop!

[hungsu]

Hi Laura,

When you say "line width", do you perhaps mean "stroke width", and thus font-weight? Typomagical uses a font weight of 300 for Spectral because that's my preference, see below the different weights for Spectral:

It may be that I need to offer different weights as a style setting, in addition to setting the UI font separately from the document font. Something I'll sit on later

[laurastephsmith]

Yes, stroke width is what I mean - thanks for the clarification. Different weights would probably do the job for me. But now I'm thinking about it, I'd definitely go with keeping the UI font as it was with the default theme: integrates with the OS better. Not a deal breaker by any means, but definitely a preference. Thanks for humouring my feedback!