A Not So Technical Documentation Page asking for feedback - Gospel Overview

Hi I finally finished my technical documentation page project. It’s pretty simple as I do not really have a creative side and I now prefer minimalist designs. I would appreciate any feedback. Thank you!

Overall this is a very nice page, only one major issue stands out for me. Before I go into that, I do think you should move the <header> out of the <nav>. A header isn’t part of the navigation.

As to the major issue, you are doing this for the font size:

:root {
    font-size: 3vmin;

This is very bad for accessibility because it prevents the user from manually increasing the text size on their own. Also, the text size gets way too small when I narrow the browser window all the way in. If you want the text size to change a little based on the browser width then you could do something like:

font-size: calc(1em + 1vh);

Now the text size will always be at least 1em but will increase slightly as the width of the browser window gets bigger. Personally, I’m not a big fan of changing the text size like this, at least not for the primary content. I believe you should respect the user’s text size settings in their browser and just use 1em for the main content, no matter what the browser width. But adding a small vh to the base font size (1em) will at least prevent it from going below a reasonable size. Otherwise, the base font size should be 1em.

Oh, a few other minor things. I think you should put a max width on the <main> so that the line length doesn’t get too long if someone has their browser open very wide (and I would set this in em units). Also, I would add a little side padding to the gray boxes so the text doesn’t come right up to the edge.

1 Like

@bbsmooth sir, thanks a lot! I didn’t know how important it is to consider readers’ preference for changing text size. I will apply the changes needed right away. :smile:

@bbsmooth do I also need to change the unit rem to em for all my properties?

No, that is not necessary, you can use either, it depends primarily on your personal preference. I find myself using em most of the time but a lot of people prefer rem. There is a subtle difference between the two that you should understand. If you are unsure then be sure to google it.

I should add, if you are using them in your CSS media query break points (which I highly recommend) then there is no difference between em and rem (I always use em for those because it is one less character to type :slight_smile: ).

1 Like

@bbsmooth Thank you!