Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

What is 13px in 13px text?

Posted on 2004-08-20
20
Medium Priority
?
203 Views
Last Modified: 2010-04-06
If I set text in Illustrator or an CSS to 13px, what exactly is supposed to be 13px? I.e., what does 13px *mean*?

Thanks.
0
Comment
Question by:metalaureate
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 14
  • 6
20 Comments
 
LVL 14

Expert Comment

by:huji
ID: 11855379
In very simple words, it means the hight of an "x" letter from top to buttom.
0
 
LVL 14

Expert Comment

by:huji
ID: 11855395
And I recommend you to focus on the exact question, since I wonder you are asking this to answer another question.

Wish I can help
Huji
0
 
LVL 14

Expert Comment

by:huji
ID: 11855410
A font size describes the height of the tallest characters in a font in terms of points. It takes 72.27 points to make an inch. Web browsers tend to use 8 points as the size of their base fonts by default. In HTML files, font size may be modified by the Web author by using HTML tags.
dpsinfo.com/help/words.html
0
Tech or Treat! - Giveaway

Submit an article about your scariest tech experience—and the solution—and you’ll be automatically entered to win one of 4 fantastic tech gadgets.

 
LVL 14

Expert Comment

by:huji
ID: 11855431
Typo: I meant a capital "X" letter....
0
 

Author Comment

by:metalaureate
ID: 11855464
The problem is, in Illustrator and in IE & Mozilla, the height of an "x" in, say, Verdana, is 7 pixels. So that's why I am asking (i thought it meant the height of a lower case x also); what gives?
0
 

Author Comment

by:metalaureate
ID: 11855483
The height of a capital X in Verdana at 13px is 9 pixels. So what's going on?
0
 
LVL 14

Expert Comment

by:huji
ID: 11855506
The height of capital X of size 12PX is really 12PX, and please do not mix it with 12PT which is a different thing.
I am still online and try to answer it now. Don't hesitate to ask any questions. (I actually didn't get the point of your second post may be)

Wish I can help
Huji
0
 
LVL 14

Expert Comment

by:huji
ID: 11855517
Come on, how do you calculate that? I know that there is a very little difference in size of fonts, but not this much! Can you say how you calculate it?
Huji
0
 
LVL 14

Expert Comment

by:huji
ID: 11855594
In my case, Time New Roman 12px font results in something about 10 px. Verdana, and Arial do just the same size. But not seven!
And notice that I am using 12 px. My experience shows that following the rule of using Even numbers for font sizes will result in a more reliable design!
0
 
LVL 14

Expert Comment

by:huji
ID: 11855831
And if you set your font size by POINTS (pt) value every thing will be in it's correct look.
Create a file named 12.gif in 12*12px size and use this code with it:


<style>
.verdana {
      font-size: 12pt;
      font-family: Verdana;
}
.arial {
      font-size: 12pt;
      font-family: Arial;
}
.times {
      font-size: 12pt;
      font-family: "Times New Roman";
}
</style>
<body>
<img src="12.gif"><font class="verdana">X</font><font class="times">X</font><font class="arial">X</font>
</body>


Wish I can help
Huji
0
 
LVL 14

Expert Comment

by:huji
ID: 11855851
Final note before I go to sleep: If you feel that the third X (Arial one) is a bit larger, no need to refer to the optometrist! You are right. Arial font is a bit larger than it must be, in it's common Windows version. I don't know if the Mac version has this error too or not.

Huji
0
 

Author Comment

by:metalaureate
ID: 11855865
Hi Huji

The point of my last post was, I made a 12px size X in Verdana, in Illustrator. I blew up the screen and counted the pixels. There were only 9 of them.

I don't understand how 12 pixels can equal 12 points. Even if your example is correct, what I want is an explanation of what DOES THE UNIT MEAN? What does it *mean* to say that such and such a text is at 12px?? :)
0
 

Author Comment

by:metalaureate
ID: 11855940
Is this font size business just a crap-shoot then??
0
 
LVL 14

Expert Comment

by:huji
ID: 11858123
I have uploaded the 12 Point size example here for you: http://ssrc.tums.ac.ir/EE/12.asp
As you can see, Times New Roman's X is 11 points in height! (And yes, the 12px sized font is only 9 pixels heigh!)
Anyways, for a web designer, the only important thing can be that the 12pt font (any standard font) is obviously larger than 10pt font (any standard font).
Please notice that we are usually working based on differences and not on exact sizes.
I accept that the font sizes are not following the defenition, and I have not yet found the reason myself. All I know is that we can adapt with this bug/feature.
If I find any thing related, I will post here.

Wish I can help
Huji
0
 
LVL 14

Accepted Solution

by:
huji earned 1500 total points
ID: 11858142
And about what is the difference of points and pixels, and where to use each of them, and why it is not crap-shoot, I am putting a piece of http://www.webstyleguide.com/type/size.html here for you:


...
The W3C recommends that you let users set the base font size in their browser and that you set all variations using the "em" unit. An em in the Web context is the same as the font height, which makes it a relative unit and therefore flexible. For example, if the user-set default is 12-point, then a 2-em text indent would be 24-point, but if the user used the text zoom feature of the browser to change the size to 16-point, the indent would change to 32-point to reflect the larger type size.... As you might imagine, this flexibility can send page layouts into disarray.

You can also use points to define your type sizes, but bear in mind that this carryover from the print medium has little meaning on a computer screen. Because monitors display at different resolutions, 12-point type on one screen could approximate 14-point type on another. This can be particularly problematic for small point sizes. For example, 6-point type is legible on a Windows display, where the default resolution is 96 ppi, but on a Macintosh, at 72 ppi, it is illegible.

[for the above paragraph I highly advice you to go and see this picture: http://www.webstyleguide.com/type/graphics/5.13.gif ]

Just remember that declaring your type in points does not mean that the point size you specify is what will actually display on the user's monitor. And because this unit is not "fixed" — that is, type set in points can be resized in the browser — this approach also requires an adaptable layout.

If the integrity of your layout depends on specific type sizes, the most dependable option right now — until there is better CSS support — is to use pixel units in your style declarations. Text defined using pixels will be the same size regardless of the browser's default font size and resolution settings.
...


Wish it helps
Huji
PS: I also recommend you to read all the typography notes in the "Web Style Guide" web site. I found it very useful.
0
 
LVL 14

Expert Comment

by:huji
ID: 11858160
By the way, what is your screen resolution? Mine is 1024*768.
And if you like info about screen resolutions: http://www.w3schools.com/browsers/browsers_stats.asp
The above link can tell you that you have to check your design with both 1024*768 and 800*600 monitors, in preliminary steps.

wish I can help
Huji
0
 

Author Comment

by:metalaureate
ID: 11859009
Hi Huji,

This stuff is helpful but you really haven't answered my question because you just don't know the answer!!!! :) I don't need advice on web typography, I want to know what 13px *means*! (not that I can find the answer anywhere myself!)

Thanks for your help.
0
 
LVL 14

Expert Comment

by:huji
ID: 11859859
If I have not answered your questions, there may be others who can! You shouldn't have closed the question then. You can re-open it if you like or open a new question, in Fonts topic area, or search for the answer else where.
This is your choice. I just meant to help, and I'm not sure if I really did.

Wish I can help
Huji
PS:By the way, if you found an answer, would you send it here to let me know it too, please?
0
 

Author Comment

by:metalaureate
ID: 11859937
You did help. I re-posted the question Web Graphics, and got an answer from seanpowell.

http://www.experts-exchange.com/Web/Web_Languages/CSS/Q_21102187.html#11859349
0
 
LVL 14

Expert Comment

by:huji
ID: 11860089
OK. Please don't forget to tell me about possible answer to this question...
Good luck
Huji
0

Featured Post

Tech or Treat! - Giveaway

Submit an article about your scariest tech experience—and the solution—and you’ll be automatically entered to win one of 4 fantastic tech gadgets.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Keep your audience engaged and get the most out of your next presentation with these quick Prezi tips.
Technology opened people to different means of presenting information, but PowerPoint remains to be above competition. Know why PPT still works today.
In this tutorial viewers will learn how to create blended and gradiated shapes in Illustrator using the blend tool Draw two shapes, one of them in a different color: Select both and create a blend by going to Object > Blend > Make: Blends can also b…
Illustrator's Shape Builder tool will let you combine shapes visually and interactively. This video shows the Mac version, but the tool works the same way in Windows. To follow along with this video, you can draw your own shapes or download the file…
Suggested Courses

618 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question