Note title font is very small

Support
1

Operating system

Windows

Joplin version

3.4.12

Desktop version info

Joplin 3.4.12 (prod, win32)

Device: win32, AMD Ryzen 7 5700U with Radeon Graphics
Client ID: 8e703857714c4d7cbcc5a57931477a4d
Sync Version: 3
Profile Version: 48
Keychain Supported: Yes
Alternative instance ID: -

Revision: e9a9f68

Backup: 1.4.3
Ez Table: 1.0.2
Freehand Drawing: 3.1.0
Rich Markdown: 0.16.3

What issue do you have?

The title on the note itself is very small (see attached image). I've made a tweak to the app's appearance in userchrome.css:

/* Affects UI font size (among others?) */
*{ font-size: 14px !important }

...and this in userstyle.css:

body {
font-family: "Inter";
font-size: 18px;
line-height: 1.25;
}

/* Prevent mouse-hover highlighting of tables */

/* dark theme */
tr:nth-child(odd) { background-color: rgb(29, 32, 36) !important; }
tr:nth-child(even) { background-color: rgb(40, 41, 42) !important; }

/* light theme */
/*
tr:nth-child(odd) { background-color: rgb(255, 255, 255) !important; }
tr:nth-child(even) { background-color: rgb(247, 247, 247) !important; }
*/

/* *{ font-size: 28px !important } */

However, both of those were done months ago and the small title is much more recent. No other changes.

Any idea what happened?

Thanks.

Screenshots

small_title.jpg
small_title.jpg605×285 26.8 KB

2

I would start with trying to revert your CSS changes and seeing if there's any difference. Please keep in mind that Joplin internal styling may change over time, meaning that you need to keep updating your custom CSS to match the current version of the application.

1 Like
3

Turns out *{ font-size: 14px !important } in userchrome.css is causing it somehow. But I’m at a loss exactly how. I conceptually understand CSS at a high level, but I’ve not deeply studied it and my understanding is far from complete in the details, particularly how selectors and attributes interact, etc. Plus I don’t know what Joplin exposes.

When I first added that – almost certainly scarfed from the forum here – it worked (i.e., made the UI fonts larger) without the note title side effect. Why that changed I don’t know. Commenting it out makes all the UI fonts smaller except the note title, which gets larger. As a workaround I’ve set it to 15px, a compromise.

Thanks.

4

Do you actually need *{ font-size: 14px !important } at all? You can increase font size directly from the UI using "View" → "Zoom In".

5

That’s true, but it makes everything larger. I want just the UI fonts to be a little larger. I tweak Markdown rendering separately.