menu

SpecFM

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

Channels
# All channels
view-forward
# General
view-forward
# Assemble
view-forward
# Design
view-forward
# Design Details
view-forward
# Design Systems
view-forward
# Developer Tea
view-forward
# Does Not Compute
view-forward
# Fragmented
view-forward
# Framework
view-forward
# Immutable
view-forward
# inspect
view-forward
# Jobs
view-forward
# Layout
view-forward
# Music
view-forward
# Orthogonal
view-forward
# Programming
view-forward
# Reactpodcast
view-forward
# Research
view-forward
# Runtime
view-forward
# show-n-tell
view-forward
# Specifics
view-forward
# Swift Unwrapped
view-forward
# Toolsday
view-forward
# Typography
view-forward
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
  • reply
  • like
e.g. this here internet website was built on an 8px grid, but our main font size is 14
  • reply
  • like
the trick is getting line-height/font-size to pair up to hit a baseline grid (ours is a 4pt baseline)
  • reply
  • like
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.
  • reply
  • like
Our current font sizes as defined in our styled-component variables: 32, 24, 18, 16, 14, 12, 10
  • reply
  • like
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
  • reply
  • like
thanks this is reassuring
  • reply
  • like
sometimes i get so focused on 8pt i get nervous if anythign breaks the rule a little bit
  • reply
  • like
so your line heights are always 8, 16, 24, 32?
  • reply
  • like
or for mobiel you do 4pt so its 4, 8, 16, 20, 24, 28, 32
  • reply
  • like
Bryn wrote a great article about it https://spec.fm/specifics/8-pt-grid
like-fill
6
  • reply
  • like
yes!!!
  • reply
  • like

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
  • reply
  • like
all of my line-heights are multiples of 4
  • reply
  • like

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.
  • reply
  • like
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)
  • reply
  • like
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.
  • reply
  • like
My friend Elliot wrote about this today for Pivotal: https://builttoadapt.io/8-point-grid-borders-and-layouts-e91eb97f5091
like-fill
4
  • reply
  • like
specifically handling borders, etc.
  • reply
  • like
convenient
  • reply
  • like
thanks for sharing @bryn
  • reply
  • like
Great post
  • reply
  • like

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?
  • reply
  • like
Moving from px to rems for accessibility reasons. Haven't finished yet.
  • reply
  • like

May 30, 2017 at 11:12am
👌
  • reply
  • like
Show more messages