Readability: lower the code font size

[PrecureKamiyu]

In my case, the code font always looks bigger than normal font. That is very annoying, actually. And in principle, code font should be smaller than normal text.

Is it possible for users to change the code font size separately? Or just make the code font size smaller in general?

This is how it looks on original website:

And this is omnivore web view:

[jacksonh]

I just checked and it uses the same size as the readable text, it does use a different monospaced font though. Is it the inline text that looks bigger to you or the code block below? I can't tell any difference

[PrecureKamiyu]

I just checked and it uses the same size as the readable text, it does use a different monospaced font though. Is it the inline text that looks bigger to you or the code block below? I can't tell any difference

@jacksonh In the view of omnivore, there are more characters in a single line for normal text font, compared to the original website (it displays 3 more words, to be exact), but as for the monospaced font, it even needs a line break to display a line of code snippet, while no line break is needed for original website to display one line of code (the getaddrinfo code line).

It looks that monospaced text font and normal font have different font size.

[quinncomendant]

I just came here to suggest the same change. With code, I think it's safer to err on the side of being too small, so more code fits on the screen.

Here's what I see on my iPhone. The monospace font-size appears larger in relation to the proportional font. The padding for inline elements could be reduced too, because that contributes to the visual weight of the code.

[quinncomendant]

It just occurred to me that this issue is more complicated than just finding the “correct” font sizes. The visual size of typefaces vary, so some combination of monospace + proportional fonts will have a different scale relationship. For example, the current monospace font size might look fine next to text displayed in the Lexend font, but looks disproportional next to Source Serif or Crimson Text.

Perhaps the solution is to hardcode a list of relative font sizes to use for the monospace type depending on which Reader Font is selected, for example:

func getMonospaceFontSize(for readerFont: String) -> String {
    let fontSizes: [String: String] = [
        "Lexend": "100%",
        "Source Serif": "80%",
        "Crimson Text": "80%"
        // Et cetera…
    ]
    
    return fontSizes[readerFont] ?? "90%"
}