Grow your CSS skills. Land your dream job.

Set Text on a Circle

Published by Chris Coyier

There isn't any super simple standardized way to set web type on a circle (or any kind of curve). But it can be done! We'll explore one way to do it here. But be forewarned, we're going to use some CSS3 and JavaScript and not give two hoots about older browsers that don't support some of the required tech. If you're interested in this for a real project, this kind of thing is probably still best served by and image with proper alt text, or proper feature detection which can flip out the image for this fancy technique in browsers that can handle it.

An Example


View Demo   Download Files   Go Play on CodePen

Let's proceed with something a bit simpler.

The Entire Process

Let's take simple phrase for example:

Imagine if we took the words we were trying to set in a circle and broke them apart into individual letters.

Let's make sure each box is the same exact size by using a monospace font.

Now let's make each of those boxes long, like a bicycle wheel spoke.

Then we bundle up all those spokes so they are all right on top of each other.

Now imagine we afix the ends of those spokes to a central hub. We rotate each spoke just a little bit more than the last one.

If we rotate the parent element counter-clockwise and remove our red guides, we have some text on a circle!

Technical Bits

To be able to manipulate each letter like that, you have to wrap them in another element. Lettering.js can do that for you easily (jQuery and plugin dependency).

So you have this.

<h1>Established 2012</h1>

You load jQuery and Lettering.js and then call this:

$("h1").lettering();

And it turns into this in the DOM:

<h1>
  <span class="char1">E</span>
  <span class="char2">s</span>
  <span class="char3">t</span>
  <span class="char4">a</span>
  <span class="char5">b</span>
  <!-- you get the idea -->
</h1>

This really only works well with monospaced fonts. Even if you force monospaced-ness by setting each span to a fixed with, the space between each letter will be wrong and it will look weird. You could manually kern it by manually adjusting each rotation if you were nuts.

For each span, you want to set the height, position them all in the same spot, and then set the transform-origin to the bottom of the box (so they rotate around that hub. Vendor prefix that).

h1 span {
  font: 26px Monaco, MonoSpace;
  height: 200px;
  position: absolute;
  width: 20px;
  left: 0;
  top: 0;
  transform-origin: bottom center;
}

Now you need a whole bunch of class name selectors, each that rotates by a bit more.

.char1 { transform: rotate(6deg); }
.char2 { transform: rotate(12deg); }
.char3 { transform: rotate(18deg); }
/* and so on */

But imagine that with every vendor prefix as well, pretty messy. With Sass and Compass it's a three-liner:

@for $i from 1 through 100 
  .char#{$i} 
    +transform(rotate(($i*6)+deg))

Demo and Download

View Demo   Download Files   Go Play on CodePen

Taking things a bit further, we could get a little more finicky and fancy:


Or how about setting text on a spiral?

Update

Here's a Sass (.sass) mixin from Chris Eppstein for a more extensible text rotation mixin:

=rotated-text($num-letters: 100, $angle-span: 180deg, $angle-offset: 0deg)
  $angle-per-char: $angle-span / $num-letters;
  @for $i from 1 through $num-letters
    .char#{$i} 
      +transform(rotate($angle-offset + $angle-per-char * $i))

Comments

  1. That’s a very neat trick.

  2. Round logos have become quite big on the internet now. This should make it even better now!

    What would be good is a JavaScript plugin that does that too; you just set the height (radius) and it does it for you.

    • Yes, a JavaScript plugin would be awesome. :)

      This article is very useful, though. Thank you!

  3. So if I my noggin’ understands correctly then my example is still skewy because of Helvetica?
    Transform origin helped but text still looks wack fo show.

    http://codepen.io/grayghostvisuals/pen/volume-knobs/34

    • Awesome example Grey Ghost! You maybe already aware of this, but I think part of the reason the numbers look a little skewy on the dials is you’ve used tags and by default they have a font-style of “italic”.

      If you add:

      i {font-style: normal;}

      to your css it improves it (I reckon). Maybe still not quite perfect but it would fool the majority of eyes…

    • Qbit
      Permalink to comment#

      Yes the italic font makes it look weird, but it still is a great idea.

      Here is another hint for you:
      On hover you rotate the knobs, which looks great, but the shadow gets rotated too. This makes the whole knob wobble around a wrong emphasis. You can avoid this by creating a separate fake element just behind the knob to drop a shadow and don’t rotate that element. I think this could be achieved by using pseudo elements only but already used them for the outer ring.

  4. It is always good to test the limits of a technique, but I’d say this is not for production sites. And it never will be.

    Putting every letter in a span, what does that do for accessibility? Probably make the text illegible. SEO? Down the drain.

    SVG is the tool for this job. And yes, Google does index SVG these days.

  5. Very similar to this only you don’t need to type any CSS
    but its a good practice to be able to generate code and cool effects from scratch, isn’t it.

    • Aaron H
      Permalink to comment#

      Hey Dan. This was a wonderfull suggestion. I was looking something similar for this. I can even create links out of the codes. Thank you so much for sharing it

  6. william malo

    SVG!

  7. Bhaskar Machcha

    Hey,
    Chris i liked this…!

  8. Amazing technique, just a shame the font renders a bit pixellated, too much so for this to be worth using over an image.

  9. peter
    Permalink to comment#

    <grammarnazi-mode>
    not give two hoots about older browsers that doesn’t support
    -> browsers that don’t support …
    </grammarnazi-mode>

    Nice article though.

  10. Permalink to comment#

    Hi !

    I said on CodePen, those kind of tricks are pretty neat. Too bad it’s a pain in the ass to do that without a tool like SASS. Loops (especially For loops) really need to be implemented into CSS standards one day or the other.

    Anyway, thanks for sharing, awesome demo !

    • cnwtx
      Permalink to comment#

      They are, sorta. You can use counters inside of nth-child(n) situations to end up with something similar to a loop.

  11. Very cool technique. I refactored it a bit using ems to recursively draw the spiral resulting in a much smaller CSS and HTML file. I love Sass loops but they can spit out a ton of code.

    http://codepen.io/scottkellum/pen/101/

  12. Another extremely good post. I’ll try this out. Thanks.

  13. Casey Dennison
    Permalink to comment#

    Why is this so freakin’ awesome?

  14. Permalink to comment#

    The combination of SCSS, Compass, and CSS3 is simply amazing. Great stuff, Chris.

  15. This is beautiful. As a reader above put it – it’s not so good for SEO, and, of course you can always use a graphic instead. Nonetheless I’m impressed. What a beautiful and elegant use of CSS.

  16. Viswanathan
    Permalink to comment#

    This is awesome.
    But we can rotate each character with single css class itself. Not required to create each css class for each character.
    Try fun here

    http://jsfiddle.net/3EUfs/

  17. Nice! I think I will use this in the future! :)

  18. This is a seriously cool trick.

  19. This is really cool, however as Gilbert said above what are the implications for SEO purposes?

    I guess you would use this for a logo and usually logos are images with alt text so I guess this would not hurt your SEO that much if at all?

  20. There is now a ton of comments on this post which all boil down to one of these 2 positions:

    a. “This is so cool”, “I will use it”

    b. “SVG is a much better fit for the task at hand”.

    Since there are still a lot of comments coming from the (a) crowd, (readers who comment without reading previous comments?) would it be too much to ask for an update on the introductoty paragraph, mentioning the superiority of SVG and not only images using alt-text?

    To re-iterate, why is SVG better?

    1. SEO
    2. Accessibility
    3. Simplicity, making it easier to update, re-use or tweak the text
    4. Power: You can add more graphics effects to the tex.

  21. cnwtx
    Permalink to comment#

    I wish this worked:

    #phrase:nth-letter(n) {transform:rotate(counter(spiral-counter));}
    

    Then set the counter to increment by the number of degrees needed to make it work.

  22. Permalink to comment#

    Somewhat new to LESS CSS, so excuse my ignorance, but would you be able to create a similar variable equation like you specified with Sass?

    • Permalink to comment#

      I should clarify, I’m just wondering if it’s possible. Not soliciting for someone to actually write it.

    • LESS doesn’t do loops traditionally like that. There may be some fancy way to do it with recursive mixins but it would look kinda convoluted (my opinion).

  23. emrah
    Permalink to comment#

    this is cool with Sass but writing pure css is just a wasteful.

  24. rw
    Permalink to comment#

    nice, tried it ou in SCSS

    .master {
      position: relative;
      width: 250px;
      height: 250px;
    
      & span {
        height: 200px;
        width: 20px;
    
        position: absolute;
        left: 0;
        top: 0;
    
        transform-origin: bottom center;
      }
    }
    
    @for $i from 1 through 20 {
      $num-letters: 20;
      $angle-span: 180deg;
      $angle-offset: 0deg;
      $angle-per-char: $angle-span / $num-letters;
    
      @function lettering( $i ) {
        @return rotate( $angle-offset + $angle-per-char * $i );
      }
    
      .char#{ $i } {
        transform: lettering( $i );
      }
    }
    
  25. awesome awesome, spiral text just made my day!! ;)

  26. Miles
    Permalink to comment#

    I’m sure google is going to love you for that :3

    -Miles

  27. Ben
    Permalink to comment#

    This is cool but not practical. It’ll take me less time to whip up this logo in illustrator or photoshop than monkeying with the code for this.

  28. Super cool! Thanks for sharing. I wish other commenters wouldn’t wouldn’t be haters and just appreciate this css for what it is. We’re all knowledgeable developers around here and we can determine a proper application for this trick.

  29. Hamid
    Permalink to comment#

    waw! Interesting and also perfect example, nice job.
    btw i guess we can use some transition for a cool effect.

  30. Permalink to comment#

    Awesome trick and amazing results. Text is looking awesome in circle.

  31. Tosh
    Permalink to comment#

    Like some said this Is a lot easier and consistent with svg. If you use raphael js you can even get it to work on ie6.

  32. This is a bit off topic: But what’s the name of the color scheme that CodePen uses for syntax highlighting? It’s really neat. :)

  33. Setting text on a Spiral is a roller coaster ride

  34. Permalink to comment#

    Trying to get the hang of mixins… I have a .SCSS variation of the rotated-text example and I’m not sure how to get it to “execute”. Right now, it’s adding no CSS for the .char#.

    Everything I try causes and error in CodeKit. Here is what I have:

    @mixin rotated-text($num-letters: 100, $angle-span: 180deg, $angle-offset: 0deg) {
        $angle-per-char: $angle-span / $num-letters;
        @for $i from 1 through $num-letters {
            .char#{$i} {
                @include transform(rotate($angle-offset + $angle-per-char * $i))
            }
        }
    }
    

    What else do I need to “do” this?

  35. Mike
    Permalink to comment#

    Nice trick. But this only curves a sentence. Is that possible to curve a series of divs which makes up many sentences? eg. Hairy Croc (0deg); Blue Cat (30deg); Brown fox (60 deg); Purple lizard (90 deg); White toothless lion (120 deg); Green dingo (150 degree)…

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".