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.
@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.
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 ).
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.