I was asked by a visitor how she could change the font size of the text on her website. This article shows you how to do this using Cascading Style Sheets (CSS). It also answers another visitor's question on the ideal font size to use for a web page.
I shall try to make this guide usable for anyone who maintains a website, whether the site was designed using a visual web editor (ie a WYSIWYG web editor), or directly in HTML and CSS. It should also be usable if you have created a blog and want to put the odd paragraph or text in a larger or smaller font.
Note though that if you use a visual web editor, I have guides specific to many of them on how to change font sizes (among other things). Those tutorials will be easier to follow, since they use the web editor's graphical user interface to accomplish this. Guides for Expression Web, BlueGriffon, Dreamweaver and KompoZer can be found by following the links given in this sentence. They lead directly to the chapters for changing fonts. If you use other WYSIWYG web editors, you may be able to find the relevant tutorial listed in my main web editor tutorial index.
The CSS rule that will cause a web browser to use a different font size is "font-size".
The rule takes a measurement in either percent ("%"), "em", pixels ("px"), points ("pt") and other (arguably) less
relevant ones.
Essentially, the rule is formulated in this way.
The above will cause the font to be 10% larger than its existing size (which is 100%). Likewise, if you set the size to (say) 80%, it appear 20% smaller than it currently does.
While CSS is not fussy about the units of measurement you use, you should stick to using either the percent ("%") or the "em" for text on a web page. Although you are probably familiar with units like "pt" from your use of word processing software like Microsoft Word, such units are really meant for the printed page. For web pages that can be displayed on many different screen sizes (including mobile phones), "%" and "em" work best. Incidentally, if you don't know what "em" is, just use "%", as given in the example above.
If you only want to change the size of the words in a particular paragraph, the quick and dirty way is
to set font-size directly in the HTML tag for the paragraph in question.
Use the above code in place of the "<p>" tag that you find just before the words in your
paragraph.
If you only want to change a word or phrase in your paragraph, put the rule in a <span>.
For example, let's say that you have the following paragraph in HTML.
If you want the word "increase" to be 20% larger than the default size, and the word "decrease" to be 20% smaller, modify the above so that it becomes like this:
If you want to change the font size for the whole page, you will need to have access to your page's style sheet. This is probably easily done for people who have created a website using a web editor (whether a visual one or just a plain text editor).
For example, thesitewizard.com's style sheet includes the following lines, which specifies the font and its size. The effect of those rules can be seen in this article itself, including this very paragraph that you are reading.
It affects everything on the web page since the rule is set on the body selector, which is
the all-encompassing container into which all text, pictures and what-have-you on a web page is placed.
(Technically, there's no need to set a font size of 100% or 1em since that is the default. I inserted the above rule because, once upon a time, as part of an experiment, it said 1.1em. I reverted it to 1em when I decided it wasn't really necessary. That said, I may still change it to 1.1em in the future.)
Those who know a bit of CSS can also set the font size on a class or id,
so that everything belonging to that class or having that particular id will be
displayed with the specified font size.
For instance, the following CSS makes the font for any element having the class vitalstuff
twice as large as the text around it.
If it is used for, say, a paragraph like the following, all the text contained in it will be doubly large.
If you use blog software, such sweeping changes to the entire site has to be done either from within the blog software's user interface, or through its theme files. Since the method for this varies from program to program, I cannot give you a general method that will work with every software. But as I mentioned earlier, if all you want is to modify a paragraph or two, or a phrase here and there, you can do it using the (almost) universally applicable method given earlier.
In general (and I know this is going to sound trite, but bear with me), the best font size for a web page is one where your text is comfortably legible to all your visitors. The trouble with this statement though, is that eyesight varies from person to person according to their age, genes, environment, and situation. As such, what is acceptable to a young person with good eyesight may not be to a person in his/her forties (or older), who will be suffering from deteriorating vision as part of the ageing process.
Web browsers allow users to choose the fonts and font sizes they use by default, if webmasters do not override it in their design. As such, if you can, you should respect the choices of your visitors by refraining from shrinking the font below 100% or 1em. At 100% or 1em, the size your text is displayed at will be the ones your visitors selected because they find other sizes too small. Shrink it too much and they won't be able to read your content.
That said, not everybody knows how to enlarge the default fonts in their browsers. And even people who know how to do it sometimes don't bother either. So in practice, my above paragraph is also not completely accurate. That is, even at 100%, some of your users are going to have trouble reading the text. But that is probably beyond a webmaster's control. You can't exactly give a pageful of instructions to every visitor on how to fix the default font size in their browser. It will not only clutter your website, but it may also strike them as condescending.
You can of course make the fonts bigger than 100% or 1em if you wish. That should not pose a problem where legibility is concerned. In fact, if your site has a demographic with a high percentage of older people, it may even be a good idea to use a slightly larger font by default, since they will all have poorer eyesight (it's just a fact of life).
So, yes, as you probably have expected, there is no hard and fast answer that is applicable to everyone. What I can say, though, is to try to make your page work acceptably no matter what font size your visitors use for their browsers. I know some people want to control every aspect of the appearance of their website. These are probably the people who want to use "pt" or "px" as the unit of measurement for their fonts, because it fixes the fonts at those sizes.
But that is not the way a website works. Web pages operate in all sorts of environment beyond the control of a webmaster: large monitors, small screens, mobile phones with a huge range of window sizes, and so on. In fact, even on a large monitor (or perhaps, especially on one), your visitor may not even open his/her browser to the maxmimum width of the screen.
A good web designer understands this, and does not try to artificially constrain things, but makes his/her design work in whatever situation it appears in. And it's really counter-productive to try to prevent your visitors from enlarging the fonts, just so you can preserve your beautiful layout. The reality is that people prefer to just sit back and read whatever is on your site. The only reason they even take the trouble to change font sizes is because they cannot see what is there. If you try to make it difficult for them to do so, because you love your design so much, they will leave, since they can't read what you're trying to say.
Remember: the design serves the content, and not the other way around. And a comfortable font size (that is, comfortable by your visitor's definition, not necessarily yours) is very important for that to happen.
Copyright © 2018 Christopher Heng. All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.
Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
What is the Best Font Size for a Web Page? And How to Change Font Sizes with CSS
