Creating Pretty Slanted Duograms- A Designer's Guide

What the Hell Is a Duogram?

A duogram is a two-part label. Two words or phrases stacked or arranged together to show a relationship. You've seen them everywhere—in data visualization, UI design, tag clouds, timeline markers. The slanted version just means one element sits at an angle, usually to show direction, progression, or connection.

Designers love them because they're compact, informative, and look good. That's it. That's the whole appeal.

Why Slanted Duograms Hit Different

Straight stacks are boring. They're fine for lists, but they don't show movement or relationship the way slanted ones do. When you tilt one element, you're implying flow. You're telling the viewer's eye where to go.

A slanted duogram says "this connects to that" without needing arrows or extra lines. Clean. Minimal. Effective.

Common Use Cases

Data labels on charts and graphs
Feature tags in product interfaces
Timeline entries with before/after states
Category labels with subcategories
Social media post metadata

Tools for Creating Slanted Duograms

You have options. Pick your poison:

Tool	Best For	Learning Curve	Cost
Figma	UI/UX designers, rapid prototyping	Low	Free tier available
Adobe Illustrator	Print, precision vector work	Medium	Subscription
Canva	Quick social graphics, no design background needed	None	Free tier available
CSS/SVG Code	Web developers, dynamic applications	Medium	Free
D3.js	Data visualization, interactive charts	High	Free

Design Principles Nobody Talks About

1. Angle Consistency Matters

If you're using multiple slanted duograms in one design, keep the angles identical. A 15° tilt here and a 20° tilt there looks sloppy. Pick one angle and stick with it across your entire project.

2. Font Pairing Makes or Breaks It

Two words means two opportunities to mismatch. Use fonts that share a similar x-height or weight. A sans-serif paired with a serif can work, but only if they're in the same visual family. Contrast is fine. Chaos isn't.

3. Spacing Is the Real Work

The gap between your two elements needs to be tight enough to feel like a unit, but loose enough to breathe. There's no magic number—test it. Usually 2-8px depending on font size.

4. Color Contrast Is Non-Negotiable

If the two parts of your duogram are the same color, at least one needs a background or outline to separate them visually. Otherwise they blur together and defeat the whole purpose.

How to Create a Slanted Duogram: Getting Started

Here's the practical part. Three methods, from simplest to most control.

Method 1: Figma (Fastest)

Create a text frame with your first word
Duplicate it and change the text to your second word
Select both frames
Use the rotate tool (R) to tilt one of them—usually the second word at -10° to -15°
Adjust the gap until it looks right
Group them so they move together

Method 2: CSS (For Web Projects)

Here's a basic example you can drop into any project:

<style>
.duogram {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.duogram-slant {
  transform: rotate(-12deg);
  display: inline-block;
}
</style>

<span class="duogram">
  <span>Before</span>
  <span class="duogram-slant">After</span>
</span>

Tweak the rotate value and gap until it matches your design. That's it.

Method 3: Adobe Illustrator (Most Control)

Type your first word with the type tool
Type your second word in a separate text frame
Select the second frame and go to Object → Transform → Rotate
Enter your angle (try -12° to -15°)
Position them next to each other
Use Pathfinder or manual adjustment to fine-tune the overlap

Common Mistakes to Avoid

Over-rotating: Anything past 20° starts looking broken. 10-15° is the sweet spot for most designs.
Ignoring alignment: The baseline of your tilted element should still feel connected to the first element. Test it at small sizes.
Using it everywhere: Slanted duograms work for specific contexts. Don't force them into designs where a simple horizontal label does the job better.
Forgetting accessibility: Screen readers don't know what a duogram is. Use proper semantic HTML when building for the web.

When to Use Slanted Duograms (And When Not To)

Use them when:

You're showing transformation or progression
Space is tight and you need to stack information compactly
Your design aesthetic calls for dynamic, angular elements

Don't use them when:

Readability at small sizes is critical
You're designing for accessibility-first applications
The information needs to be scanned quickly—straight labels are faster to read

Quick Reference: Angle Guidelines

Angle	Effect	Best Use
5-8°	Subtle, almost straight	Minimalist designs, small text
10-15°	Clear slant, readable	Most use cases, general purpose
18-25°	Strong diagonal energy	Bold graphics, large displays
30°+	Too aggressive	Avoid unless you want chaos

Start at 12° if you don't know where to begin. Adjust from there.