Texte en cercle en CSS : guide complet débutant

Vous avez déjà vu ces logos avec du texte en cercle, ces badges ronds où les lettres épousent parfaitement une forme circulaire ? Bonne nouvelle : vous pouvez faire la même chose en CSS. Vous allez apprendre comment écrire du texte en cercle ou en arc de cercle en CSS.

• Comprendre comment créer un texte en cercle ou en arc de cercle.
• Maîtriser deux approches efficaces pour adapter le rendu à vos besoins graphiques, du logo rond au badge professionnel.
• Ajouter une touche design et moderne à vos projets web tout en gardant un code propre et lisible.

Nous allons voir plusieurs méthodes, comprendre leurs avantages, leurs limites, et surtout… décortiquer chaque ligne de code pour que vous sachiez exactement ce que vous faites.

Pourquoi créer du texte en cercle ?

Avant de plonger dans le code, prenons une seconde pour comprendre l’intérêt du texte en cercle.

On l’utilise souvent pour :

• des logos ronds
• des badges promotionnels
• des sceaux ou tampons graphiques
• des designs créatifs modernes

Ce type de mise en forme attire immédiatement l’œil. Il casse la rigidité des blocs rectangulaires classiques du web. Bref, c’est un excellent moyen d’ajouter une touche design à votre site.

Maintenant, voyons comment faire concrètement.

Méthode 1 : Le texte en cercle avec transform (100% CSS)

Commençons par une méthode simple et pédagogique. Ici, nous allons positionner chaque lettre autour d’un cercle grâce à la propriété transform.

Oui, cela peut sembler un peu technique. Mais rassurez-vous : on va décortiquer tout ça.

Étape 1 : La structure HTML

<div class="cercle">
  <span>T</span>
  <span>E</span>
  <span>X</span>
  <span>T</span>
  <span>E</span>
  <span> </span>
  <span>E</span>
  <span>N</span>
  <span> </span>
  <span>C</span>
  <span>E</span>
  <span>R</span>
  <span>C</span>
  <span>L</span>
  <span>E</span>
  <span> </span>
</div>

Pourquoi mettre chaque lettre dans un <span> ?

Parce que nous allons faire pivoter chaque lettre individuellement autour du centre du cercle. Si vous laissez le texte dans un seul bloc, vous ne pourrez pas contrôler chaque caractère.

Étape 2 : Créer la base du cercle

.cercle {
  position: relative;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  margin: 50px auto;
}

Explications :

• position: relative; permet aux éléments internes de se positionner par rapport à ce conteneur.
• width et height définissent la taille.
• border-radius: 50%; transforme le carré en cercle.

Même si vous ne voyez rien pour l’instant, le cercle existe.

Étape 3 : Positionner les lettres

.cercle span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: 0 150px;
}

C’est ici que la magie commence.

• position: absolute; permet de positionner chaque lettre précisément.
• left: 50%; top: 50%; place chaque lettre au centre du cercle.
• transform-origin définit le point autour duquel la lettre va pivoter.

Ici, 150px correspond au rayon (la moitié de 300px).

Étape 4 : Faire tourner chaque lettre

.cercle span:nth-child(1) { transform: rotate(0deg); }
.cercle span:nth-child(2) { transform: rotate(15deg); }
.cercle span:nth-child(3) { transform: rotate(30deg); }
.cercle span:nth-child(4) { transform: rotate(45deg); }
/* etc... */

Chaque lettre est tournée d’un certain angle.

Si vous avez 24 lettres, vous pouvez diviser 360° par 24 pour obtenir l’angle exact entre chaque caractère. Dans notre exemple, nous avons 16 caractères (espaces compris), donc 360/16 = 22,5.

Et voilà : votre texte en cercle en CSS est fonctionnel.

Limites de cette méthode

Soyons honnêtes : cette solution fonctionne, mais elle devient vite lourde si le texte est long. Heureusement, il existe une méthode plus élégante.

Méthode 2 : Le texte en cercle avec SVG (solution moderne et propre)

Si vous voulez un résultat plus flexible, plus propre et plus professionnel, SVG est votre meilleur allié.

Voici un exemple complet :

<svg id="txtcercle" width="170" height="170" viewBox="0 0 300 300">
  <defs>
    <path id="chemin-cercle"
          d="M150,150
             m-100,0
             a50,50 0 1,1 100,0
             a50,50 0 1,1 -100,0" />
  </defs>

  <text font-size="20" fill="#333">
    <textPath href="#chemin-cercle">
      Texte en cercle CSS - Texte en rond -
    </textPath>
  </text>
</svg>

On va analyser ce code…

Comprendre le chemin circulaire

La ligne complexe :

a50,50 0 1,1 100,0

définit un arc.

En résumé :

• a50,50 définit le rayon
• 100,0 définit la distance horizontale
• les chiffres intermédiaires contrôlent le sens de l’arc

Oui, c’est un peu technique. Mais vous n’avez pas besoin de tout mémoriser. Retenez simplement que ce code crée un cercle invisible.

Des formations informatique pour tous !

Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…

Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.

Découvrez mes formations Qui suis-je ?

Le cercle est défini par le <path> (rayon 100px, centré en 150/150). Le CSS ne sert donc pas à “créer” le cercle, mais à :

• centrer correctement le texte
• équilibrer l’espacement
• orienter le point de départ
• éventuellement animer

Voici le CSS propre et complet pour un rendu circulaire parfait :

#txtcercle {
  display: block;
  margin: 0 auto;
}

#txtcercle text {
  font-family: Arial, sans-serif;
  font-size: 18px;
  fill: #333;
}

Pourquoi SVG est plus intéressant ?

Parce que :

• le texte reste fluide
• il s’adapte automatiquement
• vous n’avez pas à gérer chaque lettre
• le rendu est parfait sur tous les écrans

Pour un texte en arc de cercle en CSS, c’est clairement la meilleure solution.

Créer un demi-cercle ou arc de cercle

Parfois, vous ne voulez pas un cercle complet, mais seulement un arc supérieur.

Il suffit de modifier le chemin SVG.

Exemple :

<svg width="300" height="200" viewBox="0 0 300 200">
  <path id="arc"
        d="M50,150
           a100,100 0 0,1 200,0"
        fill="transparent" />

  <text font-size="20">
    <textPath href="#arc">
      Texte en arc de cercle
    </textPath>
  </text>
</svg>

Ici :

• 0 0,1 change la direction de l’arc
• vous obtenez uniquement la partie supérieure

Et voilà un texte en arc de cercle propre et moderne.

Ajouter du style CSS et une animation sur orbite

Le texte en cercle n’est pas qu’un effet technique. Il doit aussi être esthétique.

Vous pouvez styliser le texte normalement :

text {
  font-family: Arial, sans-serif;
  letter-spacing: 3px;
  text-transform: uppercase;
}

Un petit letter-spacing améliore souvent le rendu circulaire.

Vous pouvez également ajouter une animation :

svg {
  animation: rotation 10s linear infinite;
}

@keyframes rotation {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

Et là… votre texte en cercle tourne doucement en orbite. Effet garanti.

Code HTML et CSS complet pour un texte en cercle et animé

<div class="wrapper">
  <div class="badge">

    <svg viewBox="0 0 300 300" class="cercle-svg">

      <defs>
        <path id="circlePath"
              d="M150,150
                 m-120,0
                 a120,120 0 1,1 240,0
                 a120,120 0 1,1 -240,0" />
      </defs>

      <text>
        <textPath 
          href="#circlePath"
          startOffset="50%"
          text-anchor="middle"
          textLength="754"
          lengthAdjust="spacing">
          ✦ TEXTE EN CERCLE EN CSS ✦ TEXTE EN CERCLE EN CSS ✦
        </textPath>
      </text>

    </svg>

    <div class="center-dot"></div>

  </div>
</div>

/* Conteneur principal */

.wrapper {
  perspective: 1000px;
}

/* Badge circulaire */

.badge {
  width: 340px;
  height: 340px;
  position: relative;
  border-radius: 50%;
  background: #ffffff;
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.05),
    0 2px 10px rgba(0, 0, 0, 0.03);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.6s cubic-bezier(.25,.8,.25,1),
              box-shadow 0.6s cubic-bezier(.25,.8,.25,1);
}

/* Animation rotation douce */

.cercle-svg {
  width: 100%;
  height: 100%;
  animation: rotateCircle 30s linear infinite;
}

/* Texte circulaire */

text {
  font-size: 18px;
  letter-spacing: 4px;
  fill: #1d1d1f;
  text-transform: uppercase;
  font-weight: 500;
}

/* Point central élégant */

.center-dot {
  position: absolute;
  width: 40px;
  height: 40px;
  background: linear-gradient(145deg, #e3e6eb, #ffffff);
  border-radius: 50%;
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,0.05),
    0 4px 10px rgba(0,0,0,0.08);
}

/* Rotation ultra fluide */

@keyframes rotateCircle {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Interaction élégante */

.badge:hover {
  transform: rotateX(6deg) rotateY(6deg) scale(1.03);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.08),
    0 10px 20px rgba(0, 0, 0, 0.05);
}

Quelle méthode choisir ?

Si vous débutez totalement, la méthode transform vous aide à comprendre la logique mathématique derrière le cercle.

Mais dans un projet réel ?

• Choisissez SVG.

• C’est plus propre.
• Plus flexible.
• Plus professionnel.

Et surtout, c’est plus simple à maintenir.

Accessibilité et bonnes pratiques

Petit point important.

Le texte en cercle reste du texte. Il doit être lisible :

• évitez les tailles trop petites
• évitez les contrastes faibles
• testez sur mobile

Un design original ne doit jamais sacrifier la clarté.

---

Créer du texte en cercle en CSS peut sembler impressionnant au premier abord. Pourtant, une fois que vous comprenez le principe — rotation autour d’un point ou texte suivant un chemin SVG — tout devient logique.

Au-delà de l’effet visuel, c’est une excellente manière de progresser en CSS. Vous manipulez les transformations, les positions absolues, le SVG, les chemins… Bref, vous montez d’un niveau.

Et puis entre nous : voir son propre texte épouser parfaitement un cercle, ça a quelque chose de satisfaisant. Presque hypnotique.

Maintenant, à vous de jouer. Testez, modifiez, expérimentez. Le web est votre terrain de jeu.