How can I create the same aspect ratio to align size of button and increment counter?

I've created a page of increment counters for collecting stats on football games but the text of the increment '0' doesn't change in relation to the button size. I am trying to make all the buttons fit on the screen without scrolling.

Larger buttons are unchanged. but the smaller buttons are set at a height to 4% as there are 24 rows of buttons.

Code for each row is:

.row5{
display: flex;
text-align: center
}

buttons are set to:

.button{

  color: #000000;
  background-color: #ffffff;
  font-weight: bold;
  font-size-adjust: auto;
  width: 16%;
  padding:0;
  margin:0;
  border-color: #ff9900;
  height:4%;
  }

Please can somebody help to change the size of the text for '0' but make it proportional to button size. I know I can change the font size to 10px for example but I don't think this will help working on a smaller screen.

Hope this makes sense. Thanks in advance for any answers.

Solution

You can use font-size: clamp(value1, value2, value3) for responsive font-sizes.

The first value is the minimum value - the font-size will never be lower than what you set here.

The second value is the preferred value. The element will try to set the font-size to this value.

The last value is the maximum value. The element's font size will never exceed this.

As for setting the values, I suggest using either em, rem or vw-units for a fully responsive effect. Using the em-unit on the font-size property allows setting the font size of an element relative to the font size of its parent. When the size of the parent element changes, the size of the child changes automatically.

Read more about em & rem on the font-size-property: https://www.geeksforgeeks.org/difference-between-em-and-rem-units-in-css/

Play a bit around with the values! Try resizing the browser in a new tab with the example snippet and see the effect of how powerful clamp() is.

body {
  width: 800px;
  font-size: 20px;
}

div {
  width: 50%;
  font-size: clamp(0.5em, 4vw, 3em);
}

<body>
  <div>
    Font size
  </div>
</body>