Which font size to use?

Another beginner question: What unit is the best to use when setting the font size in FW - pixels, percentage values or others ?

Personally I prefer the percentage values… but what is the base of how this is calculated?

Or makes it more sense to use pixels… are these hardware pixels or CSS pixels and how is the “physical” font size calculated?

Any insights are helpful. :slight_smile:

Thank you,
Tom.


freewaytalk mailing list
email@hidden
Update your subscriptions at:

On Jun 18, 2016, at 7:34 AM, Tom email@hidden wrote:

Another beginner question: What unit is the best to use when setting the font size in FW - pixels, percentage values or others ?

Personally I prefer the percentage values… but what is the base of how this is calculated?

Browsers have standardized on a stock font size of 16px, so if you don’t specify anything else, and you use a P tag, an LI tag, or bare text in another container, that’s what you will get. Important to note that different fonts have different apparent height at 16px – it’s not a hard-and-fast dimension per se.

When you use a percentage to set the size of a font, it will be based on the 16px value, unless you have changed the font-size property of the BODY tag (as some CSS frameworks like Bootstrap do, to make the arithmetic of relative sizes easier to work out). Now percentages can also “stack”, so it’s not as clear what the actual size will be if you have applied a percentage size to a block element and are then trying to calculate the size of text within child elements of that parent. Likewise, if you have a SPAN tag within a P or header that contains a percentage modification of the font-size, that percentage will be “of” the parent. For example:

body { font-size: 16px }
h2 { font-size: 120% }
.smaller { font-size: 80% }

<h2>Here is some text, <span class="smaller">and here is some more</span>.</h2>

The calculated font-size of the H2 in the above example is 19.2px, and the .smaller span within it is 80% of that, or 15.36px.

There are other units of measurement available in modern browsers. One of the nicest is rem, which means Root EM. 1em is 100% of whatever the base font-size is, but as we have seen above, the context can change around that, making precise calculations difficult at best. rems are always based on the base font-size, and do not change when their outer context does, so 1rem at the root of the document is the same as 1rem deep within a hierarchy of elements that modify the font-size. Freeway does not support rems without dipping into the Extended interface (which of course allows you to do anything you want, at the expense of being able to see what you’re doing in the design view).

Or makes it more sense to use pixels… are these hardware pixels or CSS pixels and how is the “physical” font size calculated?

All pixels in CSS are CSS pixels. Hardware pixels would not make much sense in a Retina world. On a device with a physical resolution of 360ppi, 72 pixels (which should always equal an inch) would only be 2/10 of an inch tall. So the 72 pixels are used to mean an inch, and if the resulting bitmap from your font will be at 360ppi. (Much sharper than the tiny 512px monochrome display of the Macintosh 128 that started it all.)

Walter

Any insights are helpful. :slight_smile:

Thank you,
Tom.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
Information for existing FreewayTalk / Groups.io users - Site Feedback - Softpress Talk


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

For a beginner … px. Freeway does a lousy job showing other measurements. When you’re confident enough, use percentages or even rem/em (but these have to be applied via the Extended option in your CSS Styles Editor.

Browsers normally have a 16px standard size. Your percentage will be calculated based on that 16px basis.

Richard


freewaytalk mailing list
email@hidden
Update your subscriptions at:

Hi and sorry for my late reply.

Thanks Richard and waltd for your really helpful explanations. Now I understand the concept of font sizes.

I always had problems to get the concept of why a 16px font on an old smartphone is almost the same size as on a high resolution screen.

So I think I’ll use the percentage values and go with these.

I noticed that FW sometimes displays 150% and then +1 (or similar) when selecting a font size. I can’t see a difference, it’s just strange.


freewaytalk mailing list
email@hidden
Update your subscriptions at: