Flex vertical/horizontal center-align doesn't really center vertically

I'm using flex box to align a piece of text (one letter actually) vertically and horizontally. HTML looks like this:

<div class="initial">M</div>

with the CSS being:

.initial {
    background-color: #fff200;
    color: #ed1c24;
    height: 30px;
    width: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    font-size: 16pt;
    font-weight: bold;
    text-transform: uppercase;
}

I expect this to completely centre letter M inside the circle. Instead, it's shifted ever so slightly to the top of the container - see this screenshot:

Adding line-height: 30px makes no difference. I can properly vertically centre it by setting line-height: 34px - but that's wrong; this fixes displays in firefox, but breaks in chrome. The text really should be centre-aligned!

In firefox, the issue is more pronounced than in chrome. Here's the jsfiddle of it.

Is there any way to centre the text without the extra pixels on line height?

EDIT: I appreciate that some people can't replicate the problem. I also realise I missed the font in my fiddle - the font is set on the document. The font in use is font-family: Helvetica,Arial,sans-serif. I see this issue in firefox on both my Mac (El Capitan) and Linux (Mint 17.3). I don't have a windows machine to check. The biggest problem is the inconsistency.