vanderwal.net

Does the Internet Make My Type Look Small

Early in the week I was “doing a thing” that is part of future improvement to the back catalog of 25 plus years of posts and I looking at my site a lot, as well as other sites and my type looked small when comparing to most. To me my site was quite readable and keeping comfortable line lengths, but there was a size difference that I really hadn’t noticed as much.

I checked with a few fellow bloggers, whom I swore recently had type around the same rendered size mine has, but they nearly all said they hadn’t touched their type size in years (a couple had adjusted it in recent months). Their type sizes were larger.

Adjusting Type Size

The last visual adjustments I made were in 2020 and it was a bumping up of the default type size and making the page size wider, as screens were larger and could accommodate the size increase of the type (today I found my original draft of the Model of Attraction is still in the older page size - Model of Attraction - First Draft).

I still set the default font size in pixels and call Helvetica Neue to be displayed. I started working with the modifying the CSS in the Lab - vanderwal.net, as there are enough page types in there to test many of the layouts and furniture with the adjustments.

I bumped up the font size two pixels and that needed a lot of adjustments for the header, nav bar, margins, and padding. I was about halfway through the adjustments of sizing for other CSS elements when I realized the line lengths for body text were tight, like a cheap suit that “stretches”. I backed down the font size one pixel and that improved the type size nicely and kept good line lengths and reading more comfortable. One thing I needed to do was add height to the heading to let the “highly creative” heading set more clearly again. This meant adjusting the height of the heading background image (there is plenty of width).

I completed adjusting the margins and padding and the body text was breathing well. I opened a few other pages from other sites I regularly visit for blogs and new and informative sites. The type on vanderwal.net felt like it fit on the web.

Moving the CSS Out of the Lab

On Friday I took the steps to move the CSS over to this side of things.Because there are some things that are a little different on the Lab side I needed to use diff to compare the two CSS files and update this side. I turned to my trusty BBEdit to do the task (I hadn’t used the compare in BBEdit in years) and it reminded me why I like using BBEdit for the, “I wish I had something that could…” type tasks.

After about a half an hour things were sorted and most things looked as I had hoped. There are a handful of alignments that need fussing with. There is a margin and / or padding issue that has been around from the last size tweaking a few years back.

Side Benefit

There are some small benefits that have come from these adjustments. One is related to the links page and improved ease clicking Vision Pro and on iPad. I have kept the line height a bit tight as there are many links and on a laptop or desktop screen it is fine clicking. It has also improved clicking on mobile as the touch target is increase.

Swan Song's AR Design and Creation

I have a serious soft spot for the movie Swan Song (which stars Mahershala Ali and Glenn Close that is set in the near future in the Pacific Northwest. I was a fan of its soft and deep thought invoking exploration of life and replication, but also its near future view of technology. While others have been excited by the Minority Report’s manic augmented reality (AR) interface, the design and use of near future AR as part of work and personal life was really good. To say I was fascinated, may be putting it lightly. Swan Song (2021 Benjamin Cleary film) - Wikipedia was released in 2021 and Apple had yet to have announce Apple Vision Pro with its visionOS and really good graphics and workable interface. The visual and interaction design of what the main character (Cameron) worked in was incredibly good. Once Apple Vision Pro was out it felt like Cameron’s interfaces and interactions were part of the future road map.

The Design Studio Behind the Digital Interfaces and Interaction Design

Being that Swan Song movie was part of Apple Studios - Wikipedia I was believing Apple had a part in the creation of the user interfaces and interaction design of the AR in the movie. But, poking around in Vimeo I stumbled on the design reel for Swan Song - Territory Studio, so I finally found the studio that created the AR and digital design elements in the film.

Territory Studio’s Design Overview

Territory Studio’s page for the high level design overview of what they created for Swan Song is really good. I had been feeling like Swan Song’s design and AR team were more closely tied to Apple as their AR interaction design is very much like Apple’s sensibilities, with a more muted palette from a calm future. A lot of things that are in Apple Vision Pro’s user interface and interaction design patterns seem to have been hinted at, if not felt like they were previewed in Swan Song. But, I’m not so sure of the connection or how specious it may be.

The Territory Studio page has highlights of their visual / virtual design language, personal UIs, home office AR, AR home gaming, speculative hardware, smart watch UIs, and virtual mimoji. I really would love an even deeper dive, as this is much of the virtual interactive world I’ve been waiting for, and been hoping to see come to life for years prior to the film.

There is a whole lot in Swan Song that I loved from the time it was released, which was a couple years or so ahead of Apple Vision Pro being released. The headset-less AR and interaction design is one piece. But, I also was deeply taken by the whole story, cinematography, and feelings the film evoked, but also the keep thinking and consideration it evoked.

Swan Song Demo Video from Territory Studio

The show real from Territory’s work on Swan Song is in Vimeo: Swan Song Breakdown Reel - Vimeo