Small caps help to make abbreviations way easier to read but won’t stand out from the text. We highly suggest this bit of typographic flare with your content. True small capitals are now possible on the web, but alas they are still a bitch and will also depend on the type face in use. Definitely check out Open Typography for those typefaces and services that provide authentic small caps.
Lorem ipsum dolor sit amet, consectetur HTML adipisicing elit. CSS Laboriosam voluptatem a beatae accusantium accusamus dolor provident error consectetur quibusdam suscipit neque temporibus. Velit omnis voluptatum quasi tempora reiciendis expedita reprehenderit.
<abbr title="hyper text markup language">HTML</abbr>
$small-caps-color: gray !default;
$small-caps-weight: 600 !default;
@mixin smallcaps($color, $font-weight) {
// depends on the font family.
// some font-families don’t support small caps
// or don’t provide them with their web font.
font-variant: small-caps;
font-weight: $font-weight;
text-transform: lowercase;
color: $color;
}
abbr {
@include smallcaps($small-caps-color, $small-caps-weight);
&:hover {
cursor: help;
}
}