Coding for Beginners: How to change text font size in HTML & CSS
Font Size
It is a common misconception with heading tags that because H1 displays the largest font as default and H6 the smallest; that the H tags are related to font size. This is not the case and as we mentioned earlier in this course the h tags are related to topic importance.
Remember to set your heading’s importance first followed by your font size. If you are writing a paragraph, it is simpler as the p tag is used.
The font size properly is displayed like this:
font-size
There are two distinct ways of setting the font-size value:
Absolute size
This sets a fixed, unchangeable size which remains the same in all browsers. This is bad for your website’s accessibility.
Relative size
This sets the size relative to the surrounding elements. It also allows visitors to adjust the text size, making the typography larger and easier to read if needed.
Setting Font-Size with Pixels
Setting the font-size value in pixels is common as it gives you full control over the text size.
Setting Font Size with Em
To allow more flexibility and to resize text in browser, developers often use the em value. Em value is 1em=16px. Each element has its own em value.
Remember: Text contained in /* is commented out and won’t show on the HTML output.
Setting Percent and Em
Some browsers can have different default em values and with this text may appear larger in one browser and smaller in another. To resolve this discrepancy developers set a default font-size percentage in the body element:
Responsive Font Size
As we know, there are multiple screen sizes to view our website from. Because of this we have to make sure that our code is responsive and will adjust the font to be the appropriate size in the right browser. This is done with the vw unit.
vw = “viewport width“
Viewport is the total browser window size. So if the browser window is 100cm wide, 1vw=1cm.