Skip Navigation

Home » About » Technical Articles » Give the User Control Over Your Fonts.

evolt.org
This article was originally posted on evolt.org, an online resource for web developers, maintained by web developers.

Give the User Control Over Your Fonts

Originally published: July 13, 1999
Adrian Roselli

There's nothing quite like getting your text just right with all your CSS attributes in place, and sitting back knowing that you finally have some typographic control over your pages.

It's just too bad that's not the case for your users. A user may come to your site and see text so large they can't see more than three lines at a time, or so small they can't even see your text.

"But wait," you say, "I was careful to test it on Ed's machine, and Sally's, and even mine — in two browsers at that. What could possibly be wrong?" Well, even though the CSS specification supports many different relative attributes, none of them seem to work on any of the current browsers.

Correct rendering of the 'em' is all I ask for, it's such a simple concept: base 1em on the size of the default text as the user has it configured on his or her system, usually 12 point. Ideally, you ensure that the user has complete control over the sizing of text, making it much easier for your reader to read. But this is an ideal situation, not a real-world one and even if you get it to work, you may not realize that .5em is too small on every system but your own. You can see a great article on how to try to use the 'em' at WebReview.com.

So it doesn't work, nor do any of the other relative sizing units — at least not consistently across browsers and platforms. Instead you may find you are using points, or pixels, or something else to set your font sizes, and you try to accommodate all your viewers by making it the most 'average' size you can.

But it doesn't have to be that way; you don't have to completely wrest control from your users. Instead, empower them again, give them the ability to control what they see, let them, not you, decide that smaller text is better.

I'm a big proponent of server-side solutions whenever possible, it takes some strain off the browser, and ensures a consistent experience for all your users since nobody has to wait for clunky JavaScript to parse on their old P75 or Centris 610 with 16MB of RAM (way too little if you run any of today's bloated browsers or OSes). So, given that disclaimer, I'm going to offer a solution to the problem using Active Server Pages, which results in plain ol' HTML when passed to the browser. My code will not work with Apache, or ColdFusion, or any other server-side technology, but the capability to do it is in all of them, so at least follow the ideas as I go.

Let's start with a real-world example. If you surf over to any of the pages at my personal gallery in a 4.x browser, http://roselli.org/adrian/ (please pardon the plug), you will see in the navbar a pair of buttons. By default, one should read 'Enlarge Text' and the other should read 'Shrink Text.' Clicking one of these buttons will reload the current page with a link to a different style sheet (I use the <link> tag in the head to call my style sheets, but you can still use this tutorial if you embed your styles right in the document). It also presents a 'Normal Size' button in place of the button on which you just clicked (provided you just clicked one, of course).

Let me run down what happens when you first come to the site (provided I haven't changed anything, and it's working correctly):

  1. Your browser requests a page and sends its name and version number over in the HTTP header.
  2. By requesting the HTTP_USER_AGENT, I can determine if your browser is capable of displaying CSS information.
  3. I set a cookie on your browser indicating that you are CSS-capable, then I set a cookie telling me that the font size I will be using for now is the default.
  4. When the page is served, some server-side script has determined if it should even send you the buttons to resize the text based on the CSS cookie I set.
  5. If it is set, you get to see two buttons, one to enlarge, one to shrink the text.
  6. The URL in the <a href> tag has a variable appended to the end of the filename of the current script (web page), that variable tells the script whether you've chosen to enlarge or shrink the text when you click one of the buttons.
  7. The page reloads, reading the variable from the URL, which triggers script that loads the alternate style sheet.

While this doesn't cover all the bases, it does kill quite a lot of birds with one stone (pardon the metaphor mixing). It is also only a CSS solution, although it wouldn't be too hard to make it apply to the <font> tags as well for your pre-CSS users. No matter what (CSS-capable) browser you are using, if you come to the page and the text is too small, kick it up a bit. If it's still too small, well, don't read the text, just look at the pretty pictures. Or you can use what you find in here to create more than three text size options.

So, on to the code.

First, you need to write up your cookie-setting script so you can call it from within every page on your site. Save the file as 'cookies.asp' and consider putting it in a subdirectory where you store all your include files (perhaps 'includes/', and make sure you've disabled directory browsing and have put a 'default.asp' with a response.redirect command to send the user to somewhere else less dangerous in your site). Try using the following ASP script, which only checks for Navigator or Internet Explorer versions 4.x. I've purposely left it restricted to these two for the purpose of this tutorial, so that it has a better chance of fitting on the page. By the way, I'm not a cookie maven, so if you have suggestions, please let me know. 

<%

'## Code by Adrian Roselli from http://roselli.org
'## Provided free for evolt.org and its members.
'## No catches, just give me credit.
'## This browser detection only detects IE4.x and NN4.x, please modify it as you see fit to get the 5.x and alternate manufacturer CSS-capable browsers.
'## Last change July 10, 1999



'########################
'## Browser Determination

'## Get the browser name and version number
UserAgent = Request.ServerVariables("HTTP_USER_AGENT")

'## If the cookie Browser has no value, then perform the following
IF Request.Cookies("Browser") = "" then

	'## Check the UserAgent string to see if it contains Mozilla or MSIE, and then to see if it has 4. in the version number
	if (instr(1,UserAgent,"Mozilla",1) > 0 OR instr(1,UserAgent,"MSIE",1) > 0) AND instr(1,UserAgent,"4.",1) > 0 THEN

		'## Adds 1 month onto todays date so the cookie will expire 1 month from now
		NewerDate = DateAdd("m", 1, FormatDateTime(Now,vbGeneralDate))

		'## Sets a cookie so that the browser is marked as CSS-capable
		Response.Cookies("Browser") = "CSS"
		Response.Cookies("Browser").expires = cdate(NewerDate)
	end if
END IF



'################
'## Set Text Size

'## If the URL does not have a ?size=value appended to it (meaning the user clicked one of the links), then perform the following
IF NOT Request("Size") = "" THEN

	'## If the user clicked to enlarge, then set the cookie to large
	IF Request("Size") = "Large" THEN
		Response.Cookies("TextSize") = "Large"
		Response.Cookies("TextSize").expires = #10/10/2000#

	'## If the user clicked to normalize, then set the cookie to large
	ELSEIF Request("Size") = "Normal" THEN
		Response.Cookies("TextSize") = "Normal"
		Response.Cookies("TextSize").expires = #10/10/2000#

	'## If the user clicked to shrink, then set the cookie to small
	ELSEIF Request("Size") = "Small" THEN
		Response.Cookies("TextSize") = "Small"
		Response.Cookies("TextSize").expires = #10/10/2000#

	END IF

'## Otherwise, check the cookie, and if it also has a blank value, set it to normal
ELSEIF Request.Cookies("TextSize") = "" THEN
	Response.Cookies("TextSize") = "Normal"
	Response.Cookies("TextSize").expires = #10/10/2000#
END IF



'##########################
'## Get Current Script Name

'## Sets ScriptName equal to whatever the current script name is
ScriptName = Request.ServerVariables("SCRIPT_NAME")


%>

Now you need to include this file in your script (web page). To accomplish this and to ensure any time you need to update your script you can do so with little trouble, we will include it in all pages on the site. We will assume that your scripts (web pages) are in a different directory at the same level as your 'includes/' directory. Insert this line of code at the top of each of your scripts, above the <HTML> tag: 

<!--#include virtual | file = "../includes/cookie.asp"-->

Now you need to create your resize links. Create another text file and name it 'CSSResize.asp'. Paste the following script into the text file (making sure it also exists in the 'includes/' directory). Note, I tend to name my include files with an '.asp' extension since '.inc' and '.txt' get sent to the browser as plain text, allowing users to see your script if they know the path to the file; however, using an '.asp' extension causes the server to try to parse the file, resulting in an error page, which is much better than displaying all your hard-work (copied code). 

<%
'## Code by Adrian Roselli from http://roselli.org
'## Provided free for evolt.org and its members.
'## No catches, just give me credit.
'## Make sure you supply your own images, rollovers, whatever.  These are just suggestions, especially since text links are not always attractive.
'## Last change July 10, 1999


'## Request the cookie Browser and see if it is a CSS-capable browser, based on your previous work.
'## This ensures that you do not display the buttons if the browser cannot use them.
IF Request.Cookies("Browser") = "CSS" THEN
%>

<%
	'## If the text isn't already set to large, offer the option.
	IF NOT Request.Cookies("TextSize") = "Large" THEN
%>
        	<a href="<% = ScriptName %>?size=Large">Enlarge Text</a><br>
<% 	END IF %>
<%
	'## If the text isn't already set to normal, or is not set, offer the option.
 	IF NOT Request.Cookies("TextSize") = "Normal" OR Request.Cookies("TextSize") = "" THEN
%>
        	<a href="<% = ScriptName %>?size=Normal">Return Text to Normal</a><br>
<% 	END IF %>
<% 
	'## If the text isn't already set to small, offer the option.
	IF NOT Request.Cookies("TextSize") = "Small" THEN
%>
        	<a href="<% = ScriptName %>?size=Small">Shrink Text</a><br>
<% 	END IF %>

<%
'## Display this text if the browser is not CSS capable - you could also just leave it blank.
ELSE
%>
	<i>Sorry, you can't see this because I've determined your browser can't do CSS.</i>
<%
END IF 
%>

Now you can see that when a user clicks one of the links, it reloads the current script (web page) with the size appended to the end of the URL. It does this because <% = ScriptName %> writes the URL of the current page into the <a href> before it is sent to the browser. The script (web page), upon reloading, reads the variable from the URL and uses that to set the cookie in the user's browser, allowing him or her to maintain his or her preference the next time he or she comes back without any further input. But you will still provide the option to change it at any time by offering the other links.

Now, to put the resize links in your script (web page), just insert the following line in your page where you want the links to appear: 

<!--#include virtual | file ="../includes/CSSResize.asp"-->

We are now on to the last step, including the updated CSS in the document. The next step you are going to take is create a new text file called 'CSS.asp' in the 'includes/' directory and paste in the following script: 

<%
'## Code by Adrian Roselli from http://roselli.org
'## Provided free for evolt.org and its members.
'## No catches, just give me credit.
'## Make sure you point to the right style sheets, silly.
'## Last change July 10, 1999

	'## Iterate through the size options, with a default if there are no matches.
	IF Request.Cookies("TextSize") = "Large" THEN
%>
<LINK  REL="stylesheet" TYPE="text/css" HREF="../includes/large.css" NAME="master">
<% 
	ELSEIF Request.Cookies("TextSize") = "Small" THEN
%>
<LINK  REL="stylesheet" TYPE="text/css" HREF="../includes/small.css" NAME="master">
<%
	ELSE
%>
<LINK  REL="stylesheet" TYPE="text/css" HREF="../includes/normal.css" NAME="master">
<%
	END IF
%>

Or, if you prefer to include all of your styles within each page, then you can use the following script. Don't worry, the server will only send the chunk of CSS that you specify with your IF statments. 

<style type="text/css">

<!--
<%
'## Code by Adrian Roselli from http://roselli.org
'## Provided free for evolt.org and its members.
'## No catches, just give me credit.
'## Make sure you include all your styles, instead of just this one, silly.
'## Last change July 10, 1999

	'## Iterate through the size options, with a default if there are no matches.
	IF Request.Cookies("TextSize") = "Large" THEN
%>
.text        {    font : 12pt Arial, Helvetica, serif ;
		  color : #cccc99 ;
                  line-height : 16pt }
<% 
	ELSEIF Request.Cookies("TextSize") = "Small" THEN
%>
.text        {    font : 8pt Arial, Helvetica, serif ;
		  color : #cccc99 ;
                  line-height : 16pt }
<%
	ELSE
%>
.text        {    font : 10pt Arial, Helvetica, serif ;
		  color : #cccc99 ;
                  line-height : 16pt }
<%
	END IF
%>
-->

</style>

Somewhere within the <head> </head> tags of your script (web page), add the following: 

<!--#include virtual | file ="../includes/CSS.asp"-->

Congratulations, if I wrote the script correctly, then you should be ready to experiment on your own servers. For double-checking purposes, the final code on your page may resemble this: 

<!--#include virtual | file ="../includes/cookie.asp">

<html>
<head>
<title>Soylent Green</title>

<!--#include virtual | file ="../includes/CSS.asp"-->

</head>

<body bgcolor="#003333" text="#cccc99" link="#cc9933" vlink="#999999" alink="#ff0000">

<font face="arial,helvetica,sans serif" size="2" class="text">

This is some standard body text.  It will change size of you click a link below.
<br><br>

<!--#include virtual | file ="../includes/CSSResize.asp"-->

</font>

</body>
</html>

There are many more options available to you here. Perhaps you want more than 3 styles, maybe you want 6. Perhaps you want the styles to change depending on where your user is surfing — for instance, pages of just text get a larger stylesheet, but pages with images and only caption text may have smaller stylesheets. You can also use the same code to re-write your <font> tags throughout the site, simply be defining them as variables in an included file and calling that variable throughout the site. You can even load larger or smaller navigation images for your site by using a series of image files in addition to the CSS.

Obviously, many of these suggestions go beyond what you may need to do for your users, but at the very least, giving the user control over the fonts on your site could go a long way to keeping them as repeat users. And at the same time, you may sleep better knowing that you are working toward making the web a friendlier place for both the eagle-eyed and the lazy-eyed.