Numbers Not on Same Line

Question

I'm new to SVG and have been putting numbers in text tags for a week or two with no issues. It seemed straightforward. Now, strangely, I'm having an issue in which, no matter what numbers I put in, there is a dip in the second number.

Here is a pic to show you what is happening. The number "63" is supposed to be all on the same plane with itself, though a bit below the "This Week" designation. Instead, the '3' is dipping down lower. Pic of my problem.

My code:

   <div class = "chartbox">

        <div class = "svgcontainer" >

            <svg class = "chart"  width="590" height="440" role="img">
                <g class = "bigbox">


                    <text x="346" y = "35" class = "blurbhed">This Week </text>
                    <text x ="491" y ="44" class = "blurbdeck"><?php echo round($kms_for_table[0]);?></text><text x ="540" y ="48" class = "blurbkm"><?php echo "km";?></text>

                </g>
            </svg>
        </div>
    </div>

The CSS:

body {  background-color: #1C1816;

font-family: Raleway, Gotham-Rounded, Arial , sans-serif;}


.blurbhed {
    font-size: 1.5em;
    font-weight: 600;
    fill: #650a5d;
    letter-spacing: .3px;


}

.blurbdeck {
    font-size: 2.7em;
    font-weight: 600;
    fill: #08292e;
    letter-spacing: .4px;

}

.blurbkm {
    font-size: 1.3em;
    font-weight: 600;
    fill: #08292e;
    letter-spacing: .4px;

}
.svgcontainer {
    display: block;
    position: relative;
    border: 10px solid purple;
    background-color: lightyellow;
    margin-left: 10px;
    height: 453px;
    width: 630px;
    margin-top: 0px;
    margin-bottom: 20px;
    text-align: center;
    margin-right: 50px;

}

.chartbox {
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: auto;
    width: 800px;
    margin-bottom: 10px;
    padding-top: 20px;
}

The same problem happens wherever I move the text around the svg element. It occurs with a variety of fonts, and with different numbers. It happens whether I just have it echo the number or have it generated by the code from my model. I also tried making a completely new text element in a different spot, and the same weird dip in the second number occurs.

I'm sure this is really simple, but I've been fiddling with it far too long and am hoping someone can help me out. Thank you!

Answer 1

There's a proper solution for this that allows you to continue using Raleway:

You need to do two things:

1. Add CSS instructing the browser to use the lining-figures
2. Avoid pre-optimised font files (as served by Google Fonts.)

The CSS:

body {
    font-variant-numeric: lining-nums;
    font-feature-settings: "lnum";
}

Alternative CDN (Brick):

<link rel="stylesheet" href="//brick.a.ssl.fastly.net/Raleway:400">

The problem with Google Fonts is that it minimises font download size by removing 'unnecessary' glyphs and meta-data. In particular in this case, it removes the lining-nums variation of figures from Raleway. (You can try adding &subset=all to a Google Font URL to circumvent this, but this doesn't appear to be reliable.)