Increase code font size

[hichemfantar]

Adjust font sizes for better readability and refactor CSS to utilize variables for consistency across the styles.

The font is smaller that before on windows and is harder to read, bringing it up to 14px makes it easier to read

I'm sure this fix brings the font size on par to what it was on macos as well

old before system font

now

after fix

[github-actions]

📦 Docs artifacts are ready: https://github.com/elixir-lang/ex_doc/actions/runs/12999956491/artifacts/2494065578

[josevalim]

Thank you but the proposed sizes are definitely too big for macOS. If balancing system fonts size across OSes is going to be complicated, we should revert back to Inconsolata.

[hichemfantar]

I don't know what settings you're working with but i'm on default and 14px looks similar to the regular text size.

can you share a screenshot?

[josevalim]

Here is a possible solution:

@font-face {
  font-family: '...';
  size-adjust: 90%;
}

And we adjust the size for either the macOS or the Windows font.

[josevalim]

[hichemfantar]

how is that too big? the left one looks roughly the same as the rest of the text, the right one looks smaller than the rest of the text.

[josevalim]

@hichemfantar the @callback ... one is the issue. Could it perhaps be made to be 13px or would that be too small on Windows? It feels like it would. :(

[hichemfantar]

the left screenshot is from the current pr, right?

[josevalim]

the right one looks smaller than the rest of the text.

That's the whole point of my comment though. As I said the previous time this was brought up, those tend to consume a lot of space from functions and arguments with long names.

And the callback one is smaller on purpose because they tend to be very long. Here is just one example: https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.html#stream/4

I will revert to Inconsolata tomorrow morning.

the left screenshot is from the current pr, right?

Yes.

[hichemfantar]

Please don't revert to a third party font, the whole reason we moved away is because it doesn't support all characters properly and it was kinda heavy in size.

1px for improved readability is a much better solution than undoing all the improvements we made.

[josevalim]

Do you think we can have @font-face declaration that adjusts it on Windows then?

@font-face {
  font-family: '...';
  size-adjust: 90%;
}

I want to avoid rehashing discussions on the font size, it is not productive. So we either default to a single font or we figure out a way to make it work without having to adjust the sizes for every OS.

[josevalim]

@hichemfantar I pushed some of those changes and other fixes related to font sizes, including increasing line length so tey get more breathing room. However, I kept .specs pre at 13px. If those are too small on Windows, please provide a font face config. Thanks!

[josevalim]

I downloaded several monospace fonts and tried them one by one. Consolas is the only one too small, so I have adjusted its font-face accordingly.