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/
