CODEWITHSUNDEEP
htmlcss
MadMan
MadMan

Reputation: 59

How to get the first letter of each word to be a different size and the rest to be the same size

How can I make the first letter of each word in a text to be a different size to the rest?

For example I am trying to make the J in jogging to be bigger than ogging and J in jog to be bigger than og. Also everything has to be capital letter.

JOGGING JOG

So far i have

HTML: 

<h1>
    JOGGING JOG
</h1>

h1{
    font-family: amatic sc,cursive;
    color: #FFFFFF;
    font-size: 120px;
}

I looked up some information but it seems this can only be done in JavaScript. I might be wrong but if possible can this be done with HTML and CSS only? Maybe using different classes to hold info and then positioning the letters?

Upvotes: 0

Views: 4792

Answers (3)

user663031
user663031

Reputation:

Use the font-variant CSS property with a value of small-caps. ("Small caps" is the correct name of the typographical effect you are looking for.)

The CSS designers have already anticipated your requirement, and thoughtfully provided a solution, so all we have to do is specify the single CSS property font-variant.

font-variant will render lower-case letters as smaller-sized capitals, and upper-case letters as normal size. Therefore, specify the letters you want bigger ("J") as upper case, but the letters you want smaller as lower case ("ogging", "og"):

<h1>Jogging Jog</h1>

According to the spec, font-variant

Enables display of small capitals. Small-caps glyphs typically use the form of uppercase letters but are reduced to the size of lowercase letters.

Example:

Sample output using font-variant: small-caps

h1 {
  font-family: amatic sc, cursive;
  color: #000;
  font-size: 30px;

  /* MAGIC HERE */
  font-variant: small-caps;
}
<h1>Jogging Jog</h1>

Upvotes: 1

Help
Help

Reputation: 1156

Try this.

CSS

h1:first-child:first-letter { float: left; color: #903; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: Georgia; }

For reference please check this

Hope this helps.

Upvotes: 1

Marcos Casagrande
Marcos Casagrande

Reputation: 40404

An easy cross browser solution, is this: 

h1{
  font-family: amatic sc,cursive;
  color: #000;
  font-size: 30px;
}
h1 span { font-size: 40px; }
<h1><span>J</span>OGGING <span>J</span>OG</h1>

Upvotes: 2

Related Questions