menu
announcement

Spectrum is now read-only. Learn more about the decision in our official announcement.

SpecFM

A network of designers and developers making the best podcasts, blogs, and resources for designers and developers.

Channels
Team

8pt Grid -- when do you break it?

March 29, 2017 at 8:16pm

8pt Grid -- when do you break it?

March 29, 2017 at 8:16pm
Does anyone else have troubles where they are trying really hard to perfectly follow 8pt system but then sometimes the line-height or padding just doesn't fit quite right? I find this is especially the case on mobile. Like i almost always end up having a 12px font option.
What about everyone else? when do you break your 8pt system?

March 29, 2017 at 8:20pm
font-sizes should definitely not be multiples of 8!
like-fill
8
e.g. this here internet website was built on an 8px grid, but our main font size is 14
the trick is getting line-height/font-size to pair up to hit a baseline grid (ours is a 4pt baseline)
also, certain bodies *have* to be flexible in width or height, so make the padding/margin align to 8pt and let that thing flex how it wants to.
Our current font sizes as defined in our styled-component variables: 32, 24, 18, 16, 14, 12, 10
18/14/10 are all "off-grid", except they're paired with appropriate line-heights (that change contextually) to push them onto the grid
like-fill
27
thanks this is reassuring
sometimes i get so focused on 8pt i get nervous if anythign breaks the rule a little bit
so your line heights are always 8, 16, 24, 32?
or for mobiel you do 4pt so its 4, 8, 16, 20, 24, 28, 32
Bryn wrote a great article about it https://spec.fm/specifics/8-pt-grid
like-fill
6

April 3, 2017 at 7:37pm
One of the best books I've read about typographic compositions: https://www.amazon.com/Grid-Systems-Graphic-Design-Communication/dp/3721201450
like-fill
1
all of my line-heights are multiples of 4

April 4, 2017 at 9:21am
So I have run into a few areas where I break it lately. The main one being when you need to align a 1 px line with the center of an icon, or rectangle etc. You basically need to have an element with an odd number to avoid frustration. This can sometimes have some knock on spacing effects.
Also, when pixel aligning text odd numbers are sometimes easier. (Talking specifically about native mac stuff across multiple screen densities. I have to have 13pt text instead of 14pt in some implementations to avoid half pixel weirdness)
I simply use a 4pt grid. And I do my best to not fret over pixel perfection. It's not realistic for it to always work. My work goes across platforms, and different browsers. Lots of different factors can influence how the UI will look.
My friend Elliot wrote about this today for Pivotal: https://builttoadapt.io/8-point-grid-borders-and-layouts-e91eb97f5091
like-fill
4
specifically handling borders, etc.
thanks for sharing @bryn
Great post

May 29, 2017 at 11:23am
@bryn i'm curious regarding the line-height, and it seems that you're defining the line-height in spectrum with 20px in one place, and 1.2 in another . Is there a reason why you use both ways of defining the line-height?
Moving from px to rems for accessibility reasons. Haven't finished yet.

May 30, 2017 at 11:12am
Show more messages