Setting up a vertical rhythm for typography with compass #954

Closed
wants to merge 18 commits into from

3 participants

@chrisnicola

This uses the compass vertical rhythm mixin to setup the typography
settings in addition to modular scale. The fonts and line-heights are
set in pixels to make this work sensibly. When Compass changes to
support rems with a pixel fall back that can be used instead.

I've also added class based font sizes so that font sizes can be used
regardless of header level. It isn't all that common that H1 is always
the same size in all contexts and with the new HTML5 sematics it will be
pretty common for most headings in a hierarchy of content to be H1's.

Chris Nicola Setting up a vertical rhythm for typography with compass
This uses the compass vertical rhythm mixin to setup the typography
settings in addition to modular scale. The fonts and line-heights are
set in pixels to make this work sensibly. When Compass changes to
support rems with a pixel fall back that can be used instead.

I've also added class based font sizes so that font sizes can be used
regardless of header level. It isn't all that common that H1 is always
the same size in all contexts and with the new HTML5 sematics it will be
pretty common for most headings in a hierarchy of content to be H1's.
19a49cd
@chrisnicola

This addresses issue #947. This is a hastily thrown together change so please let me know what you think. I'm not that familiar with all of Foundation yet so I'm not sure what impact it might have. It looks ok on the typography page though.

I did change the important number to 40px as otherwise the line-height of h1 tags is excessive (66px for a 44px font whereas 40px fits nicely in a 44px line height). Overall I think it looks decent.

Chris Nicola added some commits Sep 29, 2012
Chris Nicola Adjust a few more margins to complete the vertical ryhthm
Also loosen the rules to allow half lines for the line-heights of larger
fonts. This means the line-heights increase from 22px, 33px, 44px, 55px
instead of 22px, 44px, 66px. This is almost undetectable visually but
avoids large gaps between lines for certain header sizes.
392cf80
Chris Nicola Vertical rhythm for ui components c1d1fd2
Chris Nicola Adjust horizontal rule VR to compenstate for 1px border 843ac73
@chrisnicola

Don't pull this just yet, I'm still working on forms and other elements. Need a few more days and need to look at each item.

In the end it isn't going to be perfect, that appears to be somewhat impossible, but rather a reasonable set of defaults. It's possible we may want to make this an option or module that can be imported if people want a vertical rhythm default.

The main idea is that much like having a horizontal grid, we are setting up a vertical grid based around the baseline (or an even division of the baseline like 1/2) so that things in parallel line up and also so that text lines have a smooth even rhythm (which helps with readability). I've set the default grid beat to 11px with the baseline at 22px for a base font of 14px.

Chris Nicola added some commits Oct 5, 2012
Chris Nicola Setup VR for form elements adjust buttons slightly
I won't be setting a VR for buttons because the sizes don't quite work
right. It will be up to users to decide how they want their button to
fit in the vertical grid by setting margins as needed.
bf94ae2
Chris Nicola Set $topBarHeight to $baseLineHeight * 2 c8ed0ce
Chris Nicola Fix line-height setting on all elements b61cae0
Chris Nicola Adds class to add some body padding when using a fixed topbar b0ce381
Chris Nicola Adjust navigation elements for vertical rhythm 2efd403
Chris Nicola Vertical rhythm setup for tabs e7ac63f
Chris Nicola Tweaking typography to absolute pixel perfection afe4566
@chrisnicola

This is almost finished. @zurbchris I'd love some feedback from you guys. If you want to see exactly how the effect works uncomment line: 8 in _typography.scss and it will draw a vertical grid at 22px for you and you can see how the paragraphs continue to stay in rhythm no matter what.

I could still tweak the buttons and forms a bit more, but they are obviously a bit harder and it is ok for some elements to come out of rhythm from time to time as long as things get back in step afterwards.

Chris Nicola added some commits Oct 5, 2012
Chris Nicola Adjust grid typography and adjust grid demo for borders
The block-grid has been given consistent top and bottom padding to keep
it in rhythm. I'm not sure if this breaks a desired effect with the
smaller padding sizes as blocks became smaller.
065740d
Chris Nicola Fixes prefix and postfix style buttons. a606c1d
Chris Nicola Fixing up VR for form elements specifically fieldsets and custom
Noticed a problem with a <br/> under the custom checkbox area in the
demo. It is overlapping the previous row causing it to report height
incorrectly. A div with a space in it works though.
090ef20
Chris Nicola Comment out vertical rhythm debugging lines a1af76c
Chris Nicola Fix margin on progress bar so it doesn't throw of rhythm f3c84a3
@hatefulcrawdad

I'm excited to look at this soon, been busy working on 3.2. I haven't forgotten about it.

@chrisnicola chrisnicola Merge tag 'v3.2.2' into vertical-rhythm
Version 3.2.2

Conflicts:
	scss/foundation/_settings.scss
	scss/foundation/common/_forms.scss
	scss/foundation/common/_typography.scss
	scss/foundation/components/_grid.scss
	scss/foundation/components/modules/_tabs.scss
	scss/foundation/components/modules/_topbar.scss
	scss/foundation/components/modules/_ui.scss
	test/forms.html
9af23de
@chrisnicola

@zurbchris I've merged in the 3.2.2 changes to make integrating this a bit easier.

@hatefulcrawdad

Awesome. We're looking to add this in 4.0!

@mhayes mhayes closed this Feb 28, 2013
@chrisnicola

@mhayes you guys change your mind about this for 4.0 or would you like me to submit another PR rebased onto 4.0?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment