CODEWITHSUNDEEP
css
Vahi
Vahi

Reputation: 605

how to increase the font-size without making it thicker

I have few characters that need to be increased in size(height). I have used the font size property which gives me the desired result but makes it thick too. How can I remove the thickness that has been applied?

I have tried using font-weight but I haven't noticed any difference.

HTML

 <div class="row collapse">
                    <div class="four columns">
                        <label for="txtBirthMonth">Date:</label>
                    </div>
                    <div class="two columns collapse">
                        <asp:TextBox ID="txtBirthMonth" runat="server" MaxLength="2"></asp:TextBox>
                    </div>
                    <div class="one column">
                        <p class="splCharacter">/</p>
                       </div>
                    <div class="two columns">
                        <asp:TextBox ID="txtBirthDay" runat="server" MaxLength="2"></asp:TextBox>
                    </div>
                       <div class="one columns">
                        <p class="splCharacter">/</p>
                       </div>
</div>

CSS

.splCharacter {
    font-size: 3em;
    margin: 0px;
}

enter image description here

Upvotes: 1

Views: 2927

Answers (1)

Seth Warburton
Seth Warburton

Reputation: 2413

Just use the font-size property as you have done, that does not increase the font-weight just the size.

If you don't like the font-weight at the increased size then you should also add a rule to decrease the weight, e.g.:

.splCharacter {
font-size: 3em;
font-weight: 200;
margin: 0; // The value is zero so you don't need to specify the unit.
}

Of course, the font you are using must support this reduced weight or this rule will have no effect.

Upvotes: 3

Related Questions