Changing the size of your font or website text really should be done using CSS, since the <font> html tag is deprecated/no longer used in the newer version of HTML (HTML5). Using “font” as an actual HTML element is how front-end web developers used to do it old-school, during the early days of the internet. I’m sure there are many legacy websites and apps out there that still cling to this old usage, but using the “font” tag is no longer recommended.
This was the old way of resizing text using the FONT tag:
<font size="8">Hello, resize me, I'm a bit of text!</font>
This is the new way of resizing text:
First of all, use CSS.
There are a few ways to resize your text using CSS –
Use inline CSS and add it directly within the HTML of your web page. If you have to use inline CSS (this should be used sparingly!) it should be placed inside an inline element (as opposed to a block html element such as a “div” tag). An inline element would be those such as the <span> or <h2> tags for example. The inline code for making a bit of text appear smaller then normal would appear like this:
<span style="font-size:12px;">Your text here</span>
This is how the above code would appear in the browser: Your text here
Ok – now for the more proper way: you can add your CSS to a stylesheet file that is separate from your actual web page. In that case you would add the CSS “font-size” property inside the style code for whatever HTML element you happen to be styling, like this:
div p {
font-size: 12px;
}
The above code will style any paragraph (“p”) elements that live nested inside of a <div> tag.
There are different ways of expressing the value of your font size
Among them are:
- pixels (px): this is the most accurate way of resizing text (and my favorite), as it measures literally to the pixel
- ems (em): 1em equals whatever your current element is set to in terms of font size. Ex: usually the browser font size is 16px by default
- keywords: (small, medium, large, etc.)
- percent (%): for example, a child element can be set at 50% of the font-size of its parent element
- points (pt): these should be used only for printing
- rems (rem): these are “root ems”. An em is relative to the font size of its parent, and a rem is only relative to the html (root) or overall font-size
For more information on how to use different font-size values, CSS-Tricks has an excellent article which you might want to check out.
Please share if you found this article useful, and let me know in the comments if you have any CSS or HTML questions!
