View Full Version : base font size ? What unit should I use ?


NASCARaddicted
05-02-2010, 03:12 PM
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
05-02-2010, 04:03 PM
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
05-02-2010, 08:49 PM
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
05-03-2010, 05:21 AM
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 :D

tompe
05-03-2010, 06:02 AM
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
05-03-2010, 06:10 AM
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
05-03-2010, 09:48 AM
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
05-03-2010, 11:05 AM
Thanks for clarifying that. You'd be surprised how many people do in fact define their margins in em's.

Ankh
05-03-2010, 11:46 AM
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
05-03-2010, 12:18 PM
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 (http://www.w3.org/TR/css3-values/#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
05-03-2010, 03:20 PM
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
05-03-2010, 03:47 PM
Use a device-independent absolute unit instead, like pt or mm.

Ankh
05-03-2010, 05:18 PM
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?


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
05-03-2010, 05:32 PM
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 :DCan 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.


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
05-04-2010, 03:39 AM
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 :D ... 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.

Jellby
05-04-2010, 05:11 AM
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.

Yes, there are 12 font sizes to choose from, and the choice is global, for all books, until you change it again. Relative font sizes are always relative to the size you choose. I don't know about absolute font sizes, though.

HarryT
05-04-2010, 05:51 AM
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.


Defining paragraph intents in "em" is absolutely fine. Same applies to line indents for poetry; you want them to scale with the text.

What you probably DON'T want is for your overall PAGE margins to scale with the text. I always define page margins in points, so they are fixed.

tompe
05-04-2010, 07:04 AM
What you probably DON'T want is for your overall PAGE margins to scale with the text. I always define page margins in points, so they are fixed.

If you use em in @page the behavior is undefined and anything can happen. It is illegal to use it. So it is not as you have a choice.

Jellby
05-04-2010, 07:33 AM
If you use em in @page the behavior is undefined and anything can happen. It is illegal to use it. So it is not as you have a choice.

But page margins can also be defined for the <body> element, which does accept em units.

Ankh
05-04-2010, 10:58 AM
Defining paragraph intents in "em" is absolutely fine. Same applies to line indents for poetry; you want them to scale with the text.

Would you be so kind to elaborate on a difference between page margins and poetry indentation?

For example, what's wrong with the following practice:
- "normal" text: margin-left==margin-right==5% (of the page width)
- poetry: margin-left==margin-right==10%(of the page width)

HarryT
05-04-2010, 12:22 PM
You generally want a page margin to be a fixed width. In your case, 5% of the page.

When you indent one line of poetry relative to another line, you want the amount of indentation to scale with the text:

eg:

Line 1
Line 2
Line 3
Line 4


You'd want the "extra" indentation of lines 2 and 4, relative to lines 1 and 3, to be proportional to the font size. Of course, you might want the entire poem to be indented relative to the surrounding text, and a fixed offset would be fine for that.

NASCARaddicted
05-04-2010, 01:05 PM
You generally want a page margin to be a fixed width. In your case, 5% of the page.


So when I use something like "top margin 5%", will the 5% always be based on the page size ? I have no problem to change my page margins from em to %, points or pixel. I think pixel would be better, because afaik, points is a fixed unit. I mean, when I hear the resolution of my reader is 800x600, this means pixel, right ? In that case, using margins might be even easier, since I have the 800x600 as a starting base ...

Jellby
05-04-2010, 01:18 PM
So when I use something like "top margin 5%", will the 5% always be based on the page size ? I have no problem to change my page margins from em to %, points or pixel. I think pixel would be better, because afaik, points is a fixed unit. I mean, when I hear the resolution of my reader is 800x600, this means pixel, right ? In that case, using margins might be even easier, since I have the 800x600 as a starting base ...

5% would refer to the height (or width) of the containing element, I think. But not everything is quite clear with heights, as they are dynamic...

You can use pixels, but then the real dimension depends on the screen resolution. Points or millimeters should be device-independent.

Ankh
05-04-2010, 11:12 PM
Line 1
Line 2
Line 3
Line 4


You'd want the "extra" indentation of lines 2 and 4, relative to lines 1 and 3, to be proportional to the font size. Of course, you might want the entire poem to be indented relative to the surrounding text, and a fixed offset would be fine for that.

Thanks for the clarification. When you said "poetry" my mind immediately translated that to "blockquote". :)

Ankh
05-04-2010, 11:41 PM
5% would refer to the height (or width) of the containing element, I think.

Precisely. Here is the relevant portion of the spec:
8.3 Margin properties: 'margin-top', 'margin-right', 'margin-bottom', 'margin-left', and 'margin' (http://www.w3.org/TR/CSS2/box.html#margin-properties)

tompe
05-05-2010, 07:13 AM
But page margins can also be defined for the <body> element, which does accept em units.

With @page rule? What section of the CSS specification should I look at for a description of this?

Jellby
05-05-2010, 07:37 AM
With @page rule? What section of the CSS specification should I look at for a description of this?

No, not with @page, I mean that if you define left and right margins for <body> you get in practice margins for every "page", because everything is inside a <body> (except for the page numbers of ADE).

ghostyjack
05-06-2010, 12:09 PM
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.

Are you sure about this?

I never set the base font size in my CSS files, so I assume that the text will be displayed at 1em. But if I set some text to have a font size of, say, 80%, it displays it at 80% of what I assume is the base font size.

charleski
05-08-2010, 09:43 PM
Are you sure about this?

I never set the base font size in my CSS files, so I assume that the text will be displayed at 1em. But if I set some text to have a font size of, say, 80%, it displays it at 80% of what I assume is the base font size.

Not talking about css settings here, I was talking about whether the user can choose to decrease the size. This isn't possible on Sony devices, but according to Jellby it can be done on Cybooks ereaders, and possibly others.

ghostyjack
05-10-2010, 05:15 AM
I'm not sure I understand charleski, the original poster was talking about setting the default size in an external CSS style sheet, so I assumed that was what you were talking about.

Are you refering to setting the font size within the style section in each XHTML file? or are you talking about something else?

NASCARaddicted
05-10-2010, 02:25 PM
by the way, just to keep you updated, here are some things that I noticed - and basically solve my problem.

Some time ago, I downloaded a german epub ebook (Robinson Crusoe) from MR. I started to read it, but due to lack of time I didn't come far. Also, there have been other ebooks that I also wanted to read prior to this ebook.

Recently, I continued on this ebook. The font size on it was really good (I just checked and I get between 58-68 characters per line), so I unpacked the epub and looked at the css and the html files for something related to base size. And to my surprise, I didn't find anything ...

Well, before I continue, I have to start at the beginning: As I mentioned, standard epubs (that means without any change in fontsize) on the Bebook are awfully small. So when I convert from html to epub with calibre, I told calibre to change the font size to something around 20-24 pt. Since I was new into ebook readers I also tried the zoom button, but I noticed that only the first 2-3 zoom levels are useful, the other zoom levels were like: 2 lines per page (meaning 3 characters per line, not even a full word) - so deep did the Bebook zoom in.
So the whole zoom stuff was useless, since reading like 2 lines per page is rubbish.

Back to Robinson Crusoe. Out of boredom, I tried the zoom button and to my surprise, the zoom levels there were totally different. Even at the highest zoom level, the zoom was still useful (for half blind people, I have to admit). And the biggest surprise was yet to come.

I guess the zoom button is similar on many ebook readers. At least this is how it is on the Bebook: It goes only in 1 direction. So you zoom in and in and in, and once you are at the maximum zoom, the next level is back to the smallest again. And guess what: the smallest zoom level (or so to say: no zoom at all) is awfully small. Zooming in once got me back to the point, where the ideal 66 characters per line ...

So, when I use Zoom 1, the epub looks perfect, with the standard font size. But without zoom, the epubs are too small on the Bebook ...

So from now on, I will do my epubs without a base fontsize and just zoom in once ...

quillaja
05-11-2010, 12:00 AM
Please, please, don't specify a font size for normal text unless there's a good reason. If you really want to, use em. If you use pt, mm, px, then it could possibly be fixed at that size depending on how the reading system zooms/alters text size. It's just bad, particularly if you'll ever give the book to someone else.

Case in point: I recently bought China Mieville's "Iron Council" from the sony ebook store. The publisher apparently thought setting the font size to "impossibly tiny" was a good idea. I had to set my prs-600 to L just to bring the font size back to normal. It was completely stupid (especially in addition to the general poor quality of ebook. (Mieville's story, however, was amazing.))

JSWolf
05-13-2010, 04:14 PM
What I've found happens a lot is that the CSS is set to use small or even worse sometimes x-small. So I go into the CSS and remove font sizes for the main text except where is should be a different size. So basically, most books will have the body size at the default size which is then good for sizing up if you need/want to.

But, in order to do this on DRMed ePub, I first have to strip the DRM. I edit all my ePub I buy so they look more like a book should look instead on something generated by a poorly written computer program.

As for margins, don't use em as that will change the margins when the font size is changed. The margins are supposed to be fixed. The only place I use an em is text-indent as I use 1.1em.