#Design #Techniques
Logic-driven UI design tips · Taking the guesswork out of UI design https://ilo.im/164v48
_____
#Layout #Spacing #Icons #Buttons #Typography #Accessibility #Consistency #ProductDesign #UiDesign #WebDesign
So many icons, so little spa...
Thanks @Svenlaa for the picture
all the glyphs have widths that are multiples of a stripe, and as you can see (up toot) there are 6 extra stripes required in the 2nd row to fill the gap. I designed in the font for U+200A HAIR SPACE, U+2009 THIN SPACE, U+2008 PUNCTUATION SPACE to be 1-,2-,3-stripes wide. They can be used to center the text. With a U+2008 on each side (1st image).
For social media posts, it's a bit tight, and needs a bit of extra padding. So i add another U+200A either side.
So for my new Rainbow Rocket font, @iorsh asks a question that i was intending to address, which is basically, how come the words in "AUTUMN LEAVES" are centered? Why, in fact, doesn't it look like the picture on the right?
The answer is thinner Unicode spaces. It's why i published a blog on spaces: https://home.octetfont.com/blog/unicode-space.html
#Development #Proposals
CSS self gap · Custom gaps between some ‘flex’ or ‘grid’ items https://ilo.im/162wa9
_____
#Spacing #Layout #CssGrid #CssFlexbox #Browser #WebDev #Frontend #CSS
#Development #Fun
CSS lessons for your parking fails · Proper car positioning may be easier than you think https://ilo.im/161t84
_____
#Positioning #Spacing #CssFloat #CssTransform #CssFlexbox #CssGrid #Development #WebDev #Frontend #CSS
#Design #Techniques
Goodbye 4px spacing, hello Fibonacci · A fresh perspective on spacing systems in design https://ilo.im/160rz0
_____
#Spacing #Calculation #Consistency #Predictability #GridSystems #ProductDesign #UiDesign #VisualDesign #WebDesign
#Development #Techniques
You’re not a CSS developer without a reset · A CSS reset can also elevate your typesetting https://ilo.im/160pq6
_____
#CSS #CssReset #Scrolling #Spacing #Typesetting #Kerning #Accessibility #Browser #WebDev #Frontend
#Development #Techniques
The gap · How CSS ‘gap’ can fix annoying spacing issues https://ilo.im/15z26r
_____
#Layout #Spacing #WebDev #Frontend #CSS #CssGrid #CssFlexbox
Mutations in a non-coding gene associated with intellectual disability - Enlarge / The spliceosome is a large complex of proteins and RNAs. (cre... - https://arstechnica.com/?p=2028013 #developmentaldisorders #neurodevelopment #neurobiology #genetics #science #biology #spacing #rna
The #science of #effective #learning with #spacing and #retrieval practice
https://www.nature.com/articles/s44159-022-00089-1
not #openaccess :(
Today i've been tweaking my Glyphs script that, in a Glyphs tab, puts each glyph(*) between test glyphs to check the spacing. It's still rough, but useful (and the Glyphs tab be printed with Cmd-P to make PDFs). It tries to be slightly clever, for example by spacing smallcaps between both /H.sc and /n.
https://gitlab.com/drj11/script-glyphs/-/blob/main/Spaced.py
Example shows some smallcaps, the numbers, and some punctuation.
(*) actually at the moment "only" Letters, Numbers, Punctuation.
