Type sizs on Mac and PC

  • Thread starter The Devil's Advocate©
  • Start date
T

Toby A Inkster

SpaceGirl said:
Do you actually design web pages!??

Okay so I draw a pretty picture 24px x 500px in photoshop. It they gets
SCALED on the web page doing it your way. Have you ever tried this? It
looks AWEFUL...

Well, obviously. 8em by 12em is a completely different aspect ratio from
24px by 500px.

Also, best results will come from SVG images as they scale better than
PNG/JPEG/whatever.
You cannot do that, sorry... tell me another solution, one that works.

Fix your design so that it doesn't depend on fonts and images exactly
matching in size.
 
B

Bernhard Sturm

Toby said:
Then you still use 1em.




<img src="foobar" alt="Foo Bar" style="height:8em; width:12em;">

ROTFL.. that's cool. On which nice planet do you actually live? Whow..
that sounds to me like future: height:8em for a image?
Are you serious?

bernhard
 
B

Bernhard Sturm

Toby said:
Bernhard Sturm wrote:




1em.

I am not so sure, if you really understand what you write. So 1em just
fits perfect in any browser, any operating system, any device?
Do you come from the print industry?

bernhard
 
B

Bernhard Sturm

Toby said:
Well, obviously. 8em by 12em is a completely different aspect ratio from
24px by 500px.

Also, best results will come from SVG images as they scale better than
PNG/JPEG/whatever.

speechless I sit here and ponder about the beatuy of the world...
so you throw SVG into the same pot as PNG/JPG/whatever...? Whatever you
know about SVG? SVG stand vor 'scalable vector graphics' and do you know
what PNG/JPG/whatever stands for? raster graphics. do you know the
difference between these two types of graphic formats? RTFM ;-) there
are plenty of them on the web. That's just the starting point of any web
desinger.
Fix your design so that it doesn't depend on fonts and images exactly
matching in size.

??? that was probably the most profound advise I heard for ages.

bernhard
 
S

SpaceGirl

Toby A Inkster said:
Then you still use 1em.


<img src="foobar" alt="Foo Bar" style="height:8em; width:12em;">


I'd love to work out HOW big an image is in "em" lol. No image programs I
know of support "em", so how the hell can you calculate how many "em" a
given picture is? I would also love to see some examples of ANYONE using
this in the real world.... daft bugger :)
 
B

Beauregard T. Shagnasty

Quoth the raven named Bernhard Sturm:
I am not so sure, if you really understand what you write. So 1em
just fits perfect in any browser, any operating system, any device?

Yes. Exactly that. Any web displaying device.
Do you come from the print industry?

I believe you have this backwards. em are for screen, px/pt are for
print.
 
T

Toby A Inkster

Bernhard said:
Whatever you know about SVG? SVG stand vor 'scalable vector graphics'
and do you know what PNG/JPG/whatever stands for? raster graphics.

No. It stands for "Portable Network Graphics/Joint Photographics
Group/whatever" (for some reason you left out the E which stands for
"Expert".
do you know the difference between these two types of graphic formats?

I have a degree in computer science. Of course I know the difference. The
difference between the two concepts is what ensures SVG scales well.
That's why I suggested it.
 
S

Steve Pugh

Bernhard Sturm said:
I am not so sure, if you really understand what you write. So 1em just
fits perfect in any browser, any operating system, any device?

Yes. It's the size that the browser has been configured to display by
default. If that isn't the best size for the user to read then the
user can only blame himself for not configuring his browser properly.
Do you come from the print industry?

Unlikely. It's the people from the print industry who are most fond of
fixing the text at a set size (though they usually start of using pt
before migrating to px).

Steve
 
B

Bernhard Sturm

Toby said:
Bernhard Sturm wrote:




I have a degree in computer science. Of course I know the difference. The
difference between the two concepts is what ensures SVG scales well.
That's why I suggested it.

but then read again in your books what the difference between a raster
graphic and a vector graphic is.

this is vector (just a line (scalable, as it's a vector)):
P1(50,250);P2(250,250)

and this is raster (also a line but only 12px in width, definetely not
scalable ;-):
255,255,255,255,255,255,255,255,255,255,255,255

don't ever mix those two formats together, otherwise you really end up
explaining people, they could scale their images in em's...


bernhard
 
C

Carol Ott

Em and En are old typography measurements, when type was set by hand. It
has nothing to do with on-screen measurements.

Ask any printer and he'll tell you the same thing.

Carol
 
B

Bernhard Sturm

Beauregard said:
Quoth the raven named Bernhard Sturm:



Yes. Exactly that. Any web displaying device.

the same could be stated from any other size unit. (1 pixel ist still 1
pixel regardless of the display ;-)
but with em the trouble is, that it's actually a relative size
definition unit, as it size depends on the parent class size. according
to the W3C:

"The 'em' unit is equal to the computed value of the 'font-size'
property of the element on which it is used. The exception is when 'em'
occurs in the value of the 'font-size' property itself, in which case it
refers to the font size of the parent element. It may be used for
vertical or horizontal measurement. (This unit is also sometimes called
the quad-width in typographic texts.)"

and if you keep in mind that pixels are relative to the resolution of
the viewing device, you might use pixels as the most portable unit
accross devices...
but I agree it's a very academic debate here :)

bernhard
 
B

Beauregard T. Shagnasty

Quoth the raven named Bernhard Sturm:
and if you keep in mind that pixels are relative to the resolution
of the viewing device, you might use pixels as the most portable
unit accross devices...

Since it is likely that ~85% of your visitors are using IE, which will
not allow them to resize your font. ... oh gosh, hasn't this been
mentioned already? Pixels are not portable.
but I agree it's a very academic debate here :)

...and one that is debated every day, it seems. <g>
 
P

PeterMcC

Em and En are old typography measurements, when type was set by hand.
It has nothing to do with on-screen measurements.

Ask any printer and he'll tell you the same thing.

Same terms, different meanings in the two settings (if you'll pardon the
pun).

In web design, it means the default font size as defined in the browser
settings or as modified by the user. That allows the designer to set fonts
relative to the user's default. By using 1em, we know that the body copy
font is comfortable for the individual; other type sizes, for example
headings or small-print, are set relative to the 1em, e..g. 1.4 em or 0.9
em. That gives the same kind of differentiation by optical weight that
relative text sizes provide in print with the bonus that you know your copy
is a comfortable size for the reader.
 
B

Beauregard T. Shagnasty

Quoth the raven named Carol Ott:
Em and En are old typography measurements, when type was set by
hand.

That is the terms' origins of course. (How will you set a web page
size in 'en' ?
It has nothing to do with on-screen measurements.

...but it is how browsers determine what to display. It has everything
to do with on-screen measur.. ah, display.
Ask any printer and he'll tell you the same thing.

This is not a print medium newsgroup. <g>
 
T

Toby A Inkster

Bernhard said:
but then read again in your books what the difference between a raster
graphic and a vector graphic is.

Did you not *read* my post? I fully understand the difference between
vector and raster, which is why I said that SVG graphics scale well.

Besides which, even raster graphics don't scale too badly. Observe this
example:

http://www.goddamn.co.uk/tobyink/scratch/1em

This uses a small raster graphic (4.3KB, PNG) and sizes it to
"height:1em;width:1em" at a variety of different font sizes. Screen
captures are provided for a variety of different browsers (IE, Moz, O7,
Safari, Konq) and the graphic scales quite will in any of them.
don't ever mix those two formats together, otherwise you really end up
explaining people, they could scale their images in em's...

As I say, I don't have them mixed up, and I will continue to recommend
sizing pictures in ems in preference to sizing fonts in pixels.
 
B

Bernhard Sturm

Beauregard said:
Quoth the raven named Bernhard Sturm:



I believe you have this backwards. em are for screen, px/pt are for print.

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... ;-)

bernhard
 
B

Bernhard Sturm

Toby said:
Did you not *read* my post? I fully understand the difference between
vector and raster, which is why I said that SVG graphics scale well.

Besides which, even raster graphics don't scale too badly. Observe this
example:

http://www.goddamn.co.uk/tobyink/scratch/1em

This uses a small raster graphic (4.3KB, PNG) and sizes it to
"height:1em;width:1em" at a variety of different font sizes. Screen
captures are provided for a variety of different browsers (IE, Moz, O7,
Safari, Konq) and the graphic scales quite will in any of them.

my goodness... I hope no one else can see this post. do you know what
you did?
you took an image (256px x 256px) an just downscaled it by setting the
image width and height property. if I would design web sites like this,
I would be out of the business in days (maybe in minutes). I don't know
if there is enough space here to explain you how images are to be
presented on a website. hmm..let's try. first of all, we still have a
lot of low bandwith users with 56k modems around. your image is in its
original size 4.28kB (that's fair enough, as you use PNG which
compresses images lossless, and you were lucky enough to use a very
linear image).
Now you use your image in various different sizes (never in the original
size, you always use it smaller than the original one is [just a hint:
try it the reverse way, and you will instantly see the difference
betwenn vector and raster ;-)]). if I take your first size example:
an image 16pixel x 16pixel. that would make 635 Bytes! but you let the
user download again those 4.28kB...
On the other hand: your images DOESN'T resize nicely. If you look at it
closely you will see, that the lines are starting to aliase, and they
look fuzzy...
As I say, I don't have them mixed up, and I will continue to recommend
sizing pictures in ems in preference to sizing fonts in pixels.

Just don't do it. You are going to make your life very very tough.
Images do have a fixed size (it's raster), never confuse this with
vector. Please!


bernhard
 
S

Steve Pugh

Bernhard Sturm said:
the same could be stated from any other size unit. (1 pixel ist still 1
pixel regardless of the display ;-)

Not true. Set Windows to use the Large Fonts setting. 10px text is now
bigger than 10 pixels tall.

And of course there's always the possibility that one day browsers
will treat px as defined in the CSS spec in which case there will be
no fixed relationship between px and screen pixels.

Steve
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,777
Messages
2,569,604
Members
45,218
Latest member
JolieDenha

Latest Threads

Top