Bullet (•) vs Middle Dot (·): Small Dots, Big Differences

A small round dot. Sounds simple enough. Yet Unicode contains dozens of dot-like characters, and three of them — the bullet •, the middle dot ·, and the interpunct — look nearly identical in most fonts yet serve entirely different typographic purposes. Add in the dot operator, the centered dot, and a handful of language-specific marks, and you have a surprisingly complex corner of the character set.

This guide sorts them all out: what each character is for, which one to use when, and how to type them.

The Main Dot Characters Compared

The Bullet (U+2022)

The bullet character • (U+2022) is the standard character for unordered list items in typographic text. It's a large, visually prominent filled circle, designed to catch the eye and clearly delineate list items.

When to Use the Bullet

The bullet character is appropriate when you're constructing list-like structures in non-semantic contexts — plain text files, generated text, CSV outputs, or legacy systems where HTML lists aren't available.

<!-- Prefer HTML lists for semantic meaning -->
<ul>
  <li>First item</li>
  <li>Second item</li>
</ul>

<!-- Use bullet character only in plain text or non-semantic contexts -->
<p>• First item<br>• Second item</p>

In HTML, use semantic <ul> and <li> elements for actual lists. The browser's default CSS renders them with a bullet (technically via list-style-type: disc). Manually inserting • characters loses semantic structure for screen readers and loses the ability to restyle bullets with CSS.

CSS List Bullets

For CSS-based bullet customization, prefer list-style-type, list-style-image, or the ::marker pseudo-element:

/* Simple disc bullet (default) */
ul { list-style-type: disc; }

/* Square bullet */
ul { list-style-type: square; }

/* Custom Unicode bullet character */
ul { list-style-type: "• "; }  /* CSS Strings in list-style-type — limited support */

/* Most robust: ::marker pseudo-element */
li::marker {
  content: "•";
  color: var(--accent-color);
  font-size: 1.2em;
}

/* Or ::before for full control */
ul.custom { list-style: none; padding: 0; }
ul.custom li::before {
  content: "•";
  margin-right: 0.5em;
  color: var(--accent-color);
}

The Bullet in Navigation and UI

The bullet character appears commonly in navigation breadcrumbs and inline lists as a visual separator:

<!-- Navigation breadcrumb with bullets (typographically acceptable) -->
<nav aria-label="breadcrumb">
  <a href="/">Home</a>
  <span aria-hidden="true"> • </span>
  <a href="/blog">Blog</a>
  <span aria-hidden="true"> • </span>
  <span aria-current="page">Article Title</span>
</nav>

The aria-hidden="true" on the separator spans ensures screen readers don't announce "bullet" between navigation items.

The Middle Dot (U+00B7)

The middle dot · (U+00B7, also called "centered dot" or "interpunct") is smaller and lighter than the bullet. It has a distinct set of traditional uses.

Word Separator in Ancient and Historical Languages

In ancient Greek and Latin manuscripts (and still in some scholarly works), the middle dot or interpunct served as a word separator — spaces between words were not used. This is why the character is sometimes called an "interpunct."

This usage continues in displays of ancient inscriptions and some classical scholarly typography.

Catalan L·L (Gem Ela)

Catalan has a specific use for the middle dot: the "l·l" (ele geminada / gem ela) represents a geminate lateral consonant — a double-L with a different pronunciation from simple "ll." The middle dot is required between the two L characters:

<!-- Catalan geminate L -->
<p>col·legi (school)</p>
<p>intel·ligent (intelligent)</p>

This is the only European language where the middle dot is grammatically obligatory, making it a critical character for any application targeting Catalan speakers.

Japanese Katakana Middle Dot (U+30FB)

A visually similar but distinct character exists in Japanese: the katakana middle dot (U+30FB, ・). It is used:

• As a separator between items in a list (functioning like a comma)
• Between given name and family name in foreign names written in katakana
• As a separator in loanword compound words

<!-- Japanese: middle dot as name separator -->
<p>ジョン・スミス (John Smith)</p>

<!-- Middle dot as list separator -->
<p>東京・大阪・京都</p>

Note that the Katakana Middle Dot (U+30FB) is a full-width character occupying the same width as a CJK character, while the Latin Middle Dot (U+00B7) is a half-width character. They are separate code points and should not be confused.

Navigation Separators

The middle dot is a common choice for inline navigation separators because it is smaller and less visually dominant than the bullet — it separates without interrupting:

<!-- Footer navigation with middle dots -->
<footer>
  <a href="/about">About</a>
  <span aria-hidden="true"> &middot; </span>
  <a href="/privacy">Privacy</a>
  <span aria-hidden="true"> &middot; </span>
  <a href="/contact">Contact</a>
</footer>

Compare the visual weight: Home • Blog • Contact (bullet) vs Home · Blog · Contact (middle dot). The middle dot is more subtle; the bullet is more emphatic.

The Interpunct Decision: Bullet vs Middle Dot

A practical rule: if the dot is replacing a list bullet, use •. If the dot is separating two items on the same line, use ·.

The Dot Operator (U+22C5) and Bullet Operator (U+2219)

These two characters are used in mathematical notation:

Dot Operator (U+22C5 — ⋅)

The dot operator is used in mathematics for: - Scalar multiplication: a ⋅ b (dot product) - Logical AND in some notations: p ⋅ q - The center dot in dimensional analysis: N⋅m (newton-meters)

<!-- Dot product -->
<p><b>a</b> &sdot; <b>b</b></p>

<!-- Unit with center dot -->
<p>Force: 10 N&sdot;m</p>

Bullet Operator (U+2219 — ∙)

Similar to the dot operator but subtly different in some fonts. Used in: - Formal logic notation - Some programming language documentation (Haskell, etc.) - Mathematical set operations in certain styles

In practice, U+22C5 (dot operator) and U+2219 (bullet operator) are used interchangeably in most web content. For formal mathematical markup, use MathML or LaTeX where the rendering engine handles operator selection.

Password Masking Dots

A common misconception: the dots displayed in password fields are not actual bullet characters. Browsers use a dedicated character or a custom glyph for password masking:

• Web browsers: Use CSS input[type="password"] with font-family: text-security-disc (WebKit) or equivalent internal mechanisms — the exact character varies by browser and OS
• HTML specification: Does not specify which character to use; browsers implement their own password masking dots

If you're building a custom password strength indicator or character counter, be aware that input[type="password"] fields return the actual typed value in JavaScript — the masking is visual only:

// This correctly gets the actual password, not dots
const password = document.querySelector('input[type="password"]').value;
console.log(password.length); // Actual character count

The Hyphenation Point (U+2027)

The hyphenation point ‧ is used in dictionaries and linguistics texts to show syllable division within a word:

<!-- Dictionary entry showing syllable breaks -->
<p>ty·pog·ra·phy</p>         <!-- Middle dot used informally -->
<p>ty&#8231;pog&#8231;ra&#8231;phy</p>  <!-- Hyphenation point, technically correct -->

In practice, most dictionaries on the web use the plain middle dot (U+00B7) for syllable marks because it is more widely supported and easier to type.

Comparison Tables in Web Development

A common use case for bullet-like characters: comparison tables with checkmarks and X marks. Using the right characters matters for accessibility and semantics:

<!-- ❌ Avoid: using X/O as pass/fail indicators (letter ambiguity) -->
<td>X</td>  <!-- Is this an X mark or the letter X? -->
<td>O</td>  <!-- Is this a checkmark stand-in or the letter O? -->

<!-- ✅ Better: dedicated characters with aria-label -->
<td aria-label="Included">&#10003;</td>   <!-- ✓ Check Mark (U+2713) -->
<td aria-label="Not included">&#10007;</td>  <!-- ✗ Ballot X (U+2717) -->

<!-- ✅ Best: CSS with meaningful text fallback -->
<td class="feature-yes" aria-label="Included">
  <span aria-hidden="true">✓</span>
</td>
<td class="feature-no" aria-label="Not included">
  <span aria-hidden="true">✗</span>
</td>

The bullet character • is sometimes used as a "yes" indicator in comparison tables. This is typographically weak — a checkmark is semantically clearer and more accessible.

Bullet Varieties for Different List Styles

When you need multi-level lists with different bullet styles at each level, CSS handles this through list-style-type:

/* Multi-level list with different bullets */
ul { list-style-type: disc; }           /* •  Level 1 */
ul ul { list-style-type: circle; }      /* ◦  Level 2 */
ul ul ul { list-style-type: square; }   /* ▪  Level 3 */

/* Custom Unicode bullets */
.custom-list { list-style: none; }
.custom-list > li::before {
  content: "•";    /* U+2022 Bullet */
}
.custom-list > li > ul > li::before {
  content: "◦";    /* U+25E6 White Bullet */
}
.custom-list > li > ul > li > ul > li::before {
  content: "▸";    /* U+25B8 Small Black Right-Pointing Triangle */
}

Alternative bullet characters available for custom list styling:

How to Type Bullet and Middle Dot

Mac

Windows

Linux

Ctrl + Shift + U → 2022 → Enter   (Bullet)
Ctrl + Shift + U → 00B7 → Enter   (Middle Dot)

With Compose key: - Bullet: No standard Compose sequence — use Unicode input method - Middle dot: Compose . . (period period) on many layouts

HTML

&bull;        <!-- Bullet (U+2022) -->
&#8226;       <!-- Bullet (decimal) -->
&#x2022;      <!-- Bullet (hex) -->

&middot;      <!-- Middle Dot (U+00B7) -->
&#183;        <!-- Middle Dot (decimal) -->
&#xB7;        <!-- Middle Dot (hex) -->

&sdot;        <!-- Dot Operator (U+22C5) -->
&#8901;       <!-- Dot Operator (decimal) -->

CSS content Property

li::before {
  content: "\2022";   /* Bullet */
}

.separator::after {
  content: " \00B7 "; /* Middle dot with surrounding spaces */
}

.dot-operator {
  content: "\22C5";   /* Dot operator */
}

Detecting Dot Characters Programmatically

Use our Character Analyzer to identify exactly which dot character is in any text. In code:

import unicodedata

DOT_CHARACTERS = {
    '\u2022': 'Bullet',
    '\u00B7': 'Middle Dot',
    '\u2027': 'Hyphenation Point',
    '\u2219': 'Bullet Operator',
    '\u22C5': 'Dot Operator',
    '\u0387': 'Greek Ano Teleia',
    '\u30FB': 'Katakana Middle Dot',
    '\u25E6': 'White Bullet',
    '\u2043': 'Hyphen Bullet',
    '\u2023': 'Triangular Bullet',
}

def identify_dot(char: str) -> str:
    return DOT_CHARACTERS.get(char, unicodedata.name(char, 'Unknown Character'))

# Example
for ch in ['•', '·', '⋅', '∙']:
    print(f"U+{ord(ch):04X}: {identify_dot(ch)}")

// JavaScript: identify dot characters
const dotCharacters = {
  '\u2022': 'Bullet',
  '\u00B7': 'Middle Dot',
  '\u2027': 'Hyphenation Point',
  '\u2219': 'Bullet Operator',
  '\u22C5': 'Dot Operator',
  '\u30FB': 'Katakana Middle Dot',
  '\u25E6': 'White Bullet',
};

function identifyDot(char) {
  return dotCharacters[char] ?? `U+${char.codePointAt(0).toString(16).toUpperCase().padStart(4, '0')}`;
}

Summary: Quick Choices

This concludes the Symbol Showdown series on SymbolFYI. Throughout these eight articles, we've navigated the confusable, misused, and under-appreciated corners of Unicode — from dashes to dots, spaces to scripts. Use our Character Analyzer and Unicode Lookup tools any time you need to identify an unknown character or verify you're using the right one.

Explore the full series: Symbol Showdown Series