The font-variant property allows you to change the targeted text to small caps. This property has been extended in CSS3.
p:first-line {
font-variant: small-caps; /* default is `normal` */
}Before CSS3, this property accepted one of two possible values: normal (how text is rendered by default) and small-caps.
A value of small-caps will render the text in uppercase letters that are smaller than regular uppercase letters. This does not override uppercasing set in the content, inside the markup. For example:
In the above demo, both paragraphs are set to font-variant: small-caps. The first paragraph has only the first letter uppercase in the markup, so it appears as expected (first letter uppercase, remainder in small caps).
The second line is written in all uppercase in the markup, which overrides the small-caps value, setting everything in regular uppercase.
Taking this further, if these paragraphs are set to font-variant: small-caps and text-transform: lowercase, then they will appear in all small caps. Similarly, if these paragraphs are set to font-variant: small-caps and text-transform: uppercase, then they will appear in all regular uppercase.
font-variant can be included as part of a font shorthand declaration.
New additions in CSS3
In CSS3, font-variant becomes a shorthand and can accept multiple values, including all-small-caps, petite-caps, all-petite-caps, titling-caps, and unicase, among others.
Other resources
Browser support
In IE6/7, setting font-variant: small-caps will cause any text set to text-transform: uppercase or text-transform: lowercase to appear like text-transform: none.
Related
font
font-family
font-size
font-stretch
.element { font-stretch: ultra-condensed; }
font-style
font-synthesis
.intro { font-synthesis: weight style; }
font-variant-numeric
.fraction { font-variant-numeric: diagonal-fractions; }
font-weight
span { font-weight: 800; }
line-height
.element { line-height: 1.35; }
Chris,
It should be noted that there is presently a Webkit bug that stops font-variant from working properly on non-system fonts. I’m sure they’re working on a fix, but 2 years after release, Google fonts still look atrocious in Chrome. ;)
Josh,
Do you have a link to a bug report or an article describing this? I can’t find anything via Google for font-variant specifically, and I haven’t heard of this bug before.
I’m helping Chris with some of these Almanac entries and I’ll be happy to update this if you have something specific with a link or even just a demo for comparison with other browsers.
Thanks!
Louis,
Glad you’re working on this almanac. It’s very useful! I realize now that I have this bug and another bug on the brain, and I got my streams crossed.
It’s actually in Webkit with text-rendering: optimizeLegibility…
https://code.google.com/p/chromium/issues/detail?id=51973
Sorry about the confusion. Not sure if it’s a big enough deal to note or not. Caused me some heartburn today.
Ah ok, no prob. Interesting, because I don’t know much about that property. And now that I check on it:
https://developer.mozilla.org/en-US/docs/Web/CSS/text-rendering
It says:
“The text-rendering property is an SVG property that is not defined in any CSS standard”, but it still works in general HTML.
simply not true. Maybe a Microsoft employee? :)
Josh,
Thanks for the info re: the optimizeLegibility bug in webkit. I couldn’t figure out why font-variant wasn’t working and it was driving me nuts.
The font-variant property isn’t crossborwser. In webkit letters are smaller than other browsers. Is there a way to fix it?
I mean small-caps of course.
No, probably not. The example in CodePen should be using Normalize.css, so if there was any way to fix that, I’m sure it would be in there. I think it’s just a minor browser difference that you’ll have to deal with.
Chris/Louis, I’ve got my suspicions that
font-variantis more broken than this. I’ve only done some quick tests on Chrome butfont-variantdoesn’t produce ‘proper’ small-caps (in the sense of different glyphs) but rather it just produces small uppercase glyphs; which isn’t really what small caps are all about. I’ve written a quick article which highlights the problem and a potential solution. It’s by no means a rigorous browser survey but hopefully it shines a little light.I think it’s kind of awkward that font-variant: small-caps won’t apply to caps written text. I like to keep my original texts as meaningful as possible, so whenever I write an acronym as HTML, I like to keep it in caps but display it in small caps via CSS. But regarding my logic, it does not work, as mentioned above, it only works on lowercase. Would there be any workaround for it? Perhaps just use a class on the acronym with a lower font-size? :-S
The workaround is mentioned in the article: “text-transform: lowercase”. You can write the acronym in caps in the HTML source, and when the CSS is applied it is transformed to lowercase before being converted to small caps.
Can this font variant tool be used in Adobe Photoshop CC to reduce the file size of a logo that will be saved in “.png” or “gif format, since google has a 30kb size limit for their logo size in their G suite app?
Peace!
Thank you for the info!