How to Change Text Size in HTML

javascript absolute valueIf you are a weekend blogger writing posts through a well-known blogging platform or someone who runs a website for business or personal reasons, having an understanding of basic html coding can come in handy. At times you may want to make easy changes to the html on your blog; for instance, changing text size or color in html. Paying a web designer can get pricy for simple adjustments. Changing text size in html is an easy coding issue you can tackle on your own, and we will go over the way to do this in this article. You can learn more about html coding by taking a HTML Made Easy course.

When Would You Want to Change Text Size in HTML?

You may want to change the text size in html if you need to create headings on your web page, or if you want to change the size of your text on different pages – or even from paragraph to paragraph – on your website. For instance, if you want a specific word on the page or within a paragraph to stand out, you can do this by changing the text size using html commands.

A Word of Caution About Using Various Text Sizes Websites

If you are changing text size in html on your website, you should keep in mind that creating web pages with a lot of different text sizes can be a distraction for your readers. When creating your web site, or when altering the text size in html on your website, remember a key concept in graphic design: Less is more. That means keeping the site looking uniform is much more important than incorporating a lot of mismatched elements throughout your site, which can make your site feel cluttered and unprofessional. If you are interested in learning more about graphic design and creating beautiful products, Graphic Design Secrets Revealed encompasses a multitude of subjects important to creating beautiful projects.

Before You Change the Text Size in HTML

Anytime you decide to make changes to your web page, whether you are simply changing text size in html or you are adding photographs or changing the background image to a new pattern, always make a backup of your existing page. This ensures that if you make an error during the changes, and this error results in a losing your web page, you can revert to where you started and try again.

To make a copy of your web page, open up the file and make a copy of the html. Then paste the copy of your page’s html in a program such as Programmer’s Notepad, which is a free utility used by web designers/coders for CSS, html and other programs.

Another Way to Change Text Size Throughout a Website

Before we begin, if you must make changes to the font on your entire site you can do so much more easily by making these changes in your CSS, or Cascading Style Sheets. You can locate the CSS, in most cases, by finding the file style.css. Some websites will have additional .css files for specific areas of your website, but the style.css is typically the name for the main style sheet used. (CSS Made Easy is a great way to get started with Cascading Style Sheets.)

How to Change Text Size in HTML

To begin, locate the line or lines of text you want to change. If you are working within a blog such as WordPress, you will want to have your blog page set to the Visual editor, which allows you to make changes to the html. Blogger has a tab labeled Edit HTML, or something similar, for pages and for the site. If you are locating the file through your control panel, it is likely named index.html.

Once you have located what text you want to change the size of you will use the <font size =”x”> command, where ‘X’ is the number you want the font size to be. You can use numbers 1 through 7, with 1 being the smallest and 7 the largest. You must end your command with the closing tag of </font>. This tells the program where to stop changing the size of your text. If you forget to add the closing tag, or if you do so incorrectly (say you place the / after the word font instead of before as shown), the font for the remainder of the page will be the changed size as well.

This tag, <font size = “x”>, shows that we are changing the size of the text for the words that come directly after this command and before the closing </font> command.

Let’s look at this paragraph:

I went to the store. I bought bread and milk. I forgot to bring the milk home.

Pretend you want the second sentence to have larger text than the first and third. Our change text style in html will look like this:

I went to the store. <font size =”4”> I bought bread and milk. </font> I forgot to bring the milk home.

Now, let’s assume you want to change the size of font on a word or set of words that will be used as a header. You will simply place your command around that word or set of words.

<font size=”7”>Animals in the Zoo</font>

Again, remember to use the end command after you change text size in order to stop the change from occurring throughout the rest of your document.

Beyond Changing Text Size in HTML

Changing text size in html is not the only easy change you can learn to make on your own. You can also learn a variety of additional html tricks by getting a little more involved with some classes. Pair one of the html classes with CSS Fundamentals, which delves into the world Cascading Style Sheets, and learn techniques you can use to control the design of your web site.