I am working on a product and am curious is there a best practice or preferred way for front end on to receive line-height. Unitless over pixel and why?
I tend to use multiples of 4, 8, 12, 16 etc for spacing in my grid and organization.
Is it easier if the line-height follows similar rules for dev? 16, 20, 24, 28
or should I stick to unitless line-height and use what looks right meaning if line-height is 1.56 (16*1.56 = 24.96) just go that route?
Thank you
I research many sites and found out that unitless is preferred but no reason why or if that should be included in handoff. I read about keeping a vertical rhythm of multiples of 4 in regards to line-height but what if it looks better at 1.625 (25.6px)
Related
What are the advantages & disadvantages of each? em, px, % and pt ?
My current choice are percentages, the only reason is because I can globally change the font-size of all elements, just by modifying the font size on the root element (body)
I would recommend EM — simply because I use Baseline CSS for my basic set up of forms, layout and most importantly type.
Can't recommend it enough : http://baselinecss.com/
My original design training said em's where possible.
I believe a main reason was that different browsers and devices have different resolutions, which is once again becoming a big issue.
I think it's frequently better to use em's and %'s as they are an abstraction layer particularly when compared to pixels. Both are similar in some respects as "100%" = "1em".
Another problem with the pixel unit is that it does not scale upward for visually-impaired readers.
Today, for mobile, pad, etc. consideration it's often better to have specific stylesheets / rules for each one.
Also, for print concerns, em works well.
I have seen em unit called a standard for font sizes on the web, but the percent unit often gives a more consistent and accessible display. When user settings are changed, percent text scales well preserving readability, accessibility, and visual design.
Here is a link to one of my favorite articles on proper sizing of text with css from AListApart:
http://www.alistapart.com/articles/howtosizetextincss
Semantically, em is preferred, but I've always found it problematic because it impacts each child element inclusively. If your design nests 4 or 5 divs and each is at .75 em, by the time you get to the last child div your text is almost unreadable.
My preference is pt because it works with various operating systems (allowing the system itself to decide what a pt is) rather than using px which can really put a pinch on the readability of a site depending on resolution. Em is considered the "standard" for css, but it has just as many problems as the others, but it does have the advantage of cascading globally.
I always use ems. Using % is kind of the same, but they mean something else when using them in a padding or margin statement (padding:1em 0; is not the same as padding:100% 0;). So just use ems I you mean relative to the current font size, and avoid any confusion.
Added benefit or using ems is you could e.g. use a media query and body{font-size: 120%} to give mobile users a slightly bigger fontsize.
Nice question !
Me i'm using pixel because I like it when everything is fixed.
But checkout this article :
http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/
could help you make a choice.
I think all this is very personal. Or it depend of what you are doing I suppose
I've been working on a personal website (so, time is not an issue here) and I made a base stylesheet where I take care of all the font-sizes, border-widths, line-heights and the like.
I made an effort to use ems all the way, but when I tested the website on other browsers (eg. Chromium) the content didn't match my "pixel-perfect" grid.
So, my question here is, should I use px instead? I mean, I know ems are "the way to go" but nowadays most browsers implement fullpage zoom (they don't resize just the text) and when it comes to dealing with border-width and line-heights, px are more comfortable, because I can avoid subpixel rounding altogether.
What's your take on this? (btw, supporting IE is not one of my goals; i couldn't care less about it)
the content didn't match my "pixel-perfect" grid.
If you're working with a pixel-perfect grid, use pixel values. em is a relative value that works well only if the layout is able to adapt to different content sizes.
I would use em only for elements which size depends on font size.
Elements like borders (and its width) usually does not depend on font size.
When using em for margin and padding, I've found that the relative measurement can do some funny things.
The em can accumulate in nested elements and you find yourself bumping some values back up to align them with outer elements.
This looks fine until you shrink the browser window in very slowly and find that sometimes the values for the nested elements round to a pixel different to the outer parent.
To combat this, I've used rem at the parent level to set the font size and found that this allows parent and descendents to work from the same base relative value.
I have a simple problem:
I have an image inside of a div.
In order to make the page more aesthetically pleasing, I'm going to add some additional padding to the image.
Rather than eyeball it, I'd like to know:
Are there any CSS padding heuristics that I can follow?
I was thinking that somebody of Jakob Nielsen's caliber might have established some best practices about page layout and padding (i.e. minimum pixel padding or proportionality).
I'm not claiming that this is an especially difficult problem to solve.
But it's a problem that will likely come up again.
And I'd like some heuristics to guide my padding choices in the future.
Any help would be appreciated.
There actually are some standard formulas for this kind of thing.
The law of thirds. When in doubt, split it into three parts. Divide by three until you get to something reasonable.
The Golden Ratio - this is a little tougher, and you really need a program like Golden Section in order to pull it off correctly, but the basic idea is that your padding should be some multiple of the Golden ratio. The Golden Ratio is ((a+b)/a) = (a/b)) or about 1.618.
The A4 ratio. I don't know what this one is called - but it's 1.414 it's the ratio of a sheet of A4 paper.
Almost any ratio will make your grid look balanced if you stick to it.
If your image is 100 pixels wide, you divide by the golden ratio until you get something that's not WAY to big.
So golden ratio numbers for 100 pixels are 62, 38, 24, 15, 9, 6, 4, 3, 2, 1. In ems you can use fractional widths, so you wind up with 14.5, 9, 5.6 etc.
em units are a function of the width of your "m" in the font, so in CSS they can change throughout the page.
The "measure" is the width of line of text. You want your measure to be less than 2 to 2.5 alphabets. (You measure an alphabet by typing the abcdefg... twice.)
The Colin Wheildon brochure / book Communicating or Just Making Pretty Shapes has some excellent advice for laying out typography and images. It's largely oriented toward print, but most of the same principles still apply.
have you thought about using a css framework like:
BluePrintCSS
YAML
YUI Grids CSS
960 CSS Grid System
and so on (see this nice article)
my favourite is definitly blueprint, its not too bloated like YAML or YUI and gives you a perfect start for a new project. as far as i know it adds an 1.5em padding to boxes and such things. furthermore its easy adaptable. have a look :)
It's hard to give you a general answer because the general look of the page influences this choice. How much text density? How much white space? How many columns? How many images in one page? etc.
I think you should experiment yourself and you will quickly find your own typical padding size or range which you can start with and tinker on a per project basis.
Just have a look at Jakob Nielsen's web site. I don't care what his caliber is, you don't want to get aesthetics guidance from him. Of course a lot of his usability advice is valuable but take it all with a grain of salt.
I remember reading a style guide explaining what the proper line-height should be for each element. I can't find it on google.
I would appreciate it if anyone could link me to such a guide, or perhaps explain it in an answer.
Thanks!
Edit: SORRY, please let me clarify. I'm not asking about how to use CSS to set line-heights, but what the recommended line-heights are for various elements. eg headers, paragraph text, etc.
Thanks!
Maybe these references are more like what you're looking for. I haven't found a definitive rule, but at least here are some things to consider.
This one suggests that it depends on your choice of font-family:
http://www.webteacher.ws/2009/09/30/improve-readability-with-line-height/
This one suggests that it depends on the width of the lines:
http://kingdesk.com/articles/optimal-line-height/
This reference essentially agrees with both of those:
http://www.wpdesigner.com/2007/06/21/web-typography-line-spacing/
The main rules seem to be (1) wider lines of text require greater line-heights, and (2) greater line-height is required based on font if the height of lower-case letters is a high percentage of the height of upper-case letters.
The best approach is probably just to eyeball it, and try to avoid impenetrable walls of text.
The info here is pretty basic, but useful.
To summarize:
The default line-height:normal gives line-height:1.2, 120% of the font size. If you're going to change it, it's still usually best to use a number with no units, e.g., lineheight:1.5 (150% the font size), because then the line-height for an element will be computed from that element's font size, even if the line height was inherited from an element with different font size.
If you instead say line-height:10em, it's computed from the font on the element where the line-height was specified . . . that may be wrong if this line-height is inherited by an element with a different font size.
Likewise a specific number of pixels such as line-height:10px could certainly be wrong if it's inherited by elements with different font size.
It's usually 120% (of the font size).
W3 schools recommends (here) a line height of 1.6, though I've seen that between 1.2 and 1.45 is good as well
Normal line-height value is normal. You can edit that with numbers like 1.6 2 etc
This question already has answers here:
What is the difference between px, em and ex?
(4 answers)
Closed 1 year ago.
When setting the size of fonts in CSS, should I be using a percent value (%) or em? Can you explain the advantage?
There's a really good article on web typography on A List Apart.
Their conclusion:
Sizing text and line-height in ems,
with a percentage specified on the
body (and an optional caveat for
Safari 2), was shown to provide
accurate, resizable text across all
browsers in common use today. This is
a technique you can put in your kit
bag and use as a best practice for
sizing text in CSS that satisfies both
designers and readers.
Both adjust the font-size relative to what it was. 1.5em is the same as 150%. The only advantage seems to be readability, choose whichever you are most comfortable with.
From http://archivist.incutio.com/viewlist/css-discuss/1408
%: Some browsers doesn't handle
percent for font-size but interprets
150% as 150px. (Some NN4 versions,
for instance.) IE also has problems
with percent on nested elements. It
seems IE uses percent relative to
viewport instead of relative to
parent element. Yet another problem
(though correct according to the W3C
specs), in Moz/Ns6, you can't use
percent relative to elements with no
specified height/width.
em: Sometimes browsers use the wrong
reference size, but of the relative
units it's the one with least
problems. You might find it
interpreted as px sometimes though.
pt: Differs greatly between
resolutions, and should not be used
for display. It's quite safe for
print use though.
px: The only reliable absolute unit on
screen. It might be wrongly
interpreted in print though, as one
point usually consist of several
pixels, and thus everything becomes
ridiculously small.
The real difference comes apparent when you use it not for font-sizes. Setting a padding of 1em is not the same as 100%. em is always relative to the font-size. But % might be relative to font-size, width, height and probably some other things I don't know about.
Given that (nearly?) all browsers now resize the page as a whole, rather than just the text, previous issues with px vs. % vs. ems in terms of accessible font resizing are rather moot.
So, the answer is that it probably doesn't matter. Use whatever works for you.
% is nice because it allows for relative resizing.
px is nice because it's fairly easy to manage expectations when using it.
em can be useful when also used for layout elements as it can allow for proportional sizing related to the text size.
As Galwegian mentions, px is the most reliable for web typography, as everything else you do on the page is mostly laid out in reference to a computer monitor. The problem with absolute sizes is that some browsers (IE) won't scale pixel-value elements on a web-page, so when you try to zoom in/out, everything adjusts except for those elements.
I do not know whether IE8 handles this properly, but all other browser vendors handle pixels just fine and it is still a minority case where a user needs to enlarge/diminish text (this text box on SO perhaps being the exception). If you want to get really dirty, you could always add a javascript function for making your text size larger and offer a "small"/"larger" button to the user.
Regarding the difference between the css units % and em.
As far as I understand (at least theoretically/conceptually, but possibly not how these two units might be implemented in browsers) these two units are equivalent, i.e. if you multiply your em value with 100 and then replace em with % it should be the same thing ?
If there actually is some real difference between em and % then can someone explain it (or provide a link to an explanation) ?
(I wanted to add this comment of mine where it would belong, i.e. indented just below the answer by "Liam, answered Sep 25 '08 at 11:21" since I also want to know why his answer was downvoted, but I could not figure out how to put my comment there and therefore had to write this "thread global" reply)
Yahoo User Interface library (http://developer.yahoo.com/yui/) has a nice set of base css classes used to "reset" the browser specific settings so that the basis for displaying the site is same for all (supported) browsers.
With YUI one is supposed to use percentages.