Interactive rating component

Hi Jesse, first of all, well done here! About your question, I think having a fixed height and width for this is fine in this case; for the line height, this usually is a multiplier (e.g. 1.4) and not a font size, so I might change that to a plain number instead. I would do what @JordanKisiel suggested, so that's something you can try first.

Anyway, the bigger issue for me here is the use of span tags for your buttons, as this is a non-semantic element, and there really isn't a reason to use span here when there are more suitable elements. As a suggestion, I would opt to use button instead (in my solution I used radio inputs), as a button is used for performing an action, which in this case would be the action of selecting a number, and this would be greatly helpful to the screen reader.

In my solution, I made the spans containing the numbers into flexboxes to center them within their circular backgrounds:

display: flex;
justify-content: center;
align-items: center;

It's pretty much my default approach when I need content to be exactly in the center of something.