Type sizs on Mac and PC

[Steve Pugh]

and you even used a strange resolution. your image has a resoltion of
28pix/inch.. wonder where you got that from?
usually you would use 72dpi which translates for you image to a size of
600px x 600px (and 42KByte)...
I am a bit confused here ;-)

Are you sure? Photoshop tells me that Toby's image is 72 dpi.

Anyway, the resolution of any image is totally meaningless on the web,
unless a user downloads the image to print out from a graphics program
the resolution never comes into play at all.

Steve

 

[Steve Pugh]

so pixels stem from the print industry, and em's not? How comes that the
em or the 'en' (you use the width of the letter 'n' to define the unit)
are well known in the print industry since ages. Indeed the use of a
square (the em-quad) as a relative unit of length for layout can be
found back in the old roman empire.
I don't know who got it backwards... ;-)

In the context of CSS, em is a suitable unit to use in screen
stylesheets and pt is a suitable unit to use in print stylesheets. px
is a suitable unit for text sizing if you know the exact parameters of
the output device - a dedicated kiosk for example.

Steve

 

[Toby A Inkster]

my goodness... I hope no one else can see this post. do you know what
you did?

Of course I know what I did. I distinctly remember doing it. Let's sum up
where we are so far.

SpaceGirl suggested a hypothetical situation where we have to be able to
specify text and image sizes relative to each other. For instance, we have
8 lines of text and want some image to appear at exactly the same height
as the lines of text.

SpaceGirl implied that such a design mandated fixed size fonts.

As I see it there are three solutions:

1. set a fixed font size so that the font is the right height for the
design (this is SpaceGirl's way);

2. set an image size based on the font size (suggested by me in
<[email protected]>); or

3. rework the design so that this problem disappears (suggested by
me in <[email protected]>).

You seem to be under the impression that I would suggest sizing images in
em units in the general case. You are mistaken. I am merely arguing that
in this situation, method #2 is preferable to #1. Method #3 is best of all.

first of all, we still have a
lot of low bandwith users with 56k modems around.

Total page size (including images): less than 7KB.

Your home page: total page size (including images): more than 15KB.

if I take your first size example: an image 16pixel x 16pixel.

Yes, but this is precisely my point. You can't possibly know whether the
image is really 16x16 or 24x24 or 32x32 because you don't know the font
size!

 

[Toby A Inkster]

usually you would use 72dpi which translates for you image to a size of
600px x 600px (and 42KByte)...

72dpi is the default on Macs. 96dpi is the default on Windows. X11 tends
to default to either 75dpi or 100dpi. But on any platform this can be
changed by the end user.

 

[Beauregard T. Shagnasty]

Quoth the raven named Bernhard Sturm:

so pixels stem from the print industry, and em's not? How comes
that the em or the 'en' (you use the width of the letter 'n' to
define the unit) are well known in the print industry since ages.

Of course they all came before the invention of browsers. That's not
the argument.

Indeed the use of a square (the em-quad) as a relative unit of
length for layout can be found back in the old roman empire. I
don't know who got it backwards... ;-)

The Roman Empire did not have a World Wide Web nor browsers to display
it. You are still not acknowledging that IE cannot resize a page with
text sized in pixels, which is the crux of this discussion.

Put pixels/points in your /print/ style sheet, but not your /screen/
style sheet. IE users will love you.

 

[Toby A Inkster]

The Roman Empire did not have a World Wide Web nor browsers to display
it.

Didn't they have Netscape 4 back then?

 

[Leif K-Brooks]

The sites that you mention have a very specific market; retail. I'd suggest
you could add news web sites to your list as well. I would hope that sites
like that offer flexible content and resizing. However the market I work in
is the music industry, where image is as (if not more) important as the
content. This would also apply to other media markets, such as movies.

I'm 13, and I like movies. Whenever I visit a movie's site, I'm annoyed
by it -- the fixed font sized, the inflexibility, the slow loading speed
-- but I generally put up with it. If I saw a movie site which addapted
to /my/ wants and needs on the web, not the designers', I would most
likely think better of that movie.

 

[Firas D.]

I'm 13, and I like movies. Whenever I visit a movie's site, I'm annoyed
by it -- the fixed font sized, the inflexibility, the slow loading speed
-- but I generally put up with it. If I saw a movie site which addapted
to /my/ wants and needs on the web, not the designers', I would most
likely think better of that movie.

+1 to that sentiment. I'm pretty ancient (18) and I rarely visit an
official band or movie site; I go to decent looking fan pages instead. I
want information, not a time hog. Why should I look at stupid smiling
faces and music playing in the background or a flash interface launched
in a new window when all I want to see is a tracklist?

 

[Beauregard T. Shagnasty]

Quoth the raven named Toby A Inkster:

Didn't they have Netscape 4 back then?

<rof,l> Maybe so!

/checks hieroglyphs

Aha. "Pointy stick and dirt!" (cannot be resized)

 

[Brandons of mass destruction]

then tell me: what is the proper font size?

whatever the individual, not the designer, says it is.

 

[SpaceGirl]

+1 to that sentiment. I'm pretty ancient (18) and I rarely visit an
official band or movie site; I go to decent looking fan pages instead. I
want information, not a time hog. Why should I look at stupid smiling
faces and music playing in the background or a flash interface launched
in a new window when all I want to see is a tracklist?

*shakes her head in despair*

I thought bands were fickle. Their bloody fans are ten times worse.

 

[SpaceGirl]

Of course I know what I did. I distinctly remember doing it. Let's sum up
where we are so far.

SpaceGirl suggested a hypothetical situation where we have to be able to
specify text and image sizes relative to each other. For instance, we have
8 lines of text and want some image to appear at exactly the same height
as the lines of text.

SpaceGirl implied that such a design mandated fixed size fonts.

As I see it there are three solutions:

1. set a fixed font size so that the font is the right height for the
design (this is SpaceGirl's way);

2. set an image size based on the font size (suggested by me in
<[email protected]>); or

3. rework the design so that this problem disappears (suggested by
me in <[email protected]>).

You seem to be under the impression that I would suggest sizing images in
em units in the general case. You are mistaken. I am merely arguing that
in this situation, method #2 is preferable to #1. Method #3 is best of all.

Total page size (including images): less than 7KB.

Your home page: total page size (including images): more than 15KB.


Yes, but this is precisely my point. You can't possibly know whether the
image is really 16x16 or 24x24 or 32x32 because you don't know the font
size!

But none of your solutions actually resolve the initial problem Doh.

 

[SpaceGirl]

whatever the individual, not the designer, says it is.

Not in the real world.

 

[Leif K-Brooks]

Not in the real world.

*pinch* Nope, I felt that.

 

[Toby A Inkster]

But none of your solutions actually resolve the initial problem Doh.

Why so? They certainly create an image that is exactly the same height as
the font.

 

[Bernhard Sturm]

Yes, but this is precisely my point. You can't possibly know whether the
image is really 16x16 or 24x24 or 32x32 because you don't know the font
size!

I suggest you try your little example once on a real page (with real
images), and not with an image containing a lot of linear elements ;-)
and still I am not convinced that you can mix raster and vector formats
by simply telling: 'I can scale a raster image in the same way as I can
scale a vector (fonts for instance) image'. Any designer would go mad
about the idea, that instead scaling your images in FW, re-sharping
them, adjusting contrast, and exporting them by indexing colors
(GIF/PNG) or optimise quality (JPG/PNG), you let the browser do those
horrible things at the expenses of bandwith... if I would see such a
site, I would think that the guy who designed it had absolutely no idea
about image optimisation and webdesign. Any book or designer tells you
exactly the opposite of what you did. And if your point was just to
demonstrate, that you are able to re-size raster images by adjusting
width/height properties of the img tag, then I am sorry to say, that we
all knew this before, as I assume all of us used the single pix gif
trick before...


bernhard

 

[Bernhard Sturm]

*shakes her head in despair*

I thought bands were fickle. Their bloody fans are ten times worse.

*grin*


bernhard

 

[Toby A Inkster]

And if your point was just to demonstrate, that you are able to re-size
raster images by adjusting width/height properties of the img tag, then
I am sorry to say, that we all knew this before, as I assume all of us
used the single pix gif trick before...

You have still not answered my main point: what would you do in a
situation where the size on an image needed to relate to the size of the
font?

I have said that there are three different solutions:

1. specify a fixed font size;
2. specify a scaled image size; or
3. fix the design so that this is not an issue.

And repeatedly stated that #3 is the best solution, but that number #2
should be taken in cases where #3 is impossible.

Why? Because I'd rather have a slightly blurry graphic than completely
illegible text.

 

[Bernhard Sturm]

Not in the real world.

I think we have here two fractions:
- 'Flesh & Bone'-Designers, who made the experience that fixed font size
offer them the beauty to control their overall design, giving them the
freedom to design a page where font-size is in harmony with other style
elements. 'Flesh & Bone''s are aware of the fact, that the (IE only)
users are limited in re-sizing their designs, but they would happily add
a second CSS covering a bigger (fixed) font-size, conserving again their
sacred design harmony.

- 'Content-is-King'-Designers, who tend to be more on the content side,
have the strong and valid point of view, that content rules over design.
They are strong believers that barrier-free webdesign is more than just
a word, and they build up their designs from scratch by using relative
font-sizes, and let the user the freedom to change the harmony of text
and style elements on their pages. 'Content-is-King' designers do look
at their pages as a mean of transporting information, not as 'art' or
any other esoteric notion. Users want information, as readable as
possible, and as quick as possible. On the other hand, 'Content-is-King'
designer take a great effort in trying to get the 'Flesh&Bone' harmony
between typography and style elements with the 'standard' size of their
font-size.

Take your pick ;-)
I myself would like to see me in the 'Flesh&Bone' part, but depending on
the site I wander to the 'Content-is-King' fraction.

 

[Bernhard Sturm]

SpaceGirl wrote:




Why so? They certainly create an image that is exactly the same height as
the font.

LOL


bernhard