Centering a capital letter with max. possible dimensions in a circle

Question

I require below requirements with pure CSS. What I tried unsuccessfully for my aim at http://jsfiddle.net/5rH5R/

what I try to achieve with a generic image:

and verbally:

• One letter in a circle which is centered in both directions
• Letter in circle will be dynamic so CSS setting shouldn't be for some specific letters only (will be the first letter of the comment author's name)
• diameter of the circle may be changed in the future (40px for the time being)
• letter must not overflow out of the circle
• letter must be as large as possible
• I don't have any font-family restriction. If answer requires monospace family, it's OK.

the code in jsfiddle link is given below. Can you please help me if this is achievable?

HTML

<p><span class="step"><span class="letter">Ş</span></span></p>

CSS3

html5doctor.com CSS resetting CODE here

.step {
  background: #cccccc;
  border-radius: 2.5em; /* 40px */
  -moz-border-radius: 2.5em; /* 40px */
  -webkit-border-radius: 2.5em; /* 40px */
  color: #ffffff;
  display: inline-block;
  font-weight: bold;
  line-height: 5em;  
  text-align: center;
  width: 5em;
  font-size:1em;}

.letter{font-size:5em;background:orange;position:relative;top:.1em;}

Answer 1

I changed your CSS a little:

.step {
      background: #cccccc;
      border-radius: 50%; /* 40px */
      -moz-border-radius: 2.5em; /* 40px */
      -webkit-border-radius: 2.5em; /* 40px */
      color: #ffffff;
      display: inline-block;
      font-weight: bold;
      line-height: 5em;  
      text-align: center;
      width: 5em;
      height: 5em;
      font-size:1em;
}
.letter{
      font-size:4em;
}

Basically I set width and height of step to be the same. I set border-radius to 50%, which will always create a circle if the width and height are the same, even if the dimensions change in the future.

You can play with the font-size of the .letter a bit to make the letter as big as possible.