How to animate every single letter without the text size changing

Question

I am trying to make every single letter get bigger on hover. I got that animation but I want to get rid of the whole sentence to move. I tried using absolute positioning; it did

Answer 1

Instead of animating the font-size property you could animate transform: scale()

h1 {
            text-align: center;
            
        }
        span {
            font-size: 3em;
            display: inline-block;
        }
        div:hover span {
            animation: .3s letters forwards;
        }
        #let-2 {
            animation-delay: .1s;
        }
        #let-3 {
            animation-delay: .2s;
        }
        #let-4 {
            animation-delay: .3s;
        }
        #let-5 {
            animation-delay: .4s;
        }
        #let-6 {
            animation-delay: .5s;
        }
        #let-7 {
            animation-delay: .6s;
        }
        #let-8 {
            animation-delay: .7s;
        }
        #let-9 {
            animation-delay: .8s;
        }
        #let-10 {
            animation-delay: .9s;
        }
        @-webkit-keyframes letters {
            from,to {transform: scale(1);}
            50% {transform: scale(1.3);}
        }
        @keyframes letters {
            from,to {transform: scale(1);}
            50% {transform: scale(1.3);}
        }

    

        Sample
     Text