selecting the right font size?

[webuu]

When using px to select a font size, how can I determine the supported font size for a particular font? For example when looking at the Courier font in the font settings of Notepad on Windows, 10, 12 and 15 are available. I'm not too familiar with font sizes, but I assume Notepads font settings use pixel size. Is there a way to be completely sure you have all available font sizes as you would use them in CSS on a given system?

[niche]

Font size in notepad is in points. Since fonts are now scaleable, the size you need will probably be available. What are you driving at?

[webuu]

I did not know they were in point, thank you. What I'm driving at however is that there is no error checking in HTML or CSS. Even in document conformance, so I can for exactly input 13px and it will match the closest size I think, but this is very inefficient, so I was wondering what the best way is to plan an exact size. You mention that fonts are now scaleable. It sounds self explanatory, but what exactly is meant by scalable? Is that something specific to CSS3? or HTML5? or what exactly do you mean, they are now scaleable?

[webuu]

I just read up on scaleable fonts. It's what I thought (vector fonts). What measurement system should I use for scaleable fonts when setting font-size? Also, how can you tell which fonts on your system are scaleable?

[webuu]

I looked into this more. I would like to finish this thread by asking some closing questions. I learned that em is the best unit to use for scaleable fonts. The info I got said that for example if a font is 12pt, then 1em = 12pt and 0.5em for example is 6pt. My closing question is about how awkward this is. Since a scaleable font is free to resize, then why are there different pt (point) sizes. Also, if I go in increments for example 12pt = 1em and then I do 1.1em, the font constrains and does not change in size. So there are ranges. So is it right that the different pt sizes are constraint sizes? Is there a maximum and minimum? (Then why is it scaleable), and etc. This might be overkill, but I fully want to understand what I'm doing when translating different font sizes. I hope that makes sense. Can someone clarify this for me? This helped also - http://reeddesign.co.uk/test/points-pixels.html.

Edited September 8, 2012 by webuu

[niche]

I think you're over-thinking this. Coding is as much an art as a science. Different systems and browsers will display the same code differently. Sometimes you won't notice those differences until after you think you're done with your code. html and css do have error checking. That's what validation is all about. An example of a non scalable font would be a headline tag. Which might be considered scalable because it will change when you zoom in and out.However, scalability has more to do with not having to create a new font each time you want to use different sized font which is what we had to do in the old days.

Edited September 8, 2012 by niche

[webuu]

Thank's for the help. At the same time I was very busy working out this problem by searching the web. I wrote a small note in my web development notes, and I would like to share this. I hope it helps someone and it should also make it more clear on what I was trying to figure out. When selecting a font size, points or pixels are the best bet. After the font is set, em's should be used to set the relative size of that font. This is because em is the best unit for scalability. What was confusing was, why on a true type font there are different pt or px sizes depending on the browser. The obvious answer is simple, so you can set the font to a different size. However, when setting the relative font size in em's, you can not use any number you want. The number has to be within the font's scaling range. Even though the font can be set to any size, it has to be scaled accordingly. Here is the note I put together on fonts. Fonts and CSS: Using Internet Explorer 8 and Firefox 15.0.1 as a reference. IE8 default font is "Times New Roman", 16px = 12pt = 1em. Firefox default font is "Times New Roman", 16px = 12pt = 1em. When setting an initial font size, use units of pixels (px), or points (pt). After this, to set the relative size of the font, use units of em. On Windows 7, Notepad font sizes are listed as points, ie. 10pt = 13px. If a table of font sizes is not available when working on a webpage, Notepad can be used as a reference. 1 pt = 1/72". 72 pt = 1 inch. Windows 7 default dpi = 96 dpi. 96 px = 1 inch = 72 pt. To find the relationship, 96 / 72 = 1.333... Therefore at 96 dpi, 1 pt = approx. 1.3 px. 10 pt = 13 px, etc. The last part is what can be used to create a table. In a previous post in this thread there is a link to a table someone created, and according to the last part of this note, it is correct for CSS.

[Ingolme]

To my knowledge, almost all fonts except some old ones or custom ones are a collection of vector data which means there is not a strict limit of sizes you can use. If the font is not in vector format, the browser will take care of choosing the size that is closest to the specified number.

[webuu]

Yes, exactly what you said. This is what confused me at first. So the note you see -- is how the vector scaling algorithm keeps it's constraints. The possible sizes defined for a font referenced by the OS, is exactly that, a definiton that matches the algorithm. I don't know if a font designer can override that when designing a font, but it might be possible. That would create uneven sizes though when scaled between the proper sizes. So where 15 px would for example not scale because it needs to be at least 16 px, it would scale, but the scaling algorithm would be off-balance so to speak. So when a font designer selects the possible font sizes, it follows an automatic constraint based on the type specification. In most cases True Type or Open Type.

Edited September 8, 2012 by webuu