base font size ? What unit should I use ?

[NASCARaddicted]

I am working on a html file that I want to convert to epub.

In the external CSS, I added this line:

body {font-size: 20pt}

so that the base font size is 20pt (I hope this code is ok, according to a CSS Check it is valid). But some people on the Internet say, that using "px" or "pt" as size unit is not good (at least not for IE). Instead I should use "em". So far I tried "pt" and it worked (but at 24pt the font was way too big on my Bebook)

I already use "em", when it comes to stuff like margins, but I don't know if em also works on the base font size. I just looked at Wikipedia, and there it says:

This unit defines the proportion of the letter width and height with respect to the point size of the current font.

So can I use "em" as basefont size ? I mean, there is no current font. So basically "em" would be based on nothing. Or is there a default font size on any ebook reader (or at least on the ADE epub)
Or should I stick with "pt", since this works (once I figure out the ideal number)

And what about other ebook readers ? Currently, I use a Bebook that has a resolution of 800x600. What about other ebook readers with other resolutions ?

So to sum it up: What is the best basefont unit when it comes to html/css/epub ?

[Ankh]

IMHO, for ePubs, it is very bad idea to redefine the base font size. It is best left untouched, at 1em. There is, always, a default size built into the rendering software, even if you don't know what it is. It is a function of the rendering software, something specific to the target device...

If the font of the text is to small/big, let the reader software deal with it (increase/decrease of the font size on ADE readers, for example).

I use em units everywhere, which will scale nicely if user changes the default font size. It is good to keep the number of different formatting/fonts/font-sizes small, effective and completely contained in CSS. The consistency is almost a must, the same formatting should be used for all book elements of same type (all headers are the same, all quotes as well, etc.). All in all, the number of different font sizes needed for nicely rendered books is small, headers are bigger, if you use emulations of small caps, or more than one font family for elements ...

[charleski]

As Ankh said, all readers have to define a base size for fonts, and your base font definition will use that, so setting it to 1em or 100% will simply use the default base size.

An important thing to remember is that while all readers will allow the font size to be increased, few (if any) allow it to be decreased, so the base font size is the minimum size that will be used. On my Sony 505, text at 100% renders at a height of 2.1mm, which is approximately 6pt. This size should be clearly legible to anyone with good eyesight and it provides a line measure of around 56 characters, which is close enough to the ideal of 66.

Increasing the base font size will produce clearer and better-rendered characters, at the expense of having fewer per line and less text on the page. This is a decision that's best left to the reader.

[Jellby]

Originally Posted by charleski

An important thing to remember is that while all readers will allow the font size to be increased, few (if any) allow it to be decreased, so the base font size is the minimum size that will be used.

In the Cybooks you can use smaller font sizes. I set font sizes lower than 100% for things like smallprint, superscripts, captions... and they appear smaller in the Cybook. Maybe, if I set the base font size to the smallest possible that won't be the case, but I always use the 3rd smallest size at least

[tompe]

Originally Posted by Ankh

I use em units everywhere, which will scale nicely if user changes the default font size.

This is wrong for @page. See

http://www.w3.org/TR/CSS2/page.html

The page context has no notion of fonts, so 'em' and 'ex' units are not allowed.

[HarryT]

Originally Posted by Ankh

I use em units everywhere, which will scale nicely if user changes the default font size.

Not a good idea to define margins in "em" units. Most people do not want the size of the margins to increase, if they select larger text.

[Ankh]

Originally Posted by Ankh

I use em units everywhere, which will scale nicely if user changes the default font size.

I should have been more precise. What I wanted--but obviously failed--to say is:

I always use em units for font sizes...

.

[HarryT]

Thanks for clarifying that. You'd be surprised how many people do in fact define their margins in em's.

[Ankh]

Originally Posted by HarryT

Thanks for clarifying that. You'd be surprised how many people do in fact define their margins in em's.

All horizontal/vertical positioning should be handled with percent units, right?

How about the indentation of the first line in paragraph? Em's or percents?

[Jellby]

I believe the "best" way would be some combination of absolute and relative units, with a stepwise multi-variable function definition (if font size is smaller than x, then do this, else do that; if screen width is larger than x, then do this, else do that). In CSS3 there is the calc function, that could be useful, but it's missing max/min operators anyway. ADE's conditional styling could be used too, but it's not a standard feature.

I usually set all lengths in em units, even margins, but I don't define the body margin, but the margins for blockquotes, poetry, etc.

[NASCARaddicted]

so far I used em for all my margins. When I change the size of the font (by the zoom buttons on the ebook reader), I want that things like margins or text intend also change that way.

Where is the big difference between em and % ?

@Charleski

Talking about default font size: I just made a test with my Bebook. I took the same html file and used 3 different css files.

In the first try I did not set the body font size, I used the default of the reader. In the 2nd try, I set the base font to 1em. And with the 3rd try, I set it to 20 px.

The results: First of all: like I expected, setting no base fontsize gave the same result like setting it to 1em. The text was awfull small. I wear glasses (but the last time I had my eyes checked was less then 6months ago). I could read the text (but it wasn't easy), but I know someone like my 65 year old father would have needed a looking glass (or the zoom buttons on the Bebook)

Then I looked at some full lines with no intend (just to add: the text was justified, but contains no long words on this lines). The first line had like 87 characters, the next that I tried was 82.
When I zoomed in 1 level, it looked much better and I had around 64 characters on a line.

So I looked at the 3rd test, the one with base font set to 20px. The font size itself was much better, about 2-2.5 milimeters high. I also looked at some lines: The first one had 70 characters, the next one had 66.

I don't know, but for me, it seems as if I should use something like 20-22 (or maybe even 24) px as font size for my device.
However, if I use a different device ... oh man, everything is so complicated ...

[Jellby]

Use a device-independent absolute unit instead, like pt or mm.

[Ankh]

Originally Posted by NASCARaddicted

so far I used em for all my margins. When I change the size of the font (by the zoom buttons on the ebook reader), I want that things like margins or text intend also change that way.

You want margins to change with the font size? When you increase the font size, the number of characters displayed per line is smaller. Are you sure that you want to further decrease that number of characters by increased margins?

Originally Posted by NASCARaddicted

Where is the big difference between em and % ?

Oh, it varies, depending on the element . If font size is defined to be 150%, it is the same thing as setting it to 1.5em.

However, percents used for margin (top, bottom, left, right) are percents of width or length of the containing box, and are not affected when default font size changes.

[charleski]

Originally Posted by Jellby

In the Cybooks you can use smaller font sizes. I set font sizes lower than 100% for things like smallprint, superscripts, captions... and they appear smaller in the Cybook. Maybe, if I set the base font size to the smallest possible that won't be the case, but I always use the 3rd smallest size at least

Can the reader chose to go smaller? I'm just used to my 505 in which the book opens at the 'S' zoom level and you can make the text larger, but not smaller.

Originally Posted by NASCARaddicted

In the first try I did not set the body font size, I used the default of the reader. In the 2nd try, I set the base font to 1em. And with the 3rd try, I set it to 20 px.

The results: First of all: like I expected, setting no base fontsize gave the same result like setting it to 1em. The text was awfull small. I wear glasses (but the last time I had my eyes checked was less then 6months ago). I could read the text (but it wasn't easy), but I know someone like my 65 year old father would have needed a looking glass (or the zoom buttons on the Bebook)

Then I looked at some full lines with no intend (just to add: the text was justified, but contains no long words on this lines). The first line had like 87 characters, the next that I tried was 82.
When I zoomed in 1 level, it looked much better and I had around 64 characters on a line.

So I looked at the 3rd test, the one with base font set to 20px. The font size itself was much better, about 2-2.5 milimeters high. I also looked at some lines: The first one had 70 characters, the next one had 66.

I don't know, but for me, it seems as if I should use something like 20-22 (or maybe even 24) px as font size for my device.
However, if I use a different device ... oh man, everything is so complicated ...

Ouch, sounds like the Bebook is definitely using a default font size that's far too small. I just checked on my Sony 505, and text at 100% is slightly bigger than 20px and slightly smaller than 22px (so I'm guessing it's 21px).

This is certainly a complication. Specifying the base font size in % rests on the assumption that the device manufacturer has encoded the default as the smallest size that's comfortable for extended reading by someone with good vision. If some manufacturers are not setting up their machines properly, then it might be better to use px instead so that the user isn't having to fiddle with the zoom. The problem is that using px will definitely break in the future when we finally get devices with higher resolutions. For your current needs 20-22px sounds like the best option right now.

[NASCARaddicted]

Originally Posted by Ankh

You want margins to change with the font size? When you increase the font size, the number of characters displayed per line is smaller. Are you sure that you want to further decrease that number of characters by increased margins?

Well,basically I gotta say: yes, I want margins to change with the font size.

O.k. I admit, sometimes it ain't so good: for example when it's something like the start of a chapter, I use top margin 5 em, so that there is some space before the chapter title.

However, especially when it comes to "characters per line", I see it different. With my CSS, when a new paragraph starts, it starts with a text intend of 1.5 em. And I removed the empty line between 2 paragraphs, so it really looks like a paper book.

Now let's say, I use a fixed size like for example: text intend of 1.5 centimetres or maybe 5 yards ... you know what I mean. Lets say my textsize is 1em (let's say that would be about 1 centimetre). But now I zoom in. Now, my font is twice as big as before, but the intend stays the same. Let's say I zoom again, and now my font size is 10 times as big as before (unrealistic, but I just want to make it obvious). So now my font size is about 10 cm, while the text intent still is 1.5 cm. The whole thing would look different.

@Charleski

No one knows what the future will bring, that's why I keep all my ebooks in html file with external css files. It is pretty easy to change an external css and convert it with calibre.