テキストだけで色々遊べますね。 文字をちょっと加工して表現しようと思うとすぐ画像にしたくなります。しかし画像にすると再利用性も悪いですし、バイナリの分重たくなります。文字を円に沿って表現するくらいであればCircleType.jsで十分事足りますよ。 デモ。radiusをオプション指定するだけで使えます。jQueryプラグインなので簡単に使えますね。 逆さもできます。この場合のオプションはdirを-1とするだけです。 完全な円形にもできます。オプション指定はなしです。 ここまでは画像でもできることなのでCircleType.jsを使いたいと思わせるには弱いかも知れません。しかし真骨頂はここからです。 fluidを指定すると幅変更に対応できるようになります。 さらにfitTextを指定するとレスポンシブに幅を変更しても見やすさを維持できます。 幅を変更した場合。文字サイズが自動的に調整されます。 CircleType.jsではCSSのstyle属性によって文字を回転して配置します。画像とは異なり拡大、縮小によって柔軟にデザインが変更できるのがメリットと言えるでしょう。 またJavaScriptと連携させたり、文字色をプログラミングで可変にできるのも利点です。画像とは違う使い方がそこにはあるはずです。Web Fontと組み合わせればロゴ風の表示も十分可能です。 レスポンシブWebデザインは画像リソースは共通化されてしまうのでサイズが大きいままでスマートフォンにとっては不便です。だからこそテキストを使う価値があると言えそうですね。 CircleType.jsはJavaScript製、GPL/MIT Licenseのオープンソース・ソフトウェアです。 CircleType.js lets you set type on a circle peterhry/CircleType