I started my working life working in the printing department of a newspaper. Althought I was called a printer, I was actually a compositor. Haven't got a clue about running a printing press, but I know how to work with type (fonts), build and put pages (layout) together.
To answer the question about how to make a font-size changer as described in a previous post, let's get a few pieces of terminology out of the way.
pt, px, em, rem
That's not the full list, but it is the most important part of this explanation. There are two types of measurement systems used in CSS. That is fixed and proportional (or inherited).
Fixed are px, and pt. "pt" stands for point. A point is 1/72nd of an inch. CSS inherited many of the typography terminology used by printers. One inch is equal to 72 points. 12 points are equal to one pica. Six picas are equal to one inch. "pt" then has a fixed relationship to the inch measurement system by way of the printer's measurement system.
"px" has a direct relationship with the computer's screen measurement system. There are at least two main measurement systems for screens: 72 dpi and 90 dpi. "px" then can appear the same regardless of display dpi, since it is relative to the screen only. Don't really mean to make it confusing, but if your screen is 72dpi, 16px (16/72) is the same as 16pt (16/72). If your screen is 90 dpi, 16px would appear slightly smaller (16/90).
You can see where websites can appear differently depending on the screen dpi density and even the browser and operating system. In my designs, I try to avoid fixed measurement systems as much as possible.
The second type of measurement system is "relative". Now, this can be confusing since there are two possible variations: em, and rem.
While both are similar, I avoid "em". There's a reason for that ... "em" is relative and inherited from its parent. Let me give you an example: if you have a <div> tag defined as font-size 30px, and within that div you have another <div> with font-size defined as 2em, and again within that <div> have a font size defined also as 2em: your text in the first <div> is 30px, your text in the second <div> is 60px, and your text in the third <div> is 120px. You are in trouble, because the third <div> inherited its 2em size from the second <div>. I'm sure there are some circumstances where "em" can be useful, I've never encountered any.
That leaves the "rem" measurement unit. It's also relative and inherited – but this time it is inherited from the root. If you look at any of my websites and inspect the CSS, you will find something that looks like:
html {
font-size: 16px;
}
Hey, what goes on here? Thought you said you didn't use px. Well, in this case, px sets the "standard" by which the entire website will display. What this means is that if I have an <h1> tag with font-size defined as 2.5rem, the <h1> tag will display at a final font-size of 16 x 2.5 or 40px. All of my CSS also include defaults for p, ul, ol, li as 1rem. That means paragraph text shows up as 1 rem (or 16px). Ditto for ul, ol, and li tags.
What does this have to do with my font-size changer? I just use a simple piece of Javascript code to change the font-size setting in the CSS file for "html" tag. Do that, and it instantaneously changes the entire website.