CODEWITHSUNDEEP
css
David Rodrigues
David Rodrigues

Reputation: 12542

Enabling small capitals

On MS Word we have a text feature called "Small Capitals". It turns all letters uppercase, but the lowercase letters turn smaller then uppercased. I need to know if it is possible in CSS.

Example:

Original: Hello World
Small Capitals: HELLO WORLD

Notes: SO Markdown does not support CSS font-size style in tags nether small, so I show as a hack. Well, the strong letters is bigger than normal letter in small capitals.

Is it possible in CSS? How I can do that?

Upvotes: 4

Views: 3323

Answers (4)

Tristano Ajmone
Tristano Ajmone

Reputation: 51

Usually by "small caps" it's intended a style where all capital letters are preserved as they are and lowercase letters are rendered in uppercase using as a smaller variant of the font.

Using text-transform: uppercase; will convert all letters to uppercase, but will not achieve the effect of rendering them with a smaller font.

https://www.w3schools.com/cssref/pr_text_text-transform.php

Using font-variant: small-caps; will achieve the result described above, i.e. render all lowercase letters to uppercase using a smaller font size (which, as mentioned by @jukka-k-korpela) is usually done via dedicate glyphs within the font itself.

https://www.w3schools.com/cssref/pr_font_font-variant.php

There's also font-variant-caps: all-small-caps; which forces the small-caps effect on all letters (lowercase and uppercase alike). This might be useful in some edge cases, e.g. in older styling conventions where 'A.D.' and 'B.C.' would be rendered with smaller letters, i.e. combining the effects of text-transform: uppercase; and font-variant: small-caps;.

https://www.w3schools.com/cssref/css3_pr_font-variant-caps.php

Upvotes: 0

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201628

It’s called “small capitals” or “small caps” in English. In typography, small capitals are separately designed (by font author) versions of letters. They have the shapes of capital letters, but their height is usually just a litter larger than the x-height (the height of the lowercase letter “x”) of the font. They may be implemented in a small caps font, but more often, they are glyph variants inside font.

In MS Word up to and including Word 2007, as well as in CSS implementations for font-variant: small-caps, the “small capitals” are really just reduced-size capital letters. (Word 2010 gives access to OpenType features and real small caps.) This typically means that their stroke widths are too small, and to avoid this effect from getting all too bad, the font size reduction is rather modest, so the fake “small caps” are not that much smaller than normal capitals.

For such reasons, “small caps” are mostly best avoided on web pages.

However, there is ongoing work in giving access to OpenType features in CSS. Currently, support exists in the form of browser-prefixed versions of the font-feature-settings property as proposed in CSS3 Fonts. Example:

<style>
body { 
  font-family: Calibri, sans-serif;
}
.sc { 
  -moz-font-feature-settings: 'smcp';
  -webkit-font-feature-settings: 'smcp';
  -ms-font-feature-settings: 'smcp';
  font-feature-settings: 'smcp';
}
</style>
<div class=sc>Hello world</div>
<div><span style="font-variant: small-caps">Hello world</span>
  (fake small caps)</div>

This works on supporting browsers (Chrome, Firefox, IE 10), provided that the font has small capitals (e.g., Calibri, Cambria, Candara, Constantia, Corbel, Palatino Linotype).

Upvotes: 9

bukart
bukart

Reputation: 4906

yes, you can do it with font-variant. I think you mean "capitalized"

<span style="font-variant:small-caps;">Hello World</span>

Upvotes: 2

David Carrus
David Carrus

Reputation: 182

I think you are talking about small caps, So try:

font-variant: small-caps;

Upvotes: 0

Related Questions