Solved

What is 13px in 13px text?

Posted on 2004-08-20
20
186 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
  • 14
  • 6
20 Comments
 
LVL 14

Expert Comment

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

Expert Comment

by:huji
Comment Utility
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
Comment Utility
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
 
LVL 14

Expert Comment

by:huji
Comment Utility
Typo: I meant a capital "X" letter....
0
 

Author Comment

by:metalaureate
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 
LVL 14

Expert Comment

by:huji
Comment Utility
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
Comment Utility
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
Comment Utility
Is this font size business just a crap-shoot then??
0
 
LVL 14

Expert Comment

by:huji
Comment Utility
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 500 total points
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
OK. Please don't forget to tell me about possible answer to this question...
Good luck
Huji
0

Featured Post

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

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.
Learn the basics of inputting and editing your text components in Prezi. We will cover how to set styles, position, and group your text components. In your Prezi editor, click anywhere on the canvas to add text: A flashing cursor informs you that yo…
In addition to being a great web-based presentation tool, Prezi also makes it easy to save your presentation as a PDF to share with others as well. Learn how in this tutorial. Select the share icon from the top menu in your Prezi editor: Select "D…

743 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now