How to Change the Font Size on Your Web Page
When you create a web page, you have to think about the average viewer. If you have an older audience, such as senior citizens, you want a font that's pretty large. People who are searching for technical information tend to like smaller, tighter text layouts, because you can fit more information into less space. There are several simple ways that you can change the font size on your web page, either globally or just in one area of the page.
Other People Are Reading
Instructions
-
-
1
Create a simple "font" HTML tag to change the font size on your web page. This is best if you just want to change the font in a certain section of the page. Open your HTML document and type in "<font>" and then "size" as an attribute (without the quotation marks). Type in an equal sign, then a plus or minus sign and the number of points that you want to go up or down for the font size (i.e., <font size=+3> ). As an alternative, you can also just type in a direct font size, such as 10 or 12 points (i.e., <font size=12> ). Close the tag after your text with "</font>" (no quotation marks).
-
2
Use the "H#" tag (header) to change the font size on your web page. Again, this is if you need a solution for just one section of your page. Enter <H1> through <H6>, with <H6 > being the smallest size. See "References" for a visual example.
-
-
3
Create a style sheet (also called CSS or cascading style sheet) to apply to your web page. This is best if you want to change the font throughout the entire page. This is code that goes between the "head" tags in your HTML document.
Start with <STYLE TYPE-"type/css"> to open the code. Go down a couple of lines and type in "<!--" without the quote marks (this is a requirement for CSS coding). Go to the next line and type in "BODY {font-size: 10}" without the quotes (replace 10 with any font size that you wish). On the next line, type in " -->" and then close the command with "</style>" on the final line. You can add other attributes in addition to the text size inside of these "style" tags. See "References" for a visual example of this CSS code. Be sure to close your "<head>" tags.
-
1
Tips & Warnings
Whichever option you choose, you have to play with the font size to assure that it displays the way you want. Test the website in all popular browsers, such as Mozilla, Safari, Explorer and Chrome, to assure that the size is correct. If you just want to change the font size as it appears on your particular screen, go to your browser settings to change the font size. Choose "Options" or similar (depending on your browser) and then the "Content" or "Display" tab. You will see an option to make the font appear larger or smaller on your browser screen.
References
Resources
More Like This
Comments
-
hai! friends...
