Dotted text in css?

Question

Is it possible to make dotted text with css?

I know that the obvious thing would be to use a dotted font, but If I only need to use dotted text sparingly, then having the user to download a whole font might be overdoing it.

The idea that I had was to overlay the text with a pseudo element with a background pattern of small transparent circles with a white background.

Some thing like this:

<div class="dottedText">Some dotted text</div>

FIDDLE

CSS

.dottedText:after
{
    content: '';
    position:absolute;
    left:0;
    top:0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, transparent 50%, transparent 50%),
    radial-gradient(circle, transparent 20%, white 50%) 30px 30px;
    background-size:4px 4px;
}

I think I might be close, but the above solution won't work properly if you change the font-size.

I'm looking for a solution where

1) The dots will increase in size as font-size increase, and

2) preferably each letter should only be shown with only one single line of dots - not the double line as it is now.

Edit: When I say one single line of dots - I mean that each stroke should be made up of only one dot. For example: In the above picture notice that the 'm' char has 2 columns of dots....well I would prefer only one.

Ideally something like this (taken from here):

(I'm not sure, but possibly the radial gradient needs to be tweaked to do this)

Edit:

1) I don't mind which font is used - so long as it's a built-in font. (Even a monospace font is ok)

2) The solution need not work in every browser. (So a webkit only solution will be fine)

Answer 1

To be honest, this answer may sound funny or weird, but am not sure whether its possible with CSS ONLY (As you haven't tagged any other languages), even if its, it would be an overkill to do so, and hence it makes sense in using a dotted font instead of writing too many lines of CSS.

Even if you rule out IE, you will have only single .woff file which I think is very much normal, as it will increase your http request by one, and surely it won't be over bloated much as you think.

List of cool dotted fonts can be found over here. Convert the ttf,using Font Squirrel Service.

Make sure you have permission to do so.

---

Demo Fonts used : Dotline

^{(Files are hosted on my own server, enabled CORS because the demo failed on Firefox)}

If you are not looking to support crappy IE, only file you will need is woff and that's merely 23kb