Jono Lewarne
@cityeditionstudio.co.uk
Graphic design / web development / creative coding / typography. Working across print, pixels & places. Developing sites in Astro, Wordpress & Shopify.
Based at Spike Island in Bristol, UK since 2012. Teaching type at UWE too!
www.cityeditionstudio.co.uk
Based at Spike Island in Bristol, UK since 2012. Teaching type at UWE too!
www.cityeditionstudio.co.uk
Squeezed in one last personal project; it syncs data from Rekordbox into a little web app, improving the filtering so I can browse what records are in the same rack, plan mixes etc away from my computer. Yes it's a WCAG nightmare but it's just for me so I can wallow in my pastel neon squinty world
December 23, 2025 at 10:56 AM
Squeezed in one last personal project; it syncs data from Rekordbox into a little web app, improving the filtering so I can browse what records are in the same rack, plan mixes etc away from my computer. Yes it's a WCAG nightmare but it's just for me so I can wallow in my pastel neon squinty world
I’m marking some student work today that I think @loftio.co.uk would approve of
December 11, 2025 at 10:02 AM
I’m marking some student work today that I think @loftio.co.uk would approve of
December 5, 2025 at 9:41 AM
I'm doing this with individual text boxes for each paragraph, made manageable with a little InDesign script I wrote for chopping them all up
November 19, 2025 at 1:44 PM
I'm doing this with individual text boxes for each paragraph, made manageable with a little InDesign script I wrote for chopping them all up
I'm working on a dual language book about immigration. My typographic approach is to set both languages together with each paragraph varying in width to take up the same amount of lines as its equivalent in the other language.
November 19, 2025 at 1:44 PM
I'm working on a dual language book about immigration. My typographic approach is to set both languages together with each paragraph varying in width to take up the same amount of lines as its equivalent in the other language.
Saturday reading
November 1, 2025 at 12:19 PM
Saturday reading
Having a nice and chill time updating someone's Wordpress site. Everything is fine.
October 29, 2025 at 8:22 PM
Having a nice and chill time updating someone's Wordpress site. Everything is fine.
So much of my print practice involves working with paper to figure out mechanics and format. Almost always beginning with scraps of paper; torn folded, scribbled on. It's such a valuable part of my process. Think > test > adjust > make.
October 22, 2025 at 3:05 PM
So much of my print practice involves working with paper to figure out mechanics and format. Almost always beginning with scraps of paper; torn folded, scribbled on. It's such a valuable part of my process. Think > test > adjust > make.
Women don't like the vehicle
October 17, 2025 at 4:57 PM
Women don't like the vehicle
Bug update: Adding a background to the elements that aren't getting blurred by the backdrop-filter element almost fixes it, except for a weird area on the left side of the element where the blur still doesn't apply
October 17, 2025 at 10:07 AM
Bug update: Adding a background to the elements that aren't getting blurred by the backdrop-filter element almost fixes it, except for a weird area on the left side of the element where the blur still doesn't apply
Using translateX in this CSS context is like kerning; an individual adjustment to the spacing between a pair of letters to create a gap that is visually even but in practice is a increase/decrease in the global gap value (the red lines in the graphic below). Thanks for listening to my TED talk.
October 16, 2025 at 10:12 AM
Using translateX in this CSS context is like kerning; an individual adjustment to the spacing between a pair of letters to create a gap that is visually even but in practice is a increase/decrease in the global gap value (the red lines in the graphic below). Thanks for listening to my TED talk.
... the things you're spacing out aren't squarely proportioned, like letters? In that case even spacing can result in uneven visual gaps. In this instance with CSS you could reach for 'transform: translateX' (although in practice you might not bother unless it was a big hero element)
October 16, 2025 at 10:12 AM
... the things you're spacing out aren't squarely proportioned, like letters? In that case even spacing can result in uneven visual gaps. In this instance with CSS you could reach for 'transform: translateX' (although in practice you might not bother unless it was a big hero element)
I often see the word 'kerning' used incorrectly by CSS heads when the term they're actually looking for to describe letter spacing is 'tracking'. Let me explain using CSS terminology!
Tracking is the same as gap in flex layouts; consistent spacing applied across the entire text.
But what if... 🧵
Tracking is the same as gap in flex layouts; consistent spacing applied across the entire text.
But what if... 🧵
October 16, 2025 at 10:12 AM
I often see the word 'kerning' used incorrectly by CSS heads when the term they're actually looking for to describe letter spacing is 'tracking'. Let me explain using CSS terminology!
Tracking is the same as gap in flex layouts; consistent spacing applied across the entire text.
But what if... 🧵
Tracking is the same as gap in flex layouts; consistent spacing applied across the entire text.
But what if... 🧵
Found a little bug in Chrome where a backdrop filter on an element doesn't apply to text if there's anything on the page with a mix-blend-mode. Thanks to @joshwcomeau.com for the help diagnosing it!
October 14, 2025 at 8:23 AM
Found a little bug in Chrome where a backdrop filter on an element doesn't apply to text if there's anything on the page with a mix-blend-mode. Thanks to @joshwcomeau.com for the help diagnosing it!
@webdevconf.com was so good! Amazing to meet and listen to such talented and lovely humans. Thanks to @lurkmoophy.bsky.social and @alexolder.com for putting such a great event together
October 11, 2025 at 7:57 AM
@webdevconf.com was so good! Amazing to meet and listen to such talented and lovely humans. Thanks to @lurkmoophy.bsky.social and @alexolder.com for putting such a great event together
New books that I do not have time to read (yet)
August 27, 2025 at 3:37 PM
New books that I do not have time to read (yet)
If you can’t avoid working late, do it with cheese.
Maybe I’ll start a YouTube channel, Coding with Cheese
Maybe I’ll start a YouTube channel, Coding with Cheese
July 3, 2025 at 9:23 PM
If you can’t avoid working late, do it with cheese.
Maybe I’ll start a YouTube channel, Coding with Cheese
Maybe I’ll start a YouTube channel, Coding with Cheese
One of the “real life” projects I’m working on at the moment is a permanent installation on Bristol’s famous King Street. I just got some samples of some custom made ceramic tiles from Spain delivered. So exciting to have these in hand after nearly two years of thinking and planning for this project
June 6, 2025 at 3:25 PM
One of the “real life” projects I’m working on at the moment is a permanent installation on Bristol’s famous King Street. I just got some samples of some custom made ceramic tiles from Spain delivered. So exciting to have these in hand after nearly two years of thinking and planning for this project
How come it’s only English that gets the playful type?
June 5, 2025 at 3:15 PM
How come it’s only English that gets the playful type?
Archive materials included this gem which we referenced heavily in one particular area of the work. It's the proposal for the university which features some incredibly brave and interesting concept illustrations and was designed by legends Ken Briggs and Ian McLaren. Holy grail business.
April 9, 2025 at 3:21 PM
Archive materials included this gem which we referenced heavily in one particular area of the work. It's the proposal for the university which features some incredibly brave and interesting concept illustrations and was designed by legends Ken Briggs and Ian McLaren. Holy grail business.
It was a huge challenge translating the work onto the various different architectural spaces of the building. It's a mix of vinyl, printed clear window films, printed wallpaper and printed/CNCd dibond aluminium (all made by the amazing WithPrint). We also project-managed the fabrication & install.
April 9, 2025 at 3:21 PM
It was a huge challenge translating the work onto the various different architectural spaces of the building. It's a mix of vinyl, printed clear window films, printed wallpaper and printed/CNCd dibond aluminium (all made by the amazing WithPrint). We also project-managed the fabrication & install.
While at the University of Bath last week I popped into to see the building-wide installation I made with Neasden Control Centre in 2019, commissioned to visualise the meeting of culture and academia. We spent a long time in the archives, pulling out imagery and motifs as an input to the work
April 9, 2025 at 3:21 PM
While at the University of Bath last week I popped into to see the building-wide installation I made with Neasden Control Centre in 2019, commissioned to visualise the meeting of culture and academia. We spent a long time in the archives, pulling out imagery and motifs as an input to the work
Off to the University of Bath on Friday to talk about InDesign. Toying with blowing their minds by showing them what you can do with scripts, like this book I made where the text gets bolder, or darker, as it got deeper down the page, mimicking the ocean, the subject of the book.
April 2, 2025 at 1:07 PM
Off to the University of Bath on Friday to talk about InDesign. Toying with blowing their minds by showing them what you can do with scripts, like this book I made where the text gets bolder, or darker, as it got deeper down the page, mimicking the ocean, the subject of the book.