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]

Cerebral Believer wrote:

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)?

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

[Cerebral Believer]

"Jonathan N. Little" <lw*****@centralva.net> wrote in message
news:44**********************@news.centralva.net.. .

Cerebral Believer wrote:

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.

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]

Cerebral Believer wrote:

Cerebral Believer wrote:

.side_panel_title {
font: bold 50% 'Trebuchet MS', ... <snip>

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.

--
-bts
-Warning: I brake for lawn deer

[Carolyn Marenger]

Cerebral Believer wrote:

"Jonathan N. Little" <lw*****@centralva.net> wrote in message
news:44**********************@news.centralva.net.. .

Cerebral Believer wrote:

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.

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

--
Carolyn Marenger

[Jonathan N. Little]

Cerebral Believer wrote:

"Jonathan N. Little" <lw*****@centralva.net> wrote in message
news:44**********************@news.centralva.net.. .

Cerebral Believer wrote:

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.

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
--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

[Cerebral Believer]

"Beauregard T. Shagnasty" <a.*********@example.invalid> wrote in message
news:rL*******************@bgtnsc04-news.ops.worldnet.att.net...

Cerebral Believer wrote:

Cerebral Believer wrote:
.side_panel_title {
font: bold 50% 'Trebuchet MS', ... <snip>

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.

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]

Cerebral Believer wrote:

"Beauregard T. Shagnasty" <a.*********@example.invalid> wrote

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.

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

--
-bts
-Warning: I brake for lawn deer

[Harlan Messinger]

Cerebral Believer wrote:

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]

"Harlan Messinger" <hm*******************@comcast.net> wrote in message
news:48************@individual.net...

Cerebral Believer wrote:

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?

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.

[dorayme]

In article
<rL*******************@bgtnsc04-news.ops.worldnet.att.net>,
"Beauregard T. Shagnasty" <a.*********@example.invalid> wrote:

Cerebral Believer wrote:

Cerebral Believer wrote:
.side_panel_title {
font: bold 50% 'Trebuchet MS', ... <snip>

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.

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

--
dorayme