Re: [css-d] css measures - em grid system makes sense ?

[mem]

On Nov 15, 2011, at 2:02 , David Laakso wrote:

> 
> This end OS X 10.4 and Android/2.2.2 [ low end smart-phone]. View in IE/6.0 
> if you seek only a 960 fixed width site...


Media queries will be my friends if the client requests mobile support.

This site target is:
. IE7 and up;
. Good browsers;
. No handled devices;

Plus the main navigation will slide to the right side, so it will be 
horizontal. (the sub items as two wide to fit the vertical space available), 
and because of that, handled devices must stay out and only play if we 
specifically draw a version for them. 


K. Regards,
m.





__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] css measures - em grid system makes sense ?

[mem]

On Nov 15, 2011, at 2:02 , David Laakso wrote:

> 
> 
> http://help.nuvemk.com/css/layout_structure_home.pdf
> 
> 
> Regards,
> Jorge Amado
> 
> 
> 
> 
> 
> Interesting visual, Jorge. A little top-heavy for mobile - handsets [as 
> is]with all that navigation, though.
> Fwiw, please see:
> 
> 
> This end OS X 10.4 and Android/2.2.2 [ low end smart-phone]. View in IE/6.0 
> if you seek only a 960 fixed width site…
> 


Thanks a lot for your work there. Really!

I've been looking into the different evolutions since this weekend, and I'm 
still totally amazed with the flexibility there implemented. 

Unfortunately I doubt that, at this time, I can pull something with so many 
images, and nested elements and still preserve that flexibility showed there.

Since copy/paste is not a good method for learning, I will take what I can 
understand and see how it goes.

Work in progress…


Note: my name isn't Jorge Amado, that was just a pseudonymous due to the fact 
you pointed my posts as novels, and "Jorge Amado" was a master on "tv novels in 
Brazil" :) 


Regards,
Márcio



__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] css measures - em grid system makes sense ?

[David Laakso]

http://help.nuvemk.com/css/layout_structure_home.pdf


Regards,
Jorge Amado






Interesting visual, Jorge. A little top-heavy for mobile - handsets [as 
is]with all that navigation, though.

Fwiw, please see:


This end OS X 10.4 and Android/2.2.2 [ low end smart-phone]. View in 
IE/6.0 if you seek only a 960 fixed width site...


Best,
~d





--
Desktop. Laptop. Tablet. Mobile!
http://chelseacreekstudio.com/

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] css measures - em grid system makes sense ?

[Michael Adams]

On Saturday 12 November 2011 01:52, mem wrote:
> On Nov 11, 2011, at 2:51 , David Laakso wrote:
> > I'd suggest that you simply put a full and complete rough layout
> > /on your server/ that reflects your intended final goal. Allow it
> > to speak for itself. No novella to accompany it is needed.
>
> http://help.nuvemk.com/css/layout_structure_home.pdf

A quick word to the wise. Right now PDF's and MS Office documents are 
not the flavour of the month. Problems with embedded fonts. I'm sure 
that this is a trusted source, but for the moment i would look to be 
supplying examples as exported images instead.

http://support.microsoft.com/kb/2639658
http://technet.microsoft.com/en-us/security/advisory/2639658

-- 
Michael
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] css measures - em grid system makes sense ?

[mem]

On Nov 11, 2011, at 2:51 , David Laakso wrote:

> I'd suggest that you simply put a full and complete rough layout /on your 
> server/ that reflects your intended final goal. Allow it to speak for itself. 
> No novella to accompany it is needed.


http://help.nuvemk.com/css/layout_structure_home.pdf


Regards,
Jorge Amado 
;)
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] css measures - em grid system makes sense ?

[David Laakso]

On 11/10/11 9:18 PM, mem wrote:

On Nov 10, 2011, at 21:43 , David Laakso wrote:



Please see...
---


While you send it I was already doing some changes on a layout that will be 
closer to the final intended one.
mem



I'd suggest that you simply put a full and complete rough layout /on 
your server/ that reflects your intended final goal. Allow it to speak 
for itself. No novella to accompany it is needed.


Best,
SomeYoungGuy,
Hanoi, Vietnam


--
Desktop. Laptop. Tablet. Mobile!
http://chelseacreekstudio.com/

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] css measures - em grid system makes sense ?

[mem]

On Nov 10, 2011, at 21:43 , David Laakso wrote:

> Try to avoid any situation requiring both h and v scrolling. Set the fonts so 
> they are readable by children of all ages. Above all else, keep it simple
> 
> Please see...
> 
> 

While you send it I was already doing some changes on a layout that will be 
closer to the final intended one.

I will start small.
Here's what I have so far:

Not *yet* with max-width and min-width;
Not *yet* with % applied;

http://cssdesk.com/KrDWX

5 issues / questions:

1)
The margin-top of #header p don't seems to visually return any effect. Why ?
It's not inline is it? 

2)
the margin top applied to the #footer doesn't seem to take any visual effect 
neither. Why?

3) 
On the #news element - why if we put width: 100% it breaks the container ?

4)
.moreDetail should be always x units up counting the bottom of their parents 
#news-block-a and #news-block-b

5) 
should we use min-height instead of height on those three blocks:
#newsletter-block
#news-block-a
#news-block-b


Thanks a lot,
mem

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] css measures - em grid system makes sense ?

[David Laakso]

On 11/10/11 11:12 AM, mem wrote:

By taking this example here:
http://cssdesk.com/PBbWK

I have two questions:

1) Let's suppose I would drop the em for margin and padding, what values in % 
should I place there instead to preserv the same look and feel ?

2) I'm trying to stress test a little and see the so called compounding effect 
- but no luck so far. What am I missing? (yes I want to provoke it so that, if 
it arrives during the development I can deal with it.)


mem




There is a basic rule of thumb for print-media layout: hold the 
horizontals; *hit* the verticals! The same principle applies to Web 
layout-- the only difference is the way in which you achieve it, and. 
Georg Sortun handed it you. I played with it. You play with, now...


Open the page in a monitor wider than 1024. Drag to 1024 [that gives you 
landscape tablet]. Drag to 768 [that gives you portrait tablets ]. Drag 
to 600 and add 480 media queries and you've got Android and iPhone 
mobile before the client screams for it .Try to avoid any situation 
requiring both h and v scrolling. Set the fonts so they are readable by 
children of all ages. Above all else, keep it simple


Please see...



Good luck and best,
Bono 4 U2
Milan, Italy




--
Desktop. Laptop. Tablet. Mobile!
http://chelseacreekstudio.com/

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] css measures - em grid system makes sense ?

[Tedd Sperling]

On Nov 9, 2011, at 8:35 AM, mem wrote:

> Hello all,
> 
> On my css layouts, I tend to use *em* for font size and *px* for all the 
> rest. 
> However, I wish not to follow this path any longer, since I wish to embrace 
> the *em* for [almost] all the development.
> 
> Problem: we use a *960px grid* for styling most of our pages, so the margin 
> or paddings and widths are given on px, and if we convert those, sometimes, 
> we will get weird stuff like: 0.345 em. 
> 
> Question: Will it make sense to create a grid based on *em* ? 
> 
> The point is to allow us to start drawing more user friendly measures like 
> .5em or .4em and avoid .453 em stuff.
> 
> What do you think ? 
> 
> Note: This is just a question, if it does make sense to you, just tell me and 
> explain me why so that I could understand and I can leave with that. 
> 
> 
> K. Regards, 

K:

I am sure that everyone has given you good-excellent advice, it's just that I 
don't have the time to read everyone's post.

With that being said and not wanting to step on others toes -- when clients 
allow me, I use em's throughout my sites. Here's an example:

http://sperling.com/clients/beckyscan/Don't worry, the client is no more 
(at least not with that domain).

Change the zoom value in your Browser and see how well that site maintains it's 
proportions. As you can see, no matter how complicated the site is, em's will 
work for creating zoom-able sites -- if that is what you want. 

If you want to convert pixels to em's, try dividing pixels by 16. For example 
160 pixels is 10em's. That works for me -- and yes, I get those 0.345em things, 
but Browsers handle them well.

Cheers,

tedd

_
t...@sperling.com
http://sperling.com







__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] css measures - em grid system makes sense ?

[Tim Climis]

> 2) I'm trying to stress test a little and see the so called compounding
effect -
> but no luck so far. What am I missing? (yes I want to provoke it so that,
if it
> arrives during the development I can deal with it.)

The following should do it:

li {font-size: .8em}

A menu item
  A submenu
Another sub menu
  


Your font size should get smaller and smaller.

---Tim
  

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] css measures - em grid system makes sense ?

[mem]

For this question sake, it was never in question if I would prefer to use a px 
or a em based layout.
By taking a look into David L. website, I can see one can use px, % and no unit 
if we know what we are doing with such a precision. I'm not on that level. :)

So,

1) The font-size on the html will be declared as 100%;
2) I will never apply the font-size on any container (other then html), and I 
will strictly use it on p, span, anchors labels, and other "close to text" 
elements (not sure how to call this group);

Felix as pointed out that rem would be better then em. He has not specified 
but, after some reading here and there, it seems that, the issue relies on the 
fact that, if we use em, we will have a so called "compounding effect" and the 
same will NOT occur with rem;

Also, I've been told that if I choose to use .em for margins and paddings, I 
may have issues if, for example, I wish to place, side by side, a p and a h1 by 
doing:

p, h1 {
 padding-left: 10em;
}

Since I will not get the same horizontal space as one could expected when doing 
this rule. (because h1 has a bigger font then p);

By looking on the layout I have in hands, I believe I would never have this 
scenario.

Is there any other pitfall that we should be aware of when adoption such a 
position ?

By taking this example here:
http://cssdesk.com/PBbWK

I have two questions:

1) Let's suppose I would drop the em for margin and padding, what values in % 
should I place there instead to preserv the same look and feel ?

2) I'm trying to stress test a little and see the so called compounding effect 
- but no luck so far. What am I missing? (yes I want to provoke it so that, if 
it arrives during the development I can deal with it.)



Thanks again,
mem
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] css measures - em grid system makes sense ?

[Philip TAYLOR]

Tim Arnold wrote:


While I generally agree with your statement Philip, I think that using
it as an absolute law for font sizing might be giving users more
credit for having any idea what their browser or system default font
size is or how to change it.  Isn't your argument really more saying
that browser and computer manufacturers know better than designers,
rather than that users know better?


No, but I understand your perspective.  In an ideal world, it would
be possible for a browser to "know" whether :

(a) a user had explicitly set a default font size
(because he or she didn't like the default that comes
with the browser/OS)

(b) was happy with the browser/OS default, and therefore
just left it as it came out of the box, or

(c) was desperately unhappy with the default, but had
no idea how to override it, and was therefore ecstatic
when he or she came upon a web site that set a default
that matched his or her preferences or expectations.

But this is far from an ideal world, and in real life
no-one other than the user him/herself could possibly
know which (if any) of those three obtain.

So we, as web designers, have to make a conscious choice :
should we assume that most users fall into categories (a)
and (b), or that they fall into category (c).

My suggestion (that a designer should /not/ specify a default
font size (other than 100% or 1em)) is based on my assumption
that most users fall into categories (a) and (b).  If I am
wrong, and most users fall into category (c), then setting
another default would conceivable make sense, except that
we still cannot know whether "the average user" finds his/her
browser/OS default font size too large or too small, and if
so, by what amount.

So, on balance, even in the case of the majority of users
falling into category (c), we can still do no better than
to not set a default font size at all, or to set at at 100%
or 1em.

The defence rests, m'lud.
Philip Taylor
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] css measures - em grid system makes sense ?

[Tim Arnold]

On Thu, Nov 10, 2011 at 9:07 AM, Philip TAYLOR  wrote:
>
>
> Paceaux wrote:
>
>> most of the time, I actually set html{font-size: 16px} so I can guarantee
>> the font size and a width of 960px.
>
> Why do you /want/ to guarantee the font size ?  Surely
> the user is the best judge of the size at which he or
> she likes to read things, and therefore you should respect
> that judgement rather than seeking to circumvent it.
>
> Philip Taylor
> __


While I generally agree with your statement Philip, I think that using
it as an absolute law for font sizing might be giving users more
credit for having any idea what their browser or system default font
size is or how to change it.  Isn't your argument really more saying
that browser and computer manufacturers know better than designers,
rather than that users know better?

That said, I'm a fan of body{font-size: 100%} and using em to size
things up from there.  Almost always up.

And that, that said, I am usually coding from someone else's design so
I often have no choice.  In a perfect world I'd be a better designer
than I am.

Best,
Tim


-- 

tim.arn...@gmail.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] css measures - em grid system makes sense ?

[Paceaux]

perhaps I misstated earlier. 

I set html{font-size:16px} so that all subsequent elements have the font-size 
1em. Doing so guarantees that a 60em width is also 960px. 

I don't over-ride a user's ability to zoom (ctrl + , ctrl -). This simply means 
that the widest base of users can read the text without zooming, and if they do 
zoom, the layout doesn't break. 

Though I can see your point that if a user has changed their default 
font-settings, they may be frustrated. Perhaps I'll take that into 
consideration and not include any absolute values for the font-size at the HTML 
element. 


Frank M Taylor 
http://frankmtaylor.com
@paceaux


On Nov 10, 2011, at 7:07 AM, Philip TAYLOR wrote:

> 
> 
> Paceaux wrote:
> 
>> most of the time, I actually set html{font-size: 16px} so I can guarantee 
>> the font size and a width of 960px.
> 
> Why do you /want/ to guarantee the font size ?  Surely
> the user is the best judge of the size at which he or
> she likes to read things, and therefore you should respect
> that judgement rather than seeking to circumvent it.
> 
> Philip Taylor

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] css measures - em grid system makes sense ?

[Philip TAYLOR]

Paceaux wrote:


most of the time, I actually set html{font-size: 16px} so I can guarantee the 
font size and a width of 960px.


Why do you /want/ to guarantee the font size ?  Surely
the user is the best judge of the size at which he or
she likes to read things, and therefore you should respect
that judgement rather than seeking to circumvent it.

Philip Taylor
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] css measures - em grid system makes sense ?

[Paceaux]

most of the time, I actually set html{font-size: 16px} so I can guarantee the 
font size and a width of 960px. 

I find that a 10px font is too small for me or most of my users to read. Every 
time I tried the 62.5% thing, I was still fine using em for layouts, but the 
content didn't have enough white space and was too hard to read. And when, of 
course, I sized-up the font size, well…. drinking ensued as I tried to get 
content to play in their containers. 




Frank M Taylor 
http://frankmtaylor.com
@paceaux


On Nov 9, 2011, at 10:42 PM, G.Sørtun wrote:

> On 10.11.2011 02:23, mem wrote:
> 
>> Ok. And why will I need one in px and another in em ? I'm not getting
>> what will that do, should that have the same measures like: 960px and
>> 60em ?
> 
> 60em may be somewhat equal to 960px under certain, very limited, conditions. 
> If you're happy with that there's no need to "mess with" both units, just 
> make up your mind whether it's 'em' or 'px' or some other unit you're gonna 
> rely on ... and test well.
> 
>> Great recall. I presume that body will have some sort of background
>> image so I cannot narrow it, and it should be as wide as the viewport
>> unfortunately.
> 
> If you say so. I often let 'html' alone do the "fill viewport" job, leaving 
> 'body' open for other jobs. How to use elements depends mainly on degree of 
> legacy browser support.
> 
>> So this means adding and extra container with no semantic propose
>> other then dealing with this ?
> 
> Probably not necessary to add any non-semantic elements as "style only" 
> hooks, _if_ you've got a good set/use of semantic elements in the layout. 
> You'll have to present it - with the semantics - if you want really qualified 
> and detailed advices on how to style it to your liking.
> 
> regards
>Georg
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] css measures - em grid system makes sense ?

[Michal Suchanek]

Hello,

On 9 November 2011 17:53, pace...@madebypaceaux.com
 wrote:
> I've recently been in the habit of using ems for my entire layout.  Really it 
> has been more of an experiment than anything,  but I've found (in my flawed 
> opinion)  that it can translate well to other screen sizes - including 
> mobile. I personally like the effect of the entire design resizing when a 
> user zooms (ctrl + resizes with ems).  The beercamp website (Google it)  uses 
> ems for very cool design tricks.
>
> However,  I got burned a few days ago when I got the bright idea to use ems 
> in fixed positioning.  It looked great,  right until my client hit ctrl +.  
> Then I had egg on my face.
>
> Ems in layout are a bad idea in cases where you want any fixed positioning. 
> I'd also say that you should avoid it for anything with images.

I don't think this is so black and white.

>
> Http://frankmtaylor.com is an example where I'd say I did it well.

Well, the page does scale. There is an odd twist to it, though. When
scaling some elements (and the contained writing) don't just scale up
or down. There is certain range in which the sizes jump at random.

>
> Http://portfolio.frankmtaylor.com is an example where I did it wrong.
>

This is a fixed layout which looks equally awesome in any size with
all its drawbacks.

Thanks

Michal
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] css measures - em grid system makes sense ?

[mem]

On Nov 10, 2011, at 5:42 , G.Sørtun wrote:


> 
> If you say so. I often let 'html' alone do the "fill viewport" job, leaving 
> 'body' open for other jobs. How to use elements depends mainly on degree of 
> legacy browser support.

I didn't know that html would also be a container somehow. I always thought 
that it was something behind the all thing. :) Guess not. Let's use html for 
that then and liberate the body. :)



> 
> 60em may be somewhat equal to 960px under certain, very limited, conditions. 
> If you're happy with that there's no need to "mess with" both units, just 
> make up your mind whether it's 'em' or 'px' or some other unit you're gonna 
> rely on ... and test well.

Almost there, so it could be a nice idea to use px and em for those cases (and 
they could be a lot) where, 960px don't correspond to 60em. 
Because, by doing both containers one in px and another in em, we guarantee (I 
still miss how) that even if the default user font is other then 16px the max 
width will apply ?

You have told earlier that:

"If those containers have 'width: 100%' declared they can be styled to interact 
in perfect harmony with min/max-width declared with different units."

Can you please elaborate a little bit more ?
What role will play width: 100% related with two different units, and two 
different containers. 

Please have a look here:

http://cssdesk.com/mmpL4

(you can contract the code declarations to the left for a better view);


ps - I've just found this cssdesk.com and I'm happy. :) 




__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] css measures - em grid system makes sense ?

[Philip TAYLOR]

Chris F.A. Johnson wrote:


On Wed, 9 Nov 2011, David Hucklesby wrote:



What "makes sense," I think, depends on your design goals. FWIW, these
days I size grid horizontal widths in percent; vertical spaces in EMs.


Why do you use any vertical space measure? That's asking for trouble.



What are "border-top", "border-bottom", "margin-top", "margin-bottom",
etc., if not "vertical space measures" ?

Philip Taylor
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] css measures - em grid system makes sense ?

[Chris F.A. Johnson]

On Wed, 9 Nov 2011, David Hucklesby wrote:


On 11/9/11 5:35 AM, mem wrote:

Hello all,

On my css layouts, I tend to use *em* for font size and *px* for all
the rest. However, I wish not to follow this path any longer, since
I wish to embrace the *em* for [almost] all the development.

Problem: we use a *960px grid* for styling most of our pages, so the
margin or paddings and widths are given on px, and if we convert
those, sometimes, we will get weird stuff like: 0.345 em.

Question: Will it make sense to create a grid based on *em* ?


[...]

What "makes sense," I think, depends on your design goals. FWIW, these
days I size grid horizontal widths in percent; vertical spaces in EMs.


   Why do you use any vertical space measure? That's asking for trouble.

--
   Chris F.A. Johnson, 
   Author:
   Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress)
   Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] css measures - em grid system makes sense ?

[G.Sørtun]

On 10.11.2011 02:23, mem wrote:


 Ok. And why will I need one in px and another in em ? I'm not getting
 what will that do, should that have the same measures like: 960px and
 60em ?


60em may be somewhat equal to 960px under certain, very limited, 
conditions. If you're happy with that there's no need to "mess with" 
both units, just make up your mind whether it's 'em' or 'px' or some 
other unit you're gonna rely on ... and test well.



 Great recall. I presume that body will have some sort of background
 image so I cannot narrow it, and it should be as wide as the viewport
 unfortunately.


If you say so. I often let 'html' alone do the "fill viewport" job, 
leaving 'body' open for other jobs. How to use elements depends mainly 
on degree of legacy browser support.



 So this means adding and extra container with no semantic propose
 other then dealing with this ?


Probably not necessary to add any non-semantic elements as "style only" 
hooks, _if_ you've got a good set/use of semantic elements in the 
layout. You'll have to present it - with the semantics - if you want 
really qualified and detailed advices on how to style it to your liking.


regards
Georg
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] css measures - em grid system makes sense ?

[mem]

On Nov 9, 2011, at 22:48 , G.Sørtun wrote:

> On 09.11.2011 22:24, mem wrote:
> 
>> it will assume the max-width value as width correct ?
> 
> Yes, but I advice against relying on default behavior across browser-land - 
> especially for legacy browsers - when adding 'width: 100%' (or something) 
> costs so little.

I understand and will take it as a golden rule. Better to explicit declare that 
to expect that the browser will do that accordingly. We have suffered enough 
with IE and old FF for not learning with mistakes. :)


> 
>> If so, how can I declare those base 60em as stated on a) ?
> 
> If the layout permits you can declare 'max-width: __px' on one container and 
> 'max-width: __em' on another.

Ok. And why will I need one in px and another in em ? I'm not getting what will 
that do, should that have the same measures like: 960px and 60em ?


> Remember also that 'body' is just another container in standard-based web 
> design, so the number of containers in a layout can be kept relatively small 
> without loosing styling-flexibility.

Great recall. I presume that body will have some sort of background image so I 
cannot narrow it, and it should be as wide as the viewport unfortunately. 


> If those containers have 'width: 100%' declared they can be styled to 
> interact in perfect harmony with min/max-width declared with different units.

So this means adding and extra container with no semantic propose other then 
dealing with this ?
I normally tend to avoid extra markup.

> 
> regards
>Georg
> 

Thanks for your patience. I'm trying to understand how will rules behave here, 
but I'm getting a little lost… 


Thanks again,
mem
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] css measures - em grid system makes sense ?

[G.Sørtun]

On 09.11.2011 22:24, mem wrote:


 it will assume the max-width value as width correct ?


Yes, but I advice against relying on default behavior across browser-land - 
especially for legacy browsers - when adding 'width: 100%' (or something) costs 
so little.


 If so, how can I declare those base 60em as stated on a) ?


If the layout permits you can declare 'max-width: __px' on one container 
and 'max-width: __em' on another. If those containers have 'width: 100%' 
declared they can be styled to interact in perfect harmony with 
min/max-width declared with different units. Remember also that 'body' 
is just another container in standard-based web design, so the number of 
containers in a layout can be kept relatively small without loosing 
styling-flexibility.


regards
Georg


__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] css measures - em grid system makes sense ?

[Paceaux]

The font is "arvo". I'm cheap, I pulled it off of Google's Font CDN:. 
http://www.google.com/webfonts

I don't think an em-based layout can work in all situations. In the case of my 
online resume, I'm not doing anything elaborate: no graphics, no fancy design. 

I'm absolutely horrible at math,  so ems give me small, manageable numbers that 
help me with grids. It's all preference, but I have an 8th-grade education when 
it comes to math, so small numbers and easy math helps: 

1. If I set body{font-size: 16px}, then I can set body{width: 60em} to 
accomplish
2. Devoid of gutters, that means  each of five columns is 12em.
3. I start by assuming a gutter is 16px, or….. 1em.
4. Four gutters are in-between columns, and I split the fifth between the first 
and last column: 60 em - 5 em = 55em.
5. Awesome. 55 / 5 = 11em width: .column{width: 11em}
6. I distribute half of the gutter to each margin:  .column{margin-left: .5em; 
margin-right: .5em}
7.  My result is 4 em between the five columns, and the first and last column 
adding up to the fifth. 

A. If I want ten columns, then I cut the column width in half. I don't think 
about gutters
B. If I want wider gutters, I subtract an em from the width, and split it 
across margins
C. If I want 6 columns, it's ((60-6)/6). each column is 9 em (54 em in total). 
I assign the 6 leftover em to each column, splitting by margin. 


The added bonus I get is that the em is a typographical setting. So margins and 
paddings set to the value of ems have the benefit of scaling with the size of 
the font. So larger fonts have proportionately more breathing room than smaller 
fonts. 

Another bonus is my ability to use the golden ratio (1.618):
 header{font-size: 1em}, 
header hgroup {font-size: 1.618em}
header hgroup h1 {font-size: 1.618em}


On Nov 9, 2011, at 12:27 PM, Barney Carroll wrote:

> @Frank
> Really like your EM-based site — what font is that? The thing I made was 
> ultimately just way too elaborate: too many 'static' graphic design 
> considerations for EMs to play nice. In practice it worked (and only recently 
> got redesigned ;) but maintenance became an utter pain.
> 
> @David H
> Your notion of using % for horizontal measurements and EM for height sounds 
> very healthy to me. What with text playing a large part of how tall things 
> are, the notion of using font-size as a relative measurement in that context 
> makes a lot of sense.
> 
> @mem
> I think what David L says about max-widths is absolutely on the money. 
> Personally I'm a big fan of the 320andUp framework philosophy, whereby you 
> cater for an environment where available width and CSS support may be limited 
> (no extensive side-by-side layouts; no floats), and then deal with larger 
> viewport real-estate via selective media queries.
> 
> As far as padding, margins and other 'secondary' measurements, I think EMs 
> makes sense (when reading on my phone I like text to be at least half an EM 
> away from the screen edge)… An important rule to bear in mind on this front 
> is to apply padding and margin to elements without set widths. This is 
> something I learned the hard way via OOCSS' fractional grids.css — I set the 
> width or max width on a wrapper, and put the other dimensions on width:auto 
> children. Without this precept, things tend to break or at least become very 
> tenuous very fast.
> 
> My design priorities tend to dictate that heights should rarely be set, 
> simply because life becomes infinitely easier once one dimension is left free 
> to accommodate the overflows of the others (font-size, images scaling to 
> width, variable contents…).
> 
> Once again I'd really recommend Ethan Marcotte's writings on the matter on 
> alistapart.com. Responsive Web Design and the earlier Fluid Grids articles 
> show a huge experience and massive insight on these matters.
> 
> 
> Regards,
> 
> Barney Carroll
> (+44) 742 9177 278
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] css measures - em grid system makes sense ?

[mem]

On Nov 9, 2011, at 19:50 , G.Sørtun wrote:

> On 09.11.2011 19:51, mem wrote:
> 
>> Question A) What unit should we use ? I've seen on some sites the
>> option for "max-width: 100%" I've seen max-width defined with: em;
>> I've seen it with px;
> 
> To make a flexible layout play well across the increasing spread of large and 
> small screens/devices, I often start out with the following "mix" for main 
> container...
> 
>"width: 99%; min-width: 560px; max-width: 76em;"
> 
> ...which makes reasonably good use of available window-width without becoming 
> too wide or too narrow. Modifying these values along with other layout 
> details at both "ends" and at certain intermediate window-widths for capable 
> browsers in a small number of mediaqueries, for improved results.
> 

Sorry for not saying this earlier. I'm not taking into consideration handled 
devices nor netbooks and mobiles. 
Only pc and laptop monitors. 
I understand that this *only* is... weird. Anyway.

a) The layout is planned for a given minimal resolution (1024), centered.
b) If the user has a very wide screen and very hight resolution the layout 
should not stretch to much. 
c) If the user has a low resolution and a 14'' monitor the layout should not 
present and absurd horizontal scroll.
d) The layout should keep (the best we can) their proportions.



For d) we will use em or % or a mix. Ok.

For c) we can make use of min-width so that it shrinks to (750px) but not more 
than that.

For b) we would have to make use of max-width - so that, even if the user as 
very large screen the layout will not stretch to much to the sides.

*For a) I don't see what can we do.*


I mean if we have something like:

#container {
 margin: 0 auto;
 max-width: 1260px;
 min-width: 780px;
}

it will assume the max-width value as width correct ? 

If so, how can I declare those base 60em as stated on a) ?


Please… be patient. :)


Note:
Sorry about the test case not being here, I can do that but with a considerable 
amount of time, since I'm working locally with no proper ftp connection or 
shared host service to upload; I know that we all have some web services 
solutions quite handy for testing .css, js and html mix, but, unfortunately, 
those don't allow us to text page zoom that is a major concern here. I will 
configure that, and see if I use it more often in the future. 
I still however have, some theoretical questions do clear. :)



> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] css measures - em grid system makes sense ?

[G.Sørtun]

On 09.11.2011 19:51, mem wrote:


 Question A) What unit should we use ? I've seen on some sites the
 option for "max-width: 100%" I've seen max-width defined with: em;
 I've seen it with px;


To make a flexible layout play well across the increasing spread of 
large and small screens/devices, I often start out with the following 
"mix" for main container...


"width: 99%; min-width: 560px; max-width: 76em;"

...which makes reasonably good use of available window-width without 
becoming too wide or too narrow. Modifying these values along with other 
layout details at both "ends" and at certain intermediate window-widths 
for capable browsers in a small number of mediaqueries, for improved 
results.



 Question B) If we do so on the container wouldn't we end up with some
 overlapping things on a certain zoom in scale ? If so, how would we
 avoid it ? - Will we avoid it by dropping this idea of making margins
 and paddings with EM and use % instead ?


Zooming should not cause overlapping - unless one plays too much with 
absolute positioning and other techniques with similar effects in a layout.

I prefer side-margins in % for optimal use of available window-width though.

regards
Georg

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] css measures - em grid system makes sense ?

[David Laakso]

On 11/9/11 2:18 PM, David Laakso wrote:

On 11/9/11 1:51 PM, mem wrote:

Question A)


Question B)

Regards,
M.





I dunno what you or anyone else should do about anything other than 
that saving one and all from a novel by putting up a very simple test 
page is always a good start point...


~d





--
Desktop. Laptop. Tablet. Mobile!
http://chelseacreekstudio.com/

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] css measures - em grid system makes sense ?

[Barney Carroll]

@Frank
Really like your EM-based site — what font is that? The thing I made was 
ultimately just way too elaborate: too many 'static' graphic design 
considerations for EMs to play nice. In practice it worked (and only recently 
got redesigned ;) but maintenance became an utter pain.

@David H
Your notion of using % for horizontal measurements and EM for height sounds 
very healthy to me. What with text playing a large part of how tall things are, 
the notion of using font-size as a relative measurement in that context makes a 
lot of sense.

@mem
I think what David L says about max-widths is absolutely on the money. 
Personally I'm a big fan of the 320andUp framework philosophy, whereby you 
cater for an environment where available width and CSS support may be limited 
(no extensive side-by-side layouts; no floats), and then deal with larger 
viewport real-estate via selective media queries.

As far as padding, margins and other 'secondary' measurements, I think EMs 
makes sense (when reading on my phone I like text to be at least half an EM 
away from the screen edge)… An important rule to bear in mind on this front is 
to apply padding and margin to elements without set widths. This is something I 
learned the hard way via OOCSS' fractional grids.css — I set the width or max 
width on a wrapper, and put the other dimensions on width:auto children. 
Without this precept, things tend to break or at least become very tenuous very 
fast.

My design priorities tend to dictate that heights should rarely be set, simply 
because life becomes infinitely easier once one dimension is left free to 
accommodate the overflows of the others (font-size, images scaling to width, 
variable contents…).

Once again I'd really recommend Ethan Marcotte's writings on the matter on 
alistapart.com. Responsive Web Design and the earlier Fluid Grids articles show 
a huge experience and massive insight on these matters.


Regards,

Barney Carroll
(+44) 742 9177 278
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] css measures - em grid system makes sense ?

[mem]

On Nov 9, 2011, at 16:59 , David Laakso wrote:

> On 11/9/11 8:35 AM, mem wrote:
>> 
>> 
>> 
>> What do you think ?
>> 
> 
> 
> It makes no difference whether the grid is set to px, em, or percent width. 
> The problem still remain the same-- if and when a user scales up the fonts 
> she will be confronted with a situation of having to scroll both vertically 
> and horizontally  to read the page.

> The use of min-width, max-width, width can be used and adjusted to suit the 
> particular layout at hand and alleviate this issue. Just how that is done and 
> whether they are set in px, em, or percent -- or some combination thereof -- 
> is the real problem.

I hate when I don't even know what is my issue, and then, someone else points 
it out for me. :)
Indeed that is the main issue around the original question. :)


1)
I'm prepared for place the margins, paddings and even images on *em* ;

2)
Since rem is not supported on recently old browsers like ie7 and ie8 I prefer 
not to use it and deal with the so called "compounding" issues that may arrive. 
I still thanks Felix for the important note about the fact that pixels are 
still not as "friendly" as we think they are.

3)
With Barney I'm not prepared for having a gigantic horizontal scroll that is 
neither designer nor user friendly at all.
In this case, should we consider the use as max-width ?


By taking into consideration point 1) (that I will choose em for padding and 
margins), and assuming 3) max-width could prevent the gigantic horizontal 
scroll bar traveling by the user, two questions rises:


Question A)
What unit should we use ? 
I've seen on some sites the option for "max-width: 100%" 
I've seen max-width defined with: em;
I've seen it with px;


Question B)
If we do so on the container wouldn't we end up with some overlapping things on 
a certain zoom in scale ? 
If so, how would we avoid it ?
 - Will we avoid it by dropping this idea of making margins and paddings with 
EM and use % instead ?
(whispering to myself: please say no, please say no… Agains't David 
Hucklesby, I'm not that used to think with % - unfortunately for me.);



K. Regards,
M.



> 
> 
> Best,
> ~d
> PS Been a long time. Nice to see you onthe list…

Thanks. The honor is totally mine, to count on this list expertise. 
Indeed I've been off of css for several months, let's see if I can stay for 
good this time. :)
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] css measures - em grid system makes sense ?

[David Hucklesby]

On 11/9/11 5:35 AM, mem wrote:

Hello all,

On my css layouts, I tend to use *em* for font size and *px* for all
the rest. However, I wish not to follow this path any longer, since
I wish to embrace the *em* for [almost] all the development.

Problem: we use a *960px grid* for styling most of our pages, so the
margin or paddings and widths are given on px, and if we convert
those, sometimes, we will get weird stuff like: 0.345 em.

Question: Will it make sense to create a grid based on *em* ?


[...]

What "makes sense," I think, depends on your design goals. FWIW, these
days I size grid horizontal widths in percent; vertical spaces in EMs.
To keep line measure within bounds, min- and max-width for sections are
set in EM.

My preference for percent widths is simply because I think in terms of
proportion - I have a hard time thinking in terms of EMs or PX. :\

YMMV of course.
--
Cordially,
David

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] css measures - em grid system makes sense ?

[David Laakso]

On 11/9/11 8:35 AM, mem wrote:




What do you think ?




It makes no difference whether the grid is set to px, em, or percent 
width. The problem still remain the same-- if and when a user scales up 
the fonts she will be confronted with a situation of having to scroll 
both vertically and horizontally  to read the page.
The use of min-width, max-width, width can be used and adjusted to suit 
the particular layout at hand and alleviate this issue. Just how that is 
done and whether they are set in px, em, or percent -- or some 
combination thereof -- is the real problem.




K. Regards,
mem



Best,
~d
PS Been a long time. Nice to see you onthe list...

--
Desktop. Laptop. Tablet. Mobile!
http://chelseacreekstudio.com/

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] css measures - em grid system makes sense ?

[pace...@madebypaceaux.com]

I've recently been in the habit of using ems for my entire layout.  Really it 
has been more of an experiment than anything,  but I've found (in my flawed 
opinion)  that it can translate well to other screen sizes - including mobile. 
I personally like the effect of the entire design resizing when a user zooms 
(ctrl + resizes with ems).  The beercamp website (Google it)  uses ems for very 
cool design tricks.  

However,  I got burned a few days ago when I got the bright idea to use ems in 
fixed positioning.  It looked great,  right until my client hit ctrl +.  Then I 
had egg on my face. 

Ems in layout are a bad idea in cases where you want any fixed positioning. I'd 
also say that you should avoid it for anything with images.  

Http://frankmtaylor.com is an example where I'd say I did it well.  

Http://portfolio.frankmtaylor.com is an example where I did it wrong.  

Sent from my HTC on the Now Network from Sprint!

- Reply message -
From: "Barney Carroll" 
Date: Wed, Nov 9, 2011 9:32 am
Subject: [css-d] css measures - em grid system makes sense ?
To: "Felix Miata" 
Cc: 


Felix,

Could you show me some sites using em-based layout measurements? My
adventure in that field was about 5 years ago, I may be able to learn
some things from it. By and wide I stick to the principle that, for
example, a user or device's desired font size should not dictate the
width of a page.

rem (relative em) measurement is a fantastic concept — it removes the
problem of cascading multiples of multiples (the x4-sized header) —
but be warned it is not widely supported and a bulletproof fallback
strategy would necessarily involve re-specifying everything in ems
anyway.


Regards,
Barney Carroll

barney.carr...@gmail.com
+44 7429 177278

barneycarroll.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] css measures - em grid system makes sense ?

[Barney Carroll]

Felix,

Could you show me some sites using em-based layout measurements? My
adventure in that field was about 5 years ago, I may be able to learn
some things from it. By and wide I stick to the principle that, for
example, a user or device's desired font size should not dictate the
width of a page.

rem (relative em) measurement is a fantastic concept — it removes the
problem of cascading multiples of multiples (the x4-sized header) —
but be warned it is not widely supported and a bulletproof fallback
strategy would necessarily involve re-specifying everything in ems
anyway.


Regards,
Barney Carroll

barney.carr...@gmail.com
+44 7429 177278

barneycarroll.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] css measures - em grid system makes sense ?

[Felix Miata]

On 2011/11/09 15:18 (GMT) Barney Carroll composed:


font-size is a little arbitrary: all measurable aspects of the glyphs
'M' or 'm' (or indeed any other glyph) set in Arial are smaller than
12px; with Calibri they are smaller still.


Fonts sized in px are _completely_ arbitrary once the design escapes the 
designer's environment. Fonts so sized disregard the optimal size as 
established by the default size set in the viewer's UA.


Anything as small as 12px on any of my systems is illegible, but you are 
right that Vista-generation M$ fonts typically render smaller than 
traditional/common web fonts.



Practically speaking:



I don't see a convincing argument for having layout elements infer
their size based on font-size. I tried this once, and ended up with
30em as a total width that worked well on desktop with my base
font-size of 12-pixels — but for those people who need higher
resolution base heights, this is a disaster: the layout requires
massive panning left and right to be able to make sense of it
(especially on the phone, which has pretty limited screen size).
Better keep the font-size based on the em, but keep the layout
measurements fixed or fluid based on fractions of the viewport (%).



If you're not interested in any of these aspects, use pixels: they're
precise, unambiguous, and suffer none of the headaches of the cascade.


On the contrary, px are completely ambiguous as soon as the viewer is not the 
designer looking at his own work on his own system.


To start with, there are two kinds of px, device px, and CSS px, the 
relationship between which is unpredictable. Device px vary wildly, from 
under 40 ppi to more than 300.


The relationship between px and legibility/usability is also unpredictable, 
since even when assuming CSS px the relationship between legibility/usability 
still unconditionally disregards whatever size the visitor's browser defaults 
to, the presumptively optimal size for the majority of any page's text in 
that viewing environment.


When you size with em, or better yet rem, you're able to maintain the design 
relationships among elements while embracing physical sizes based on what's 
optimal in the viewing environment, respecting user settings instead of 
entirely disregarding them.

--
"The wise are known for their understanding, and pleasant
words are persuasive." Proverbs 16:21 (New Living Translation)

 Team OS/2 ** Reg. Linux User #211409 ** a11y rocks!

Felix Miata  ***  http://fm.no-ip.com/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] css measures - em grid system makes sense ?

[Barney Carroll]

Obligatory history lesson:

'em' is a classical typographical term to talk about relative
measurements within a typeface: it's the phoneticisation of the letter
'm', and denotes the total width of the 'm' glyph. 'en' is used for
'n'; other useful relative measurements include 'x-height' to denote
the upper edge of 'straight' lowercase letters relative to the
baseline.

In digital typography, it's a lot more vague. For one, it is no longer
intended for internal measurements of the typeface, rather the
relative font-size — and whether set in pixels, picas, or whatever,
font-size is a little arbitrary: all measurable aspects of the glyphs
'M' or 'm' (or indeed any other glyph) set in Arial are smaller than
12px; with Calibri they are smaller still.

The purpose of em-based sizing on the web is to provide a relative
font-size: h1 {font-size: 2em} will make top-level headings twice as
big as the default font-size. An irritating aspect is that the default
font-size I mentioned is subject to other ems. If that h1 is inside a
div with font-size: 2em, it will end up four times larger than the
base.

This is useful because certain screens have higher pixel densities
(12px-sized fonts are fine on my 96ppi desktop but illegible on my
326ppi phone), and some people, particularly those with bad sight, may
prefer different resolutions for type.


Practically speaking:

I don't see a convincing argument for having layout elements infer
their size based on font-size. I tried this once, and ended up with
30em as a total width that worked well on desktop with my base
font-size of 12-pixels — but for those people who need higher
resolution base heights, this is a disaster: the layout requires
massive panning left and right to be able to make sense of it
(especially on the phone, which has pretty limited screen size).
Better keep the font-size based on the em, but keep the layout
measurements fixed or fluid based on fractions of the viewport (%).

If you're not interested in any of these aspects, use pixels: they're
precise, unambiguous, and suffer none of the headaches of the cascade.


Regards,
Barney Carroll

barney.carr...@gmail.com
+44 7429 177278

barneycarroll.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] css measures - em grid system makes sense ?

[Ted Rolle Jr.]

I've used mm because it's neither geeky nor is it jargon and you can use a
tape measure to measure it.

For typefaces you'd probably have to try different values to make it look
nice, but we do that with px and/or em.

px:  computers, geeky;
em: printers,  jargon.

You can have fractions of a mm down to a px or em, too.

Ted

On Wed, Nov 9, 2011 at 08:35, mem  wrote:

> Hello all,
>
> On my css layouts, I tend to use *em* for font size and *px* for all the
> rest.
> However, I wish not to follow this path any longer, since I wish to
> embrace the *em* for [almost] all the development.
>
> Problem: we use a *960px grid* for styling most of our pages, so the
> margin or paddings and widths are given on px, and if we convert those,
> sometimes, we will get weird stuff like: 0.345 em.
>
> Question: Will it make sense to create a grid based on *em* ?
>
> The point is to allow us to start drawing more user friendly measures like
> .5em or .4em and avoid .453 em stuff.
>
> What do you think ?
>
> Note: This is just a question, if it does make sense to you, just tell me
> and explain me why so that I could understand and I can leave with that.
>
>
> K. Regards,
> mem
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] css measures - em grid system makes sense ?

[mem]

Hello all,

On my css layouts, I tend to use *em* for font size and *px* for all the rest. 
However, I wish not to follow this path any longer, since I wish to embrace the 
*em* for [almost] all the development.

Problem: we use a *960px grid* for styling most of our pages, so the margin or 
paddings and widths are given on px, and if we convert those, sometimes, we 
will get weird stuff like: 0.345 em. 

Question: Will it make sense to create a grid based on *em* ? 

The point is to allow us to start drawing more user friendly measures like .5em 
or .4em and avoid .453 em stuff.

What do you think ? 

Note: This is just a question, if it does make sense to you, just tell me and 
explain me why so that I could understand and I can leave with that. 


K. Regards, 
mem
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/