User Scalable Text Using CSS?

[Cerebral Believer]

Hi all,

I am keen to allow people who view my site to be able to resize the text in
their browsers (especially for people who need to read larger text). With
my old web-page I specified the point size in the HTML code, and noticed
that when using Internet Explorer the text could not be resized. In
designing my new site I have chosen to express the text sizes as percentages
in a stylesheet, e.g.

..side_panel_title {
font : bold 50% 'Trebuchet MS',
'Lucida Grande', Arial, sans-serif;
color : #990000;
}
..side_panel_text {
font : 50% 'Trebuchet MS', 'Lucida
Grande', Arial, sans-serif;
color : #373737;
}

I did this thinking that the viewers of my web-pages would be able to select
larger font sizes for viewing by adjusting their browser text settings.
However, when the page is rendered in Internet Explorer, the text only
appears in a readable size (the size I actually designed the page) when the
"View | Text Size | Largest" setting is selected. I had thought that users
would be able to increase the size text to a larger size than the sizes I
used to design the page in order to make the text easier to read - that is
what I want to achieve, that is the same effect as on the w3org site
http://www.w3.org/. What am I doing wrong? Or is what I am trying to
achieve not possible (this way)?

Regards,
C.B.

 

[Jonathan N. Little]

Hi all,

I am keen to allow people who view my site to be able to resize the text in
their browsers (especially for people who need to read larger text). With
my old web-page I specified the point size in the HTML code, and noticed
that when using Internet Explorer the text could not be resized. In
designing my new site I have chosen to express the text sizes as percentages
in a stylesheet, e.g.

.side_panel_title {
font : bold 50% 'Trebuchet MS',
'Lucida Grande', Arial, sans-serif;
color : #990000;
}
.side_panel_text {
font : 50% 'Trebuchet MS', 'Lucida
Grande', Arial, sans-serif;
color : #373737;
}

I did this thinking that the viewers of my web-pages would be able to select
larger font sizes for viewing by adjusting their browser text settings.
However, when the page is rendered in Internet Explorer, the text only
appears in a readable size (the size I actually designed the page) when the
"View | Text Size | Largest" setting is selected. I had thought that users
would be able to increase the size text to a larger size than the sizes I
used to design the page in order to make the text easier to read - that is
what I want to achieve, that is the same effect as on the w3org site
http://www.w3.org/. What am I doing wrong?

font: bold 50% 'Trebuchet MS','Lucida Grande', Arial, sans-serif;
^^^^
THAT! 50% in incredibly small!

BODY { font-size: 100%; }
..anything_else not smaller than 75%, 80% is usually the preferred
smallest for stuff like boilerplate.

Or is what I am trying to

achieve not possible (this way)?

 

[Cerebral Believer]

font: bold 50% 'Trebuchet MS','Lucida Grande', Arial, sans-serif;
^^^^
THAT! 50% in incredibly small!

BODY { font-size: 100%; }
.anything_else not smaller than 75%, 80% is usually the preferred smallest
for stuff like boilerplate.

Yes, thanks for that you are right, that text size is small. I had used
that size because, given the way I had formed my CSS & HTML, it rendered the
way I prefer to see it in my browser, but since I modified my CSS the way
you suggested I can see why I should use a larger size. The only issue I
have now is that the text does appear to be bold when in larger sizes, and I
would have liked to keep the text in the same weight as I would usually see
it on my screen, I will experiemnt with the font-weight.

Thanks very much for your help.
C.B.

 

[Beauregard T. Shagnasty]

The only issue I have now is that the text does appear to be bold when
in larger sizes, and I would have liked to keep the text in the same
weight as I would usually see it on my screen, I will experiemnt with
the font-weight.

Remove 'bold' from your css and it won't be .. er .. 'bold' anymore.

 

[Carolyn Marenger]

Yes, thanks for that you are right, that text size is small. I had used
that size because, given the way I had formed my CSS & HTML, it rendered
the way I prefer to see it in my browser, but since I modified my CSS the
way
you suggested I can see why I should use a larger size. The only issue I
have now is that the text does appear to be bold when in larger sizes, and
I would have liked to keep the text in the same weight as I would usually
see it on my screen, I will experiemnt with the font-weight.

Thanks very much for your help.
C.B.

Why not leave the font setting at 100% and adjust your browser so it looks
good to you on your system. Then it will also look good to everyone else
when they see it on theirs at their ideal font size. This is assuming of
course that they have their default font size set to their ideal.

Carolyn

 

[Jonathan N. Little]

Yes, thanks for that you are right, that text size is small. I had used
that size because, given the way I had formed my CSS & HTML, it rendered the
way I prefer to see it in my browser, but since I modified my CSS the way
you suggested I can see why I should use a larger size. The only issue I
have now is that the text does appear to be bold when in larger sizes, and I
would have liked to keep the text in the same weight as I would usually see
it on my screen, I will experiemnt with the font-weight.

Actually Toby had a very good argument and demo on default font size:

http://tobyinkster.co.uk/web-fonts
Fonts — Toby Inkster

 

[Cerebral Believer]

Remove 'bold' from your css and it won't be .. er .. 'bold' anymore.

Yes, of course that makes sense, it was another poster who suggested the use
of "bold", which I thought sounded a little odd. After checking w3c I can
see I can use "normal" instead. Thanks for your response.

Regards,
C.B.

 

[Beauregard T. Shagnasty]

Yes, of course that makes sense, it was another poster who suggested
the use of "bold", which I thought sounded a little odd. After
checking w3c I can see I can use "normal" instead. Thanks for your
response.

"normal" is the default, so you do not have to mention it at all.

 

[Cerebral Believer]

Why not leave the font setting at 100% and adjust your browser so it looks
good to you on your system. Then it will also look good to everyone else
when they see it on theirs at their ideal font size. This is assuming of
course that they have their default font size set to their ideal.

Carolyn,

Yes, I think you have seen through my faulty logic. I actually think the
page looks best in a small font size and want everyone else to see it that
way by default. I had thought IE scaled the text sizes up/down relative to
the text sizes in which the page was designed - I now understand this is not
correct. I am new to this and I guess it shows, but that is all part of
learning, right? Thanks for your advice.

Regards,
C.B.

 

[Harlan Messinger]

Hi all,

I am keen to allow people who view my site to be able to resize the text in
their browsers (especially for people who need to read larger text). With
my old web-page I specified the point size in the HTML code, and noticed
that when using Internet Explorer the text could not be resized. In
designing my new site I have chosen to express the text sizes as percentages
in a stylesheet, e.g.

.side_panel_title {
font : bold 50% 'Trebuchet MS',
'Lucida Grande', Arial, sans-serif;
color : #990000;
}
.side_panel_text {
font : 50% 'Trebuchet MS', 'Lucida
Grande', Arial, sans-serif;
color : #373737;
}

I did this thinking that the viewers of my web-pages would be able to select
larger font sizes for viewing by adjusting their browser text settings.
However, when the page is rendered in Internet Explorer, the text only
appears in a readable size (the size I actually designed the page) when the
"View | Text Size | Largest" setting is selected. I had thought that users
would be able to increase the size text to a larger size than the sizes I
used to design the page in order to make the text easier to read - that is
what I want to achieve, that is the same effect as on the w3org site
http://www.w3.org/. What am I doing wrong? Or is what I am trying to
achieve not possible (this way)?

I don't understand--how, other than a browser, are you examining your
work while designing it, that it could look different than it does in a
browser?

What is the base text size, that the side panel is supposed to be 50% of?

 

[Cerebral Believer]

I don't understand--how, other than a browser, are you examining your work
while designing it, that it could look different than it does in a
browser?

What is the base text size, that the side panel is supposed to be 50% of?

Harlan,

If you read my response to Carolyn, you will see the basic error I was
making. Very silly of me I admit, but the matter is now resolved. Thanks
for your resonse.

Regards,
C.B.

 

[Carolyn Marenger]

Cerebral Believer wrote:

Carolyn,

Yes, I think you have seen through my faulty logic. I actually think the
page looks best in a small font size and want everyone else to see it that
way by default. I had thought IE scaled the text sizes up/down relative
to the text sizes in which the page was designed - I now understand this
is not
correct. I am new to this and I guess it shows, but that is all part of
learning, right? Thanks for your advice.

Regards,
C.B.

Glad I could help,

Carolyn

 

[dorayme]

Remove 'bold' from your css and it won't be .. er .. 'bold' anymore.

You mean, of course, it won't be .. er .. bold anymore

 

[dorayme]

Why not leave the font setting at 100% and adjust your browser so it looks
good to you on your system. Then it will also look good to everyone else
when they see it on theirs at their ideal font size. This is assuming of
course that they have their default font size set to their ideal.

This assumption is not as simple as it looks. It is an assumption made
by Toby too in his nice page on this business (sorry, once again, lost
post on my online reader and am trying Google).

The assumption is that a site that is made with no specified or 100%
main text is the basis for the average user to set the preferred
browser size. But I really do wonder how true this assumption is. I get
out now and then and am always surprised to see how big my main text
looks on other people's computers. I think what happens a lot more than
is realised is this: default browser settings and/or user twiddling
settle them to read average web pages. Average web pages made by
average designers, most of whom, are not followers of the generally
intelligent policies repeatedly advertised on alt.html, seem very often
if not mostly to use less than normal sizes. In other words, users have
browsers set to compensate for small sized texts!

I am not advocating against your advice. I am a great supporter of it.
It is just that I think, privately, we should distinguish between
advocacy and analysis. The more designers follow the good advice, the
more the ideal is reached but there is a pressure to use smaller than
normal just because others do and it has influenced browser settings. I
speak from what i see around me and from pressure from one or two of my
clients (usually resisted by me, but not 100% successfully)

 

[dorayme]

Why not leave the font setting at 100% and adjust your browser so it looks
good to you on your system. Then it will also look good to everyone else
when they see it on theirs at their ideal font size. This is assuming of
course that they have their default font size set to their ideal.

This assumption is not as simple as it looks. It is an assumption made
by Toby too in his nice page on this business (sorry, once again, lost
post on my online reader and am trying Google).

The assumption is that a site that is made with no specified or 100%
main text is the basis for the average user to set the preferred
browser size. But I really do wonder how true this assumption is. I get
out now and then and am always surprised to see how big my main text
looks on other people's computers. I think what happens a lot more than
is realised is this: default browser settings and/or user twiddling
settle them to read average web pages. Average web pages made by
average designers, most of whom, are not followers of the generally
intelligent policies repeatedly advertised on alt.html, seem very often
if not mostly to use less than normal sizes. In other words, users have
browsers set to compensate for small sized texts!

I am not advocating against your advice. I am a great supporter of it.
It is just that I think, privately, we should distinguish between
advocacy and analysis. The more designers follow the good advice, the
more the ideal is reached but there is a pressure to use smaller than
normal just because others do and it has influenced browser settings. I
speak from what i see around me and from pressure from one or two of my
clients (usually resisted by me, but not 100% successfully)

 

[dorayme]

This assumption is not as simple as it looks.

Sorry, it seems that my Google clicking was too much and my post
went twice...

 

[Leonard Blaisdell]

The assumption is that a site that is made with no specified or 100%
main text is the basis for the average user to set the preferred
browser size. But I really do wonder how true this assumption is.

Good point. But if someone knows enough to set the browser text size in
the first place, they know how to reduce or increase it. Otherwise, what
should an HTML jockey do? Should we design sites based on 80%? What does
100% mean to them?
We do, of course, what they want. But we point out the problem one way
or another. A bunch of them would be perfectly happy if we ran them off
and reduced the text size in their own browsers while they were gone to
match their ideal. I'm serious.

leo

 

[dorayme]

Good point. But if someone knows enough to set the browser text size in
the first place, they know how to reduce or increase it. Otherwise, what
should an HTML jockey do? Should we design sites based on 80%? What does
100% mean to them?
We do, of course, what they want. But we point out the problem one way
or another. A bunch of them would be perfectly happy if we ran them off
and reduced the text size in their own browsers while they were gone to
match their ideal. I'm serious.

leo

Let me be serious too, Leo. I did exactly this on a friend's
computer in Feb of this year! That is, I downed the browser text
so 100% set text would look reasonable. At one stage, only in the
browser window., At another time, in preferences. Not for them,
but for me, meant temporarily - I was using their machine a lot.
I forgot to reset on both occasions. And yes, it did look
reasonable to them on sites with 100% set (or defaulted so). But
the whole family screamed blue murder when they went to their
usual sites.

Another family member (not living there) had set it up for them
so that they felt comfortable with some sites (doubtless, ones
made with less 100% main text) that were either used for testing
or ones that were important to them at the time. So the issue I
was describing is actually a bit more complicated than is often
made out. I will say it again, we need to distinguish between
good ideal policy and the real world. And we need to understand
that there is an element of changing the real world in practicing
good policy.

I have no idea whether those who so confidently advise others to
use 100% main text are aware of this issue or the pressures
concerned. I can't help feeling that the absolutely confident
tone of the advice (to put it nicely) might not be modified now
and again to make the receiver of the advice a little more aware
of the underlying issues.