Problem with the default value of line-height |
Problem with the default value of line-height |
xelanoimis |
May 5 2008, 08:57 AM
Post
#1
|
Group: Members Posts: 4 Joined: 15-April 08 Member No.: 5,451 |
Hi,
I want to display some text, using a floating DIV to place it inside some boxes painted on an image background. The problem is on a Linux system, where the default value of line-height seems to be 1.52 instead of 1.2, as I read it should be (both Mozile & FireFox). Because of that, the text gets out of the intended graphic boxes (at the bottom). I have in my .css BODY{ font-family:Arial; } DIV.floater{ font-size:13px; position:absolute; color:#000000; z-index:2; } And I didn't know of the line-height property until now. If I set line-height:1.2 in the floater DIV, everything looks OK, like on my Windows system. My questions are: Is this a common thing, that the default value of "line-height" is different, or it's a different cause? (font sizes looks the same, though I can't compare precise screenshots). Is it a good practice to set it to the default 1.2 value, to make sure it stays that way, no matter what? Is this approach save, for my purpose of having the text of the same size (fit in the same size rectangle) on any browser/system ? Is Arial font OK, or should I use (or add) Helvetica? Thank you! |
Frederiek |
May 5 2008, 09:51 AM
Post
#2
|
Programming Fanatic Group: Members Posts: 5,146 Joined: 23-August 06 From: Europe Member No.: 9 |
The default line-height generally equals the font-size.
See : http://htmlhelp.com/reference/css/text/line-height.html http://www.wpdesigner.com/2007/06/21/web-t...y-line-spacing/ http://webtypography.net/Rhythm_and_Propor...l_Motion/2.2.1/ Arial is nowadays present in most OS systems, but to be sure, add a generic sans-serif: BODY { font-family:Arial, sans-serif; } |
Darin McGrew |
May 5 2008, 10:07 AM
Post
#3
|
WDG Member Group: Root Admin Posts: 8,365 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 |
Is this a common thing, that the default value of "line-height" is different, or it's a different cause? It's common for browsers to have different default values for CSS properties, yes. The line-height property is just one of them.Is it a good practice to set it to the default 1.2 value, to make sure it stays that way, no matter what? Except for the "no matter what" part, it's fine. CSS is optional. See also Web pages aren't printed on paper and "How Do I Force...?"Is this approach save, for my purpose of having the text of the same size (fit in the same size rectangle) on any browser/system ? Positioning content over specific regions of a background image is an especially fragile way to design a web page. You don't control the font size. MSIE allows users to ignore document font sizes. Better browsers provide a minimum font size setting.Is Arial font OK, or should I use (or add) Helvetica? Is there any harm in providing Helvetica as an alternative after Arial? |
pandy |
May 5 2008, 10:27 AM
Post
#4
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
QUOTE Is there any harm in providing Helvetica as an alternative after Arial? They say Helvetica is better looking, so maybe it should be before Arial. I just tried a page with some lines of text, no CSS, in two browsers on Linux and IE on Win. I saw no difference at all in the line height. I don't have an eye for font matters, but I think I would see a big difference if I looked for it. |
Frederiek |
May 5 2008, 12:30 PM
Post
#5
|
Programming Fanatic Group: Members Posts: 5,146 Joined: 23-August 06 From: Europe Member No.: 9 |
Maybe something for you to read, Pandy.
http://ilovetypography.com/2007/10/06/aria...rsus-helvetica/ and http://meiert.com/en/blog/20080220/helvetica-arial/ |
xelanoimis |
May 6 2008, 04:55 AM
Post
#6
|
Group: Members Posts: 4 Joined: 15-April 08 Member No.: 5,451 |
Thank you for your advice!
I know the idea is to have dynamic layouts, and to allow the user to have his own font settings and so one. But in this case, I have very little text, and I want it to stay within the specified boxes. Here is the site link, so you can see exactly what it is about (please don't make it public yet): UnderDevelopmentSite Let me know what you think about this font size issue, and what is the best way for my case. Of course, one idea is to have some of the text as images, but that would take longer to load. And some needs to be dynamic (php changed). Or I could use flash objects with just text (swf) for the text boxes? I don't want to make it all in flash, though. And another thing, I don't want it to work on everybody's system, no matter what. Just to work for most of the users and the common browsers. Thanks! PS. I found out about the validator tools (css & html) and I'll fix the errors they report later. |
pandy |
May 6 2008, 07:34 AM
Post
#7
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
|
Lo-Fi Version | Time is now: 23rd April 2024 - 04:06 AM |