I was asked by a visitor whether there was a way to display words "with a large uppercase letter followed by small uppercase letters", or failing that, whether there was some font that does such a thing. From his description, I gathered that he wanted his words to look something like this: "The Site Wizard", where small (lowercase) letters in the phrase are printed in capital (uppercase) letters, although shorter than those that are actually capitalized.
This task can easily be accomplished with CSS. You don't need a special font, nor do you need to manually put your small letters in caps.
I will assume here that you already have a website. If this is not true, you should start at the beginning, with How to Create a Website.
Since this article deals directly with CSS and HTML, you will need at least some basic knowledge of those. At the bare minimum, you should know how to insert CSS rules as well as HTML code into a web page.
The CSS to use small capital letters is:
The above creates a class called "demotext", and inserts a rule that causes all text in that class to use small capital letters with the existing font. If the font that you are currently using does not have specialized glyphs appropriate for the task, the browser will generate them by reusing the normal capital letters found in that font, but resized accordingly.
To use the class, assign it to the block of text in question. Note that although
I say "block of text", you can also assign it to inline elements, like <span>,
and not just block elements like <p> or <div>. For example,
the words "The Site Wizard" in this very sentence uses the following HTML code:
Notice that I actually used a mixture of small and capital letters in my HTML, but the browser rendered everything in uppercase, with the size (ie, height) of the letters depending on whether my original is a capital or small letter.
If you only have a single block of text to be rendered with small capitals, or
if you cannot easily modify the style sheet to add a class, another way is to place the
entire font-variant rule in the HTML tag itself.
This has the same effect as the earlier section. However, with this method, if you use it throughout
your website, and you change your mind later, you will have to manually go through every page
and every instance to remove the style attribute. Contrast this with the first method, where
all you need to do is to remove the font-variant rule (or even the entire class) from your CSS file,
and every page using that class will automatically be updated. It is useful, however, as I said earlier, if you
cannot easily add CSS rules, as may be the case for some
blog software.
The "font-variant: small-caps" rule is supported by all modern browsers. In fact,
the CSS for this particular rule was introduced in the 1990s, so it is
even supported by long obsolete browsers like Internet Explorer 4 (yes, "four").
Copyright © 2020 Christopher Heng. All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.
Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
How to Use Small Capital Letters for Lowercase and Large Capital Letters for Uppercase (CSS)
