View Full Version : increasing font size

10-15-2002, 04:59 AM
hey all,

I'm building a page that might be visited by some old people.. or other poeple that are hard at seeing. :cool: I want to give them the option of increasing the font size by clicking on a link. Any of you have any good ideas?

My thoughts so far are that I might like to add an internal stylesheet with only one line that overrides my bigger style sheet's font-size and makes it bigger.. but only when the link is clicked. BUT I don't really want to create 2 seperate pages for each page I have now. Maybe it's the easiest way. Any ideas?

10-15-2002, 05:44 AM
If you want to increase the font-size dynamically (without having the page reload), then you'll run into a problem with older browsers like Netscape 4 and Opera 6 ;^]

These browsers can't dynamically reformat page contents via Javascript (although NS4 can at least *rewrite* layer contents, which is a halfway workaround that Opera still doesn't have).

Maybe a simple solution would be just to add text to your page instructing users how this can be achieved via each browser's built-in mechanism for adjusting font size:


Netscape 6:

ZOOM function on one of the toolbars

View menu > Text Size
(this option can also be set as a button on the Personal Favorites toolbar).


When doing this, make sure you've not specified any font-sizes in pixels, else any intended resizing will have no effect in NS4 and IE.

10-15-2002, 06:40 AM
You can also have more than one css for the site. One would be normal font sizes and the other would be large font sizes. Using a simple link you can toggle back and forth between the two as needed.

10-15-2002, 06:43 AM
I don't have my font size in pixels, so that could work, but I guess I would feel guilty making someone that is obviously having a hard time reading already go and read a tutorial on how to fix it :)

I use Opera as my main browser so I don't want to shaft opera users... but I don't care about NN4 users... update already, it's 5 been years!!

I also don't care about doing it dynamically... actually I'd rather not. I'm trying to keep my site at W3Cs Triple A rating for accessibility... not cus i'm nice, just cus it's a challenge... hehe

So I am not using any javascript or anything... I think I am best off just creating another HTML file that's exactly the same except one line of CSS to change the font-size. It wouldn't be too hard to update because it we be the exact same except for that one line. Just copy, paste, add one line, and save as something different. Anybody else agree that that may be the easiest way? Or should I do something... cooler? :cool:

whoever said standards are confining needs to be smacked. wait... i think i said that... eee

10-15-2002, 06:45 AM
webmarket, wouldn't i then need two html pages? one using one css and one using the other? i know you can do it with javascript and cookies but like i just said... i'm not using that...

10-15-2002, 06:49 AM
I suppose you could use two separate pages with their own css, but, I was thinking more along the lines of:


click on the color links and all that changes is the css used...but in this instance a server side language is used.

10-15-2002, 07:23 AM
http://www.onlinetools.org/tools/easydynfont.php :)

10-16-2002, 06:03 AM

Been lookin' for something like that. Thanks much for the link.

10-16-2002, 06:59 AM
that is pretty neat ... but guess what im going to say... anyone?

doesn't work in opera :) looks great in IE and Moz... but it didn't even show up in opera... now admittedly that may be due to an "old browser" redirect script ... even though opera 6.05 is new.

I decided to go with a link to an identical html page with an internal style sheet and bigger font. it took me about 2 minutes... true it takes them more time to d/l the other page as opposed to updating dynamically, but they're very small, and it is a better solution for me when my goal is complete accessability.


10-16-2002, 08:45 AM
BUT I don't really want to create 2 seperate pages for each page I have now.So much for that...

10-16-2002, 09:12 AM
and it does the trick! Tinker with it so it suits your needs.

Changes page and font color but not size. Might be worth keeping just incase.

Put this in the <head> tag

<script language="VBScript">
Function DRGB(Red, Green, Blue)
Dim r, g, b
If Len(Hex(Red)) < 2 Then
r = "0" & Hex(Red)
r = Hex(Red)
End If
If Len(Hex(Green)) < 2 Then
g = "0" & Hex(Green)
g = Hex(Green)
End If
If Len(Hex(Blue)) < 2 Then
b = "0" & Hex(Blue)
b = Hex(Blue)
End If
DRGB = r & g & b
End Function

Sub cmdDocWhite_OnClick()
Document.BGColor = DRGB(255,255,255)
End Sub

Sub cmdDocBlack_OnClick()
Document.BGColor = DRGB(0,0,0)
End Sub

Sub cmdDocRed_OnClick()
Document.BGColor = DRGB(255,0,0)
End Sub

Sub cmdTBlue_OnClick()
Document.FGColor = DRGB(0,0,255)
End Sub

Sub cmdTRed_OnClick()
Document.FGColor = DRGB(255,0,0)
End Sub

Sub cmdTBlack_OnClick()
Document.FGColor = DRGB(0,0,0)
End Sub

Controls in the <body> tag.

input type="button" value="Document - White" name="cmdDocWhite">
<input type="button" value="Document - Black"
<input type="button" value="Document - Red" name="cmdDocRed">

<input type="button" value="Text - Blue" name="cmdTBlue"> <input type="button" value="Text - Red" name="cmdTRed"> <input type="button" value="Text - Black" name="cmdTBlack">

10-17-2002, 12:36 AM
hehe yea I know adios... *shrugs* ya can't tell me you've never changed your mind before...

10-17-2002, 02:57 AM
Anyone is entitled to change their mind; actually, I was commenting more on the absence of the word 'thanks' (or equivalent) in your post. When I remembered that site, it took me several minutes of searching to locate it (for you). Study the reply prior to yours, it's a useful example of courtesy towards us 'bots out here.


10-17-2002, 07:58 AM

10-17-2002, 11:18 AM
What if you don't set a font size at all and leave it to the user's default settings?

10-17-2002, 02:40 PM
adios, you're right... i'm embarrassed. Every once in a while I get so caught up in finding the right solution I forgot that codingforums isn't just another resource... I have also spent some time digging up an old link for someone, so I really do appreciate it... sorry about that one, and thanks for bringing it up.

joh6nn, thanks for the link, i actually have that one bookmarked too, but had forgotten about it.

that's almost tooooooo easy :) I think the primary reason i first set a font size (using % of course) was that I didn't like the way it looked when it was normal sized. It just looked like it needed a slightly condensed font size, so that got me into the whole idea about letting people make it bigger again... but like I said before I am mostly doing it because I wouldn't have known how to go about this before, and I think that standards and accessabilty are two things that are getting much more important to be aware of (I designed the site in XHTML Strict and Double-AA Accessability compliance). Defining no font size kind of ties in with the first reply I got from realisis about just giving people a link about how to change their font size for themselves. Thanks for the good idea...

Thanks everyone, I have plenty of ways I could go about this now.


Roy Sinclair
10-17-2002, 06:19 PM
In addition to not explictly setting any font size you can also use relative sizing to maintain any size relationship between sections of text.

<span style="font-size: larger;">This is the next larger size</span> or <span style="font-size: 150%;">This is one and a half times as large as the parent font</span>