New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Setting up a vertical rhythm for typography with compass #954

Closed
wants to merge 18 commits into
base: master
from

Conversation

Projects
None yet
3 participants
@chrisnicola

chrisnicola commented Sep 27, 2012

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.
@chrisnicola

This comment has been minimized.

Show comment
Hide comment
@chrisnicola

chrisnicola Sep 27, 2012

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.

chrisnicola commented Sep 27, 2012

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.
@chrisnicola

This comment has been minimized.

Show comment
Hide comment
@chrisnicola

chrisnicola Oct 2, 2012

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.

chrisnicola commented Oct 2, 2012

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.

@chrisnicola

This comment has been minimized.

Show comment
Hide comment
@chrisnicola

chrisnicola Oct 5, 2012

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.

chrisnicola commented Oct 5, 2012

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.
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.

@ghost ghost assigned hatefulcrawdad Oct 11, 2012

@hatefulcrawdad

This comment has been minimized.

Show comment
Hide comment
@hatefulcrawdad

hatefulcrawdad Oct 25, 2012

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

hatefulcrawdad commented Oct 25, 2012

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

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
@chrisnicola

This comment has been minimized.

Show comment
Hide comment
@chrisnicola

chrisnicola Dec 1, 2012

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

chrisnicola commented Dec 1, 2012

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

@hatefulcrawdad

This comment has been minimized.

Show comment
Hide comment
@hatefulcrawdad

hatefulcrawdad Dec 5, 2012

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

hatefulcrawdad commented Dec 5, 2012

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

@mhayes mhayes closed this Feb 28, 2013

@chrisnicola

This comment has been minimized.

Show comment
Hide comment
@chrisnicola

chrisnicola Feb 28, 2013

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

chrisnicola commented Feb 28, 2013

@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