The Letters That Changed Everything: How The DropTimes Discovered Its Voice Through Typography

One day, while looking at our site among many other Drupal sites, I realised we all appeared the same. We used the same Thunder theme on the backend and EM Magazine theme on the frontend, the same Open Sans fonts, and maintained the same visual voice. In a sea of similar websites, how could The DropTimes effectively serve the Drupal community if we couldn’t even differentiate ourselves visually?

This is the story of how we found our typographic voice, and why every letter and every font choice became a way to serve our readers.

The Uncomfortable Truth: When Default Isn't Good Enough

Imagine scrolling through Drupal community websites and seeing them blend together like identical houses in a suburb. That was our situation with the Thunder theme's default typography—OpenSans everywhere, predictable layouts, and no personality.

What truly bothered me was that this wasn’t just about looking different; it was about serving our community better.

• The Brand Identity Crisis: Every article, interview, and Drupal update we published looked like it could come from anywhere. Our content deserved a visual identity as unique as our coverage.
• The Accessibility Wake-Up Call: We weren’t just building a website; we were creating a platform for inclusion. If visually impaired users couldn’t read our stories comfortably, we were failing them. Typography isn’t just decoration; it’s a means of access.
• The Mobile Reality Check: With more readers accessing content on their phones than on desktops, we needed fonts that looked great at small sizes. The default theme fonts didn’t cut it when developers were trying to read our technical articles on their morning commutes.

At The DropTimes, we believe in transparency. Whatever we create, we document publicly. This typography journey needed to be shared, as design choices impact every reader visiting our site.

The Search: Finding Fonts That Care About People

We began our research with one simple question: What makes text truly readable?

That question led us to IBM Plex, which aligned visually with our needs and matched our values.

1. The X-Height Revelation: IBM Plex has a generous x-height, making lowercase letters taller. This isn’t just a design detail; it’s a breakthrough in readability. When someone squints at their phone to read our latest Drupal news, those extra pixels of height can mean the difference between comfort and strain.
2. The Family Affair: With Sans, Sans Condensed, Serif, and Mono variants along with 16 different weights in each, IBM Plex offered us something special—complete typographic flexibility within a cohesive family. (IBM Plex Sans even has a variable font version with at least 32 different weights, which we originally planned to use but decided against.) We could create hierarchy, establish rhythm, and maintain visual harmony using fonts that were clearly related.
3. The Modern Heritage: IBM Plex feels contemporary but not trendy. It has the seriousness our technical content needs while remaining approachable for newcomers to the Drupal community. Unlike the overused web fonts out there, Plex gave us a unique look.
4. The Open Source Heart: Licensed under SIL OFL and freely available from Google Fonts, GitHub, and Adobe Fonts, IBM Plex fit perfectly with our open-source values. We could embed it wherever we wanted, adjust it if needed, and never worry about licensing issues.

It's also worth noting how the designers at IBM created their Serif typeface. The documentation describes IBM Plex Serif as a hybrid of the best features from Plex, Bodoni, and Janson, in a modern serif style.

By the way, if you're into typography, that entire document is a captivating read. I also highly recommend exploring their design philosophy. I found myself becoming quite a fan of their approach.

The Architecture: Building a Typography System That Thinks

Creating our font hierarchy involved more than just selecting sizes; it was about forming a communication system. Every element had to have a purpose, guide the reader, and respect their time.

The Attention Architecture

We designed our headlines to feel conversational:

• Topic Labels: IBM Plex Sans at 14px in our signature blue (#069bdf)—like tapping someone on the shoulder.
• Main Headlines (H1): IBM Plex Serif at 48px—the confident voice that says, "this matters."
• Tagline (H2): IBM Plex Sans - 32px with a 40px lineheight.
• Bylines: A clean, human design with thumbnails—because stories originate from people, not publications.

The Reading Journey

Every paragraph needed to justify its place:

• Lead Text: IBM Plex Serif at 22px invites readers in like a friendly greeting.
• Body Text: IBM Plex Serif at 18px with a generous 27px line height—comfortable for long reads.
• Subheadings: A carefully structured system from H3 (24px) down to H6 (18px) that keeps the reader on track.

The Special Moments

We tailored typography for the specific demands of technical journalism:

• Large Quotes: 36px IBM Plex Serif with blue quotation marks—highlighting important statements.
• Code Blocks: Well-formatted technical content—because poorly formatted code disrespects developers.
• Interview Questions: Visually distinct formatting—conversations need special attention.
• Highlighted Text: Three distinct styles with coloured borders—because not all emphasis is the same (now limited to one style).

The Reality: When Specifications Meet the Real World

Here’s where things get real: Our detailed font specifications weren’t implemented exactly as planned. Real-world typography isn’t about flawless execution; it’s about iteration, testing, and improvement.

Our development team faced CSS challenges. We tested how the fonts looked with actual content, not just dummy text. We adjusted based on how articles appeared when published, not just in mockups.

Some achievements we’re proud of include:

• Pull quotes now add personality.
• Code blocks are easy to read and navigate.
• Inline code formatting adjusts to its context.
  
  This iterative approach reflects our editorial philosophy: 

"Rules are not absolute. Feel free to break the rules when necessary for clarity or impact."

Beyond the Browser: Typography That Travels

The story extends beyond the website. Every piece of content we create—from social media cards to hero images—carries our typographic voice into the world.

Initially, we relied on Canva’s defaults—Montserrat, Poppins, and Public Sans, among others. They were fine, but "fine" isn’t enough for serving our community.

The Accessibility Champion: Atkinson Hyperlegible

Then we discovered Atkinson Hyperlegible—a font designed with a purpose in mind.

Commissioned by the Braille Institute for visually impaired readers, this was not just another typeface. It was typography with intent:

• Visual Distinction: Using different fonts for social media reduced confusion when hero image text and article titles appeared on the same screen.
• Legibility by Design: Atkinson Hyperlegible excels at distinguishing often confusing characters, which is vital when sharing technical content that includes version numbers, code snippets, or complex terms. For example, it doesn’t confuse uppercase "I" with lowercase "L" or the number "1." The letters B and 8, O and 0, and all such pairs are clearly distinguishable. Number 13 won’t look like a B.
• Accessibility Leadership: Atkinson Hyperlegible isn’t just compliant; it’s inclusive by design. You can read about all the features that give the font character.
• Consistency Through Standards: We fixed social media titles at 45 points across all platforms, creating reliable, recognizable content that works whether someone sees it on LinkedIn or Twitter.

The Trademark Tightrope: Respecting Boundaries

We intentionally avoided using the fonts from Drupal’s official rebranding. Not because they aren’t interesting, but because they aren’t right for us.

Drupal’s new fonts (ZT Gatha and Noto Sans) are part of their trade dress. As an independent community publication, we maintain a respectful distance from their official branding. We support Drupal wholeheartedly, but we're not Drupal.org—we're a voice from the community for the community.

We also had concerns. In ZT Gatha, certain ligatures—like ff and fi—felt excessive for a Sans Serif. These ligatures belong in Serifs or ornamental fonts, where letters naturally connect. In clean Sans Serif designs, they can risk confusion and feel forced.

As I mentioned in a LinkedIn post, ligatures are a remnant of print. Their usefulness in digital sans-serif contexts is debatable. Sometimes they aid readability. Other times, they distract. In ZT Gatha, they leaned too much toward distraction.

Typography choices reveal design philosophy. Ours prioritises clarity and accessibility over stylistic flourishes.

The Transformation: When Typography Becomes Impact

Since implementing our typography system, we’ve seen measurable and significant changes:

• Growing Community: Our readership and follower numbers have steadily increased. While we can't attribute this entirely to our typography, improved readability helps keep our audience engaged.
• Brand Recognition: Our articles now reflect The DropTimes, even before you see our logo.
• Community Trust: We haven’t received extensive feedback specifically about typography. However, the positive response to our content suggests that a better reading experience supports our journalism mission.

The Philosophy: Typography as Community Service

Our typography journey taught us that font choices are never just about looks. They’re acts of service to your community.

Every font choice either helps or hinders:

• Accessibility and inclusion—can everyone comfortably read your content?
• Brand recognition—do people recognize it’s you before they see your logo?
• User experience—does your typography guide readers or confuse them?
• Content comprehension—does your hierarchy clarify your message?
• Community respect—do your design choices show care for your audience?

As our style guide reminds us:

At The DropTimes, we believe that effective writing is the cornerstone of meaningful communication... Whatever we write as part of our job is writing for impact.

Typography enhances that impact.

The Future: Letters That Keep Evolving

Typography isn't a one-time decision. As The DropTimes continues to grow, we will keep refining our typographic choices based on community feedback, accessibility advances, and developing best practices.

We document this journey publicly because we believe in transparency. Other community publications can learn from our choices—both our successes and our missteps.

Our advice for fellow Drupal sites considering typography improvements: Don’t go along with theme defaults just because they’re easy. Ask more challenging questions:

• Does your typography serve your specific community?
• Are you prioritizing accessibility or just ticking boxes?
• Does your visual voice match your editorial mission?
• Are you making it easier or harder for people to engage with your content?

The Letters That Matter

Every letter on The DropTimes carries the weight of service. IBM Plex ensures readability. Atkinson Hyperlegible ensures access. Together, they represent our commitment to clarity, community, and care.

Typography silently communicates our values. It speaks before our words do, welcoming readers or pushing them away, including voices or leaving them out, honoring the community or taking it for granted.

At The DropTimes, we chose letters that care about people. In a world of default themes and identical websites, that choice makes a significant difference.

The letters we choose today form the groundwork for tomorrow's conversations. We selected typography that respects both our present and the future we’re building together.

The DropTimes is dedicated to representing the voices of the Drupal community and celebrating the people and organisations that make it thrive. Our design decisions, like our editorial choices, come from this commitment. What typography stories would you like to share? Join the conversation on LinkedIn.