Size of font for filenames/headings

Questions & Help
1

I would like to change the size of the font used for filenames and headings. Is that possible?

1 Like
2

This has also been a question of mine for a while too, and I have finally found this post over on Discord.

I haven’t tested it yet (as I literally just found it) but I’ll let you know how I go.

3

It worked!!

Ok, so you’ll need to work with the Custom.CSS file in your Logseq directory (or just ^k and search for “custom.css” and edit within Logseq).

Then add the relevant settings. Here’s what I used for the first three headings.

.ls-block h1{
    font-size: 120%;
    margin: 1px;
}
.ls-block h2{
    font-size: 116%;
}
.ls-block h3{
    font-size: 112%;
}

You can add colours, like the discord post mentions, and I’m sure there are other settings you could use.

But I found it was surprisingly difficult to find such a simple feature.

Now I just have to find an easy way to change all of my h3 headings to h1, h4s to h2, etc, because that had been my workaround for reducing the heading sizes.

1 Like
4

Final comment (for now).

After typing "# " (hash space), you will see the line become huge as before.
However, once you hit enter and start a new line, the heading should shrink to the %120 size you set in the CSS.

If I even find the setting for why headings become “logseq default” size while editing, I’ll try to let you know.

1 Like
5

For future folks searching for this: I discovered that the font size while rendering and the font size while editing are controlled by different CSS targets.

To change both, try using CSS like the following:

/*******************************/
/* Tone down headings a little */
/*******************************/

.ls-block h1{
    font-size: 1.6em;
}

.editor-inner .h1.uniline-block,.ls-block h1 {
    font-size: 1.6em;
}

.ls-block h2{
    font-size: 1.4em;
}

.editor-inner .h2.uniline-block,.ls-block h2 {
    font-size: 1.4em;
}


/* Re-assert this stock CSS so that refs don't get huge */
.block-ref :is(h1,h2,h3,h4,h5,h6) {
    border-bottom: none;
    font-size: 1rem
}

Hope this helps!

2 Likes
6

Thank you so much for this.

I hope I can find the time to work through this and fix my config.

1 Like