Vuetify title and subtitle not aligned left

Question

I have this vuetify code:

    <div class="mb-6">
      <h1 class="text-h4">
        {{title}}
      </h1>
      <p class="subtitle-1 font-weight-thin" v-if="subtitle">{{subtitle}}</p>
    </div>

Which produces a title and subtitle that are not aligned vertically, as visible there:

The left-space between the title M is wider that the subtitle one.

Any idea why? I reckon this is the first time I have such an issue, hence I believe this is a Vuetify typography issue.

I tried playing with the letter-spacing CSS property without success: it changes the space between the letters but not in front. I also tried playing with margin-block-start CSS property, but it doesn't change anything.

Thanks for the help

Answer 1

It's not a vuetify or letter-spacing issue. This comes from font you are using. Vuetify uses Google’s Roboto font by default.

There's a playground at Google fonts with Roboto font. You may notice that the problem you mentioned is present here as well. By example, there's some space in Regular 400 @64px:

Let's test your code using a different font. By example, I'll use CSS font-family: serif !important; that fallbacks to Times New Roman at Windows platforms:

Looks fine, no spacings.

So one solution to fix your problem is to change the font. I believe that there are fonts that are more suitable for websites than Times and that do not have such a problem.

According to Vuetify docs, you can change a font for the whole project with one line in src/sass/variables.scss file. Keep in mind that this cause project to build much longer:

$body-font-family: 'Work Sans', serif;

Possibly you don't want to change a font. So you can change the whole string's position this way:

.text-h4::first-letter {
   margin-left: -0.04em;
}

In this case, the unselected lines will align a little, but there will be problems with selection:

Maybe this SO question will also help you. And there's a playground at CodePen where you can test some solutions.