CODEWITHSUNDEEP
css
francisfeng
francisfeng

Reputation: 818

How to render one font in different sizes?

This title may seem a little odd to you. Please let me clarify it.

I was browsing http://typedetail.com/ and found out that both font-sizes of the logo (TYPE DETAIL) in the top left and the title (ABOUT TYPE DETAIL) in the middle are different. The first letters in those words are bigger than the following ones.

But when I checked out the style sheets, I found nothing particular. There's no specific rules using something like <span class="first-letter">**</span> to achieve this effect.

What happened here?

Upvotes: 2

Views: 49

Answers (2)

Stewartside
Stewartside

Reputation: 20925

The font they have used is already in capitals and then using a capital letter makes it bigger than normal lower case letters.

The font can be found here: https://www.google.com/fonts/specimen/Playfair+Display+SC

Like so

p {
  font-family: 'Playfair Display SC', serif;
}
<link href='http://fonts.googleapis.com/css?family=Playfair+Display+SC' rel='stylesheet' type='text/css'>
<p>Text Text and small again</p>

Upvotes: 2

Vlad Pintea
Vlad Pintea

Reputation: 853

The font itself shows both lowercase and uppercase as capital letters, but the uppercase letters are taller. It's the font, not css styling in this case. If you check the value of the string, for example the first word is "About".

Upvotes: 0

Related Questions