Too big font size on large screen

[michcio1234]

Hello and thank you for this really nice theme.

Is it on purpose that on a large screen (min-width: 97em) main text font size gets increased to 110%? It looks too big to me.

I am not very familiar with styling. Here's what I found in Chrome dev tools when inspecting regular paragraph text:

It appears only when the screen is wide. The style seems to come from admonitions (although it's a regular paragraph), so I am not sure if this is intended.

[pradyunsg]

This is intentional, and a design choice borrowed from mkdocs-material.

Here's the relevant code there: https://github.com/squidfunk/mkdocs-material/blob/9655c3a92471f261533d48b8611a8d24dbfebb13/src/assets/stylesheets/main/layout/_base.scss#L46

The idea is to better utilise the available screen real-estate to make the content easier to read. This theme has a lot of opinionated design choices, and this is one of them. :)

[michcio1234]

Ok, thank you. Although it's a bit disappointing to me (I hoped that it's a bug and can be fixed), I realise some decisions must be opinionated.

Maybe just for future consideration, please note that not everyone finds it easier to read this way (I don't, I have to scale the page to 90% to read it comfortably on a fullhd monitor).

[pradyunsg]

I dunno what your browser is doing with the source map there -- it's defined in _scaffold:

furo/src/furo/assets/styles/_scaffold.sass

Line 284 in 0232d9b

@media (min-width: $full-width + $sidebar-width)

[michcio1234]

@pradyunsg is there a way to overwrite this, so that the font stays at 100% (other than forking the repo)?

[pradyunsg]

You can add custom CSS that explicitly sets font-size to 100%, on @media (min-width: 97em). I'd advise against doing that, but I'm not going around policing people -- you do you. :)

[michcio1234]

Thank you!

For noobs like me, here's a manual:

1. Create a file named e.g. _static/styles/styles.css with following contents:

   @media(min-width:97em) {
       html {
           font-size: 100%
       }
   }

2. Add this to conf.py:

   html_static_path = ['_static']  # all files from this folder will be included in the build
   html_css_files = ['styles/styles.css']  # these paths are relative to html_static_path

3. Clean, build, enjoy!

[umarcor]

@pradyunsg what's the intended font size for the "regular" text on smaller devices?

I currently get 17.6 px on 1920x1080. If I disable the 110% modifier, it's 16 px.
Yet, I don't get less than 16 px, no matter how small the screen.
According to https://github.com/squidfunk/mkdocs-material/blob/9655c3a92471f261533d48b8611a8d24dbfebb13/src/assets/stylesheets/main/layout/_base.scss#L44 the base should be 12 px.
Is it intended for the regular text to be 33% larger than the base on small devices?

Please consider using 14 px on small devices and not forcing 110% on large ones. I believe it's ok to adjust the width of the body/sidebars to fill the space better and compensate for using 16px instead of 17.6px.

For reference, see https://docs.python.org/3/library/pathlib.html.

[pradyunsg]

It doesn't use 12px as the text size. It uses 1.6rem as the font size, with a root font size of 10px. Thus it uses 1rem ~ 10px and that's where the other ratios come from.

[umarcor]

Would you consider using 1.4rem on smaller devices?