Typetura

A Human-Centered Design Group Reborn

Thu, 10 Apr 2025 00:00:00 GMT

After a wildly successful run, including performing the first digital audit finding $11 million in profit for the General Services Administration (GSA) and winning a Service to the Citizen Award, this group of federal employees found themselves subject to mass layoffs and firings. Eager to continue the work, they are carrying on their mission to bring Human-centered Design (HCD) training and mission-oriented focus to people and organizations in both the public and private sectors. Over two months, we have been building a new brand for this work, archiving and compiling public domain materials, and giving them a new home.

The bulk of the work was building a new platform for the Human-centered Design Guide series, an eight-part book with hundreds of pages of material. These guides provide detailed yet approachable steps for every phase of the design process, from discovery to measuring success. We built a platform in Astro, then designed and developed an interface that navigated all eight books efficiently and clearly. One of the most difficult challenges with an extensive web content collection is providing clarity about where you are. With a physical book, it’s easy to see how many pages of content you’ve read through and mark sections as you go. We created a navigation with sections that persist to make a clear map of where you are in the context of what you are actively reading.

To add value to the work and create an artifact people can hold and take notes on, we also developed a series of PDF variants of the guides. These two forms meet people where they are in their projects. Eight and a half years of research, development, planning, testing, and execution has gone into this material, so ensuring the guides have a quality place to exist has been the primary focus of our work with Ishmael Interactive.

With mission-critical content mostly sorted, branding work came second. The goal was to create something that expressed optimism and creativity while still being competent and well-structured. The logo mark can carry expressiveness, while a rigid grid can have structure, and color can carry optimism. With the logo, grid, and color working hand-in-hand, the cohesive brand experience is welcoming, inviting, competent, and clear.

<ul class="testimonials" id="testimonials"> <li> Our new branding and website literally makes me weep for joy. At Ishmael Interactive, we had traditional branding needs paired with a massive amount of text to wrangle, and Typetura organized it all into this fun, sleek, cohesive website that’s inviting and easy to navigate. <a href="https://anamonroe.com" target="_blank">Ana Monroe</a>, Founder </li> </ul>

<a href="https://ishmaelinteractive.com" target="_blank" class="cta">Visit Ishmael Interactive</a>

Connecting Our Social Personas

Mon, 24 Mar 2025 00:00:00 GMT

A New Social offers a bold new vision for social media: a vision in which you can control how and where you connect with your friends online. Their first product, Bridgy Fed, allows you to talk and interact with accounts across Bluesky and Mastodon, but the vision is bigger. We introduced the concept of “constellations,” where unique networks intertwine to create a single image. These constellations enable people to connect with you, and enable you to connect with others across multiple networks. Each line in a constellation is a bridge.

Reference material, predominantly sourced from Margret and H. A. Rey illustrations

Inspired by the wonderous simplicity of Margret and H. A. Rey's illustrations, we distilled a visual language incorporating star diagrams and a very warm and human aesthetic. We also explored typography treatments, settling on Libre Caslon for this iteration. It was important for the typography to be OFL licensed, not just for budgetary concerns, but to align with the open principles of A New Social.

A logo from the first round of brand ideation for A New Social

Another requirement is that this iconography needs to work across platforms and networks. While the client loved the aesthetics and flavor of this branding, it would stand out on platforms where we might want it to blend in to become a part of an existing interface. We needed something that would work as an icon and a logo. A tighter logo mark, and typography that is more common.

After more iterations, we played with bringing the stars closer together, overlapping the celestial bodies to eclipse each other’s form partially. This resulted in an icon at home in a button within an app or work as a logo atop a website. We also cast aside color schemes, relying on shape alone to forge the identity. The consequence was more flexibility with brand colors, enabling dramatically different light and dark mode color schemes, using warm oranges for light mode and cool blues and purples for dark mode. We also created assets like a constellation map that can be incorporated into designs, building depth and complexity.

<el-slides> <img src="/img/a-new-social/presentation-1.avif" alt="" /> <img src="/img/a-new-social/presentation-2.avif" alt="" /> <img src="/img/a-new-social/presentation-3.avif" alt="" /> <img src="/img/a-new-social/presentation-4.avif" alt="" /> <img src="/img/a-new-social/presentation-5.avif" alt="" /> <img src="/img/a-new-social/presentation-6.avif" alt="" /> <img src="/img/a-new-social/presentation-7.avif" alt="" /> </el-slides>

The resulting brand guidelines enabled A New Social to launch a platform that connects people across networks. With their board recently announced, there is still work to be done. This effort establishes a solid foundation and brand identity to support that work.

<ul class="testimonials" id="testimonials"> <li> I obviously loved what you made for us, but the process was definitely my favorite part. Can’t wait to work with you again in the future! <a href="https://mastodon.social/@quillmatiq/114235605739776683" target="_blank">Anuj Ahooja</a>, CEO & Executive Director </li> </ul>

<a href="https://anew.social" target="_blank" class="cta">Visit A New Social</a>

A Fresh New Look for We Distribute

Tue, 17 Sep 2024 00:00:00 GMT

Sean Tilley has been a part of the federated social web for over 15 years and is covering news, updates, and profiles in this space through We Distribute. They have already seen success with their coverage and investigations over the past year. With an interest in expanding the scope of the project, they sought help elevating their brand to be something more impactful and distinguished.

I worked with Sean and his business partner Damon to identify the goals of We Distribute, and where they needed it to stand out or fit into the competitive landscape. We identified the color and typography that other brands were using and crafted a look that distinguished itself from other publications while still feeling like a technology publication. We chose bright brand colors that steered away from the usual blue and purples of other tech publications and used contemporary serif fonts instead of usual sans-serif fonts. We leaned heavily on Redaction by MCKL Type and MoMA to provide a pixelated and digitally distressed aesthetic while remaining crisp and modern.

After solidifying the brand for both We Distribute and their podcast Decentered, we re-themed their WordPress website to incorporate the new brand. Quickly making the website feel fresh and contemporary to use and interact with.

I am extremely excited about the results of this redesign. We Distribute now has a more own-able brand that will aid in audience growth and retention. This project is still ongoing and we will continue to update this post with more details.

<ul class="testimonials" id="testimonials"> <li> I absolutely love the work you’ve done with us. We Distribute looks so good thanks to your thoughtfulness and skillful approach. <a href="https://social.wedistribute.org/users/deadsuperhero" target="_blank">Sean Tilley</a>, Founder </li> </ul>

<a href="https://wedistribute.org/" target="_blank" class="cta">Visit We Distribute</a>

How unit division works in CSS, and how to use it today

Fri, 13 Sep 2024 00:00:00 GMT

Unit division in CSS has been at the top of my CSS wishlist for years. It allows you to take one value and manipulate it to do something else entirely. This is huge. CSS units may be typed as a <length>, <color>, <number>, or <angle>. Unit division allows us to compare and manipulate any type of unit with any other type of unit for the first time. Here at Typetura we use it to take a container width and manipulate it to change the timing of CSS animations, but you might want to use it to manipulate colors, proportions, variable font properties, or percentages without the <length> type. To my surprise and delight, Safari launched unit division in CSS this week.

But how exactly are we using this feature if it’s only just now released in Safari Technology Preview? For the past few months we have been using a workaround by Jane Ori that uses tan(atan2()) alongside @property to achieve unit division in CSS. This week we released a new version of Typetura.css that uses native unit division when available, and falls back to Jane’s technique when it’s not. Previously we were using a little JS to handle this math.

Using unit division in CSS

In grade school math class you might have remembered dividing by x to solve for an equation. For example, if you have 10x you can divide by x leaving you with 10. Similarly, if you have 10px and divide by 1px you’re left with 10. Now, you can take this 10 and multiply it by 1deg to convert it to an <angle> or 1s to convert it to <time>.

Another thing to remember is that the denominator always takes precedence in the calculation. For example, if you have 1in / 1px, the result will be 96, as 1 CSS inch always equals 96 CSS pixels. CSS converts both the numerator and denominator to the same units as the denominator, then divides the values and removes the units. This is particularly handy when using relative length values. Dividing a relative value by a fixed value, like 100vw / 1px, will give you the corresponding viewport width as a <number> of pixels. You now have a way to manipulate values based on screen width without needing to use JavaScript.

Changing the background color of a page with the viewport

As a quick example, we can change the background color of a page with this technique. We can convert the viewport width to a number, then convert that to degrees for our HSL value.

html {
	background: hsl(calc(100vw / 1px * 0.2deg), 100%, 80%);
}

Currently, this only works in Safari Technology Preview, so let’s add a fallback using Jane Ori’s technique. We can isolate a lot of complexity here and use custom properties to run our calculations. Let’s add a --num, and --denom property to hold our values and run the division calculation in isolation.

/* Division math happens here for when you need it */
* {
	--div: calc(var(--num) / var(--denom));
}

/* Write your styles here */
html {
	--num: 100vw;
	--denom: 1px;
	background: hsl(calc(var(--div) * 0.2deg), 100%, 80%);
}

Now that we have our styles well isolated, we can add Jane Ori’s technique to the mix without impacting the area of the stylesheet where we have our page styles.

/* Division math happens here for when you need it */
* {
	--div: calc(var(--num) / var(--denom));
}

/* Fallback support */
@supports not (width: calc(1% / 1px * 1px)) {
	@property --num {
		syntax: "<length>";
		initial-value: 0px;
		inherits: false;
	}
	@property --denom {
		syntax: "<length>";
		initial-value: 0px;
		inherits: false;
	}
	* {
		--NUM: calc(tan(atan2(var(--num),1px)));
		--DENOM: calc(tan(atan2(var(--denom),1px)));
		--div: calc(var(--NUM) / var(--DENOM));
	}
}

/* Write your styles here */
html {
	--num: 100vw;
	--denom: 1px;
	background: hsl(calc(var(--div) * 0.2deg), 100%, 80%);
}

<a href="https://codepen.io/scottkellum/pen/ZEdZwLv?editors=1100" target="_blank" class="cta">Edit on CodePen</a>

Conclusion

Unit division can be a powerful tool, and now that it is available in CSS, it opens up a world of possibilities for developers. It will greatly reduce our reliance on JavaScript for calculations, speeding up page performance. Jane’s fallback is a bit of a hack and should be used with consideration, but this technique of isolating hacks is a great way to start using unit division today with the ability to easily remove the hack in the future when it is no longer needed.

Creating Artifacts with Fonts

Tue, 13 Aug 2024 00:00:00 GMT

Darden Studio is a renowned digital type foundry, creating fonts used by major brands and campaigns across the world like AT&T, Mazers, Crayola, Bernie Sanders, and Hearst. With the new releases of Kit and Gamay, the studio needed a way to promote their new fonts. The primary challenge of promoting these new fonts being that nothing has been made with them yet. Fonts are a material, something that you make things with. So naturally, we worked with Joyce Ketterer and Quinn Keaveney at Darden Studio to make these artifacts.

<div class="bento"> +17% Website traffic +2x Adobe activations </div>

With the marketing efforts we have been involved with over the past year, there have been sizable improvements in the traffic and activations of new Darden Studio releases. Merch has been a key part of the marketing strategy, creating a delightful touchpoint for conference and meetup attendees.

The Kit Pin

With Darden Studio merch being handed out for promotions at conferences and meetups, we wanted something that people could engage with. Something that would be visible and have utility. Pronoun pins were the perfect artifact to create for these events. We also wanted to create one pin, a spinner or slider, to accommodate different pronouns. After numerous iterations we broke down 3rd person subject pronoun into their parts and found we could make a slider that contained the letters “t”, “s”, and “y” on the back plate and “he” on the front plate, revealing different letters for each pronoun.

The resulting pin is compact and versatile, yet it displays the pronoun prominently when worn.

Merch will be available from Darden Studio’s website soon if you want to get your hands on your own Kit pin.

<a target="_blank" class="cta">Available soon from Darden Studio</a>

Contains Multitudes Gamay Tape

With the success of the Kit pins, Darden Studio wanted an item for the release of Gamay. After substantial ideation with the Darden Studio team tape was the idea that stuck. We had originally looked into washi tape of different widths for each of Gamay’s widths but landed on packing tape that says “CONTAINS MULTITUDES” — a reference to Walt Whitman’s poem Leaves of Grass as well as whatever might be packed inside a box wrapped in this tape.

<a target="_blank" class="cta">Available soon from Darden Studio</a>

Showcasing Roslindale: A New Specimen Microsite

Wed, 24 Jul 2024 00:00:00 GMT

We love Roslindale by David Jonathan Ross, so when he approached us to design a specimen site to showcase the font’s rich design characteristics and history we jumped at the opportunity. We worked with David to scaffold a rough outline of the microsite and André Mora to draft content.

The design space of Roslindale is something we wanted to highlight. David visualizes this space as a triangular prism, a shape we dubbed “the horn”. It shows how widths stem out as optical size increases, creating a richer and more complex area for large type. We created an interactive version of this horn so that people could navigate around the design space, gaining better understanding of how Roslindale works.

Interspersed within the sections we wanted to create a more traditional specimen. With all the styles available, we had the roman, italic, and uppercase variations scroll past when moving down the page while still being editable.

With the popularity of Roslindale there was no shortage of in-use material to pull from. For this we created a rich grid of images linking back to Fonts In Use. It’s one of our favorite parts of the design with an editorial yet visuals-forward aesthetic.

<a href="https://djr.com/roslindale" target="_blank" class="cta">Visit the Roslindale specimen website</a>

Elevating the artistry and art of Kaplan Art Tours

Wed, 14 Dec 2022 00:00:00 GMT

Background

Lauren A. Kaplan has decades of experience crafting and leading fine art tours in New York City and throughout the U.S. As she built her vibrant business, she gradually outgrew her original branding and digital workflow. She identified the need to present herself with the same sophistication and attention to detail that she had built over her years of experience, but she wasn't sure what the possibilities were or even where to start. That's when a friend connected her with Typetura.

Brand

We took art deco themes Lauren gravitates to along with a color scheme common in many galleries and museums around the city to anchor her brand voice. This created a cohesive aesthetic that is authentic to and representative of the work she does.

This brand consisted of Zenith by DJR, typeset into a square logo. The logo paired with Futura for headlines and Fern, again by DJR, for text. The result is an aesthetic that’s bold yet sophisticated. Large impactful images were used throughout, with cutaways to both give the design structure and lead people to further consume content on the pages.

We revised the content architecture and copy on her website to facilitate her connection with her clients. This ensured the content was appropriate and accessible for each section. The Tours page in particular needed to guide people through the vast expanse of art, architecture, and galleries of New York City.

The blog was an area of focus as well. Moving content on the home page to separate posts and pages and ensuring updates are surfaced throughout.

Code

To implement the changes while retaining Lauren’s workflow we developed a custom WordPress theme, then implemented it on a staging site to ensure all plugins worked appropriately. We also managed the migration and redirects of URLs for better SEO. After ensuring everything was perfect on staging, we migrated to the main website. The result was no website downtime. Client bookings never missed a beat.

Magic

We created a brand and digital presence that brings Lauren and her clients closer together. The Lauren A. Kaplan Tours vision shines in this dynamic yet balanced branding work, and we're wildly proud to be a building block in this New York institution.

<a href="https://kaplanarttours.com/" target="_blank" class="cta">Visit Kaplan Art Tours</a>

Building an Accessible Education Platform

Sat, 13 Aug 2022 00:00:00 GMT

EL Education is one of the largest providers of online learning materials and they were in the midst of a major redesign with Type/Code. They reached out to me and Typetura to create a robust and accessible front-end for the platform. We took on this project, closely collaborating with the team at Type/Code while staffing up our own team with specialized contractors to ensure on-time and on-budget implementation.

Design

We collaborated closely with Type/Code and their team of designers to ensure high fidelity and interactivity across the site, including areas with parallax effects and overlays. Children’s artwork was featured throughout the website, and provided a unique implementation challenge to prserve the ability to collage the images into the pages.

Code

I developed this site using the front-end framework, Vue, providing a dynamic component architecture to build pages and routes. This componentization used Atomic Design Principles, building up tokens, atoms, molecules, and organisms, to coalesce into page templates. This allowed us to build rapidly with our project partners.

Magic

This project is a testament to tight collaboration, project, and team management. Building and working with others to deliver on client needs. Creating robust but impactful and accessible systems at scale that help EL Education grow and thrive.

<a href="https://eleducation.org/" target="_blank" class="cta">Visit EL Education</a>

A Luxe design for Gold’s Guide

Fri, 13 Aug 2021 00:00:00 GMT

<div class="bento"> 2x page views 3x time on site 15% lower bounce rate </div>

We partnered with Tyler Gold to create a website showcasing his coverage of tech, culture, and personalities. His writing is thorough with deep and thoughtful insights and we worked to elevate the design to better align with his goals. The website is built on top of Ghost, an outstanding CMS for bloggers, publications, and newsletters. We iterated quickly to deliver a complete rebrand and website within two months.

Our goal was to create a website that would better retain readers of their long-form articles. To do this we needed two things: a recognizable brand people would know to come back along with compelling yet readable article pages that would better capture and retain a reader’s attention.

For the brand we chose a vibrant gold color and liberally used it across the background, making the whole website pop at a glance. The logo used a classical serif, Fern by DJR, to create a unique richness and character. The result was something that feels fresh and interesting while retaining authority.

Increasing email signups was another goal of this project, and we created a dedicated email signup area of the home page with a sticky signup notice. We wanted to create something intentional and native feeling while also being ever-present.

The article page was focused on ergonomics. People came to read and Gold’s Guide had relatively long articles. For these pages we stick with a straightforward black text on a white background, or a dark mode with white text on a black background. Frances is the typeface we used for text, adding character to the page while retaining great readability.

After the redesign of Gold’s Guide, they saw a 2x uptick in page views and reduction in bounce rates of 10%. Readers were spending 3x more time on the site increasing engagement.

<a href="https://goldsguide.com/" target="_blank" class="cta">Visit Gold’s Guide</a>