Make font to occupy space of specific font size-CodePudding

Let's say I have button and it has text 'Submit' inside in it with font-size of 16px.

Now I want 'Submit' text to occupy as same space as if it was of font-size of 32px, with having font-size 16px.

Is there a to way achieve this? I tried with line-height but unable to get desired results.

CodePudding user response：

You can also use the em unit as a font size for your element. It was designed so you can scale from your base font size e.g. 2em will make the span text twice the size of your base font size

If you just want to have your text fit a container then you can use something like the fittext plugin

body {
  font-size: 16px;
}

span {
  border: 1rem solid #370DD7;
  background-color: white;
  padding-inline: 0.5rem;
}

.bigtext {
  font-size: 2em;
}

<span>This is some text</span>
<span class='bigtext'>This is bigger text</span>

CodePudding user response：

You could transform the button contents by scaling a 32px font by a factor of 0.5. As transforms are a paint-time operation, they won't affect the layout or the size of the button. Like this:

button {
  display:block;
  font-size: 32px;
}
button.size16 span {
  display: block;
  transform: scale(0.5);
}

<button ><span>Submit</span></button>
<button ><span>Submit</span></button>

CodePudding user response：

Font Size is the attribute which decides how much space a text would occupy.

So, when you put 32px as font size it means the text will occupy 32px. And, when you put 16px it will only occupy 16px.

What you are expecting now cannot be done and also does not seem to be a valid requirement.

Can you please describe your exact requirement in more details.

Do you want the text to occupy the whole 32px or just the parent to have 32px.

Also try to share the code snippet.