CSS Font Size .5 Increments

Point values are really only for print CSS.

Quoting Chris C:

A point is a unit of measurement used for real-life ink-on-paper
typography. 72pts = one inch. One inch = one real-life inch
like-on-a-ruler. Not an inch on a screen, which is totally arbitrary
based on resolution.

Source: http://css-tricks.com/css-font-size/

The W3C Tips page suggest avoiding them for screen:

The so-called absolute units (cm, mm, in, pt and pc) mean the same in
CSS as everywhere else. A length expressed in any of these will appear
as exactly that size (within the precision of the hardware and
software). They are not recommended for use on screen, because screen
sizes vary so much. A big screen may be 60cm (24in), a small, portable
screen is maybe only 8cm. And you don't look at them from the same
distance.

Source: http://www.w3.org/Style/Examples/007/units.en.html

How to increment font size changes with jQuery?

You could do so :

var fontSize = parseInt($("body").css("font-size"));
fontSize = fontSize + 1 + "px";
$("body").css({'font-size':fontSize});

jsFiddle example here

What exactly is the font-size?

It represents the size taking as reference the top of the highest letter like a 'I' and the bottom of a descender character like a 'p'

You can find more information on this page

Regards.

Change font height and width

CSS transform has the scale function for this:

p {
  display: inline-block;
  font-size: 32px;
  transform: scale(.5, 1);
}

<p>This is text.</p>

Rationale behind font sizes in bootstrap

They haven’t exactly specified font size 31.5px, instead they specified base font size and coefficients for headings, see code:

// file: variables.less
@baseFontSize:          14px;

// file: type.less
h1 { font-size: @baseFontSize * 2.75; } // ~38px
h2 { font-size: @baseFontSize * 2.25; } // ~32px
h3 { font-size: @baseFontSize * 1.75; } // ~24px
h4 { font-size: @baseFontSize * 1.25; } // ~18px
h5 { font-size: @baseFontSize; }
h6 { font-size: @baseFontSize * 0.85; } // ~12px

Users of bootstrap are free to customize base font size, if they want to, in their custom builds; font size in heading will change automatically and proportionally, that’s the point.

Subtle font size animation over short distances with long durations in jQuery

Another option would be direct manipulations css transformations - here's an example (I only included webkit css to make it readable, but similar functions exist in all modern browsers). The "ease-out" property includes the fast-then-slow functionality you were aiming for. It's certainly smoother than what you've been able to get so far, but it's quite blurry - not sure if it's a trade-off you'd want to make. And as it's an experimental property, you'd still probably want your existing jQuery animation as a fallback for older browsers.

Increment is not working correctly in for loop

It's just as @Carcigenicate and @collapsar said on the comments; try parsing currentSize as a number.

  function move(evt) {
    var text = evt.target;
    var currentSize = parseInt(text.getAttribute("font-size")); // <- Parse the currentSize as int
    var timer = 0;
    for (let i = currentSize; i < 11000; i += 2) {
      function changeText() {
        text.setAttribute("font-size", 58);
        console.log(i);
      }
      setTimeout((changeText), timer);
      timer = timer + 40;
    }
  }

CSS for star ratings via FontAwesome

The overflow:hidden needs to be on 'stars-active' (the sized element) instead of 'score-wrap' (which never overflows.) You can use white-space: nowrap to prevent the stars from wrapping to the next line within the hidden-overflow container.

.score {  display: block;  font-size: 16px;  position: relative;  overflow: hidden;}
.score-wrap {  display: inline-block;  position: relative;  height: 19px;}
.score .stars-active {  color: #EEBD01;  position: relative;  z-index: 10;  display: inline-block;  overflow: hidden;  white-space: nowrap;}
.score .stars-inactive {  color: grey;  position: absolute;  top: 0;  left: 0;  -webkit-text-stroke: initial;  /* overflow: hidden; */}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<span class="score">    <div class="score-wrap">        <span class="stars-active" style="width:88%">            <i class="fa fa-star" aria-hidden="true"></i>            <i class="fa fa-star" aria-hidden="true"></i>            <i class="fa fa-star" aria-hidden="true"></i>            <i class="fa fa-star" aria-hidden="true"></i>            <i class="fa fa-star" aria-hidden="true"></i>        </span><span class="stars-inactive">            <i class="fa fa-star-o" aria-hidden="true"></i>            <i class="fa fa-star-o" aria-hidden="true"></i>            <i class="fa fa-star-o" aria-hidden="true"></i>            <i class="fa fa-star-o" aria-hidden="true"></i>            <i class="fa fa-star-o" aria-hidden="true"></i>        </span></div></span>
<span class="score">    <div class="score-wrap">        <span class="stars-active" style="width:50%">            <i class="fa fa-star" aria-hidden="true"></i>            <i class="fa fa-star" aria-hidden="true"></i>            <i class="fa fa-star" aria-hidden="true"></i>            <i class="fa fa-star" aria-hidden="true"></i>            <i class="fa fa-star" aria-hidden="true"></i>        </span><span class="stars-inactive">            <i class="fa fa-star-o" aria-hidden="true"></i>            <i class="fa fa-star-o" aria-hidden="true"></i>            <i class="fa fa-star-o" aria-hidden="true"></i>            <i class="fa fa-star-o" aria-hidden="true"></i>            <i class="fa fa-star-o" aria-hidden="true"></i>        </span></div></span>
<span class="score">    <div class="score-wrap">        <span class="stars-active" style="width:100%">            <i class="fa fa-star" aria-hidden="true"></i>            <i class="fa fa-star" aria-hidden="true"></i>            <i class="fa fa-star" aria-hidden="true"></i>            <i class="fa fa-star" aria-hidden="true"></i>            <i class="fa fa-star" aria-hidden="true"></i>        </span><span class="stars-inactive">            <i class="fa fa-star-o" aria-hidden="true"></i>            <i class="fa fa-star-o" aria-hidden="true"></i>            <i class="fa fa-star-o" aria-hidden="true"></i>            <i class="fa fa-star-o" aria-hidden="true"></i>            <i class="fa fa-star-o" aria-hidden="true"></i>        </span></div></span>
<span class="score">    <div class="score-wrap">        <span class="stars-active" style="width:0%">            <i class="fa fa-star" aria-hidden="true"></i>            <i class="fa fa-star" aria-hidden="true"></i>            <i class="fa fa-star" aria-hidden="true"></i>            <i class="fa fa-star" aria-hidden="true"></i>            <i class="fa fa-star" aria-hidden="true"></i>        </span><span class="stars-inactive">            <i class="fa fa-star-o" aria-hidden="true"></i>            <i class="fa fa-star-o" aria-hidden="true"></i>            <i class="fa fa-star-o" aria-hidden="true"></i>            <i class="fa fa-star-o" aria-hidden="true"></i>            <i class="fa fa-star-o" aria-hidden="true"></i>        </span></div></span>

jQuery .css -= value doesn't work

You should provide better examples, I actually had to write half of your fiddle to make it work.

What happens is that += and -= in jQuery take integer arguments, rounding respectively up and down. So when you have .5 for your val, the font-height is increased by 1 and decreased by 0.

CSS Font Size .5 Increments