Clever Geek Handbook

How to resize text in title using html

I want to resize the text in the h4 heading. I want all letters to be capital and some smaller than others. Basically resize the text with h3 tags. Thanks a lot for any help.

+3


source to share


5 answers


Actually, I believe that what you are looking for is called Small Caps.

Try the following:



    h4 {
      font-variant: small-caps;
    }
      

        
        
        
      

    
<h4>This is Small Capped</h4>
<p>This is regular text.</p>
Run codeHide result


More information: https://css-tricks.com/almanac/properties/f/font-variant/

+1


source


Something like that?



<h4>this is <small>where the title goes</small></h4>

<style>

h4 {
    font-size: 1em;
    text-transform: uppercase;
}

h4 small {
    font-size: .75em;
}

</style>
+1


source


You can resize the text either in CSS or in the style attribute.

<h3 style="font-size:50px">The H3 Title</h3>

In CSS:

h3 {
   font-size:50px;
}

If you want to fit parts of your name, use strong ones.

<h3 style="font-size:50px"><strong style="font-size:25px">The</strong> H3 Title</h3>

      

        
        
        
      

    

h3 {
  font-size: 50px;
}
#h3Strong {
  font-size: 25px;
}
#h4Strong {
  font-size: 20px;
}
h4 {
  font-size: 45px;
}
      

        
        
        
      

    
<h3><strong id="h3Strong">The</strong> H3 Title</h3>
<h4><strong id="h4Strong">The</strong> H4 Title</h4>
Run codeHide result


0


source


Have you tried something like this:

.c2{
    font-size:2em!important;
}
.span{
    font-size:1em;
}
h3{
    text-transform: capitalize;
}

And the html:

<h3>
    <span class="c2">1</span>
    <span>2</span>
</h3>

      

        
        
        
      

    

.c2{
    font-size:2em!important;
}
.span{
    font-size:1em;
}

h3{
    text-transform:uppercase;
}
      

        
        
        
      

    
<h3>
    <span class="c2">a</span>
    <span>b</span>
</h3>
Run codeHide result


http://jsfiddle.net/n7fye5nc/

0


source


To increase the font size, use the CSS property font-size

.

To make all text uppercase, use the CSS property text-transform

.

.big {
  font-size: 2em;
  text-transform: uppercase;
}
      

        
        
        
      

    
<h3>Hello World!</h3>
<h3 class="big">Foo Bar!</h3>
Run codeHide result


0


source






More articles:


All Articles