Page 2 of 2
We like the look of a big first letter. The first letter doesn't have to drop to look good. It can be made bigger or smaller than we did here. This example uses a font size of 56 pixels for the first letter, a raised cap. If there is enough text an even bigger first-letter size looks good. The code can be adjusted for a slight overlap by adjusting the letter spacing. The color name chocolate tastes good today. There are more color names here.
Sometimes all we need is a big first letter for a paragraph. No drop cap, just a big cap or a raised cap. It looks best when followed by way too much text. We used a font size of 40pt for the first letter and changed the font tamily. If there is enough text an even bigger first-letter size looks good. The code can be adjusted for a slight overlap by adjusting the letter spacing.
Copy and paste this in your Blog or Web page.
It will look like this.
Sometimes all we need is a big first letter for a paragraph. No drop cap, just a big cap. It looks best when followed by way too much text.
Add this CSS to your style sheet.
Copy and paste the HTML in your page.
It will look like this.
This is the first big letter.
This is the best size for a pale or transparent font color and it looks good when the paragraph begins with nearly any letter. You will need to type in enough text to be able to see the effect. That means about one more line for this example. We are using a line-height of 60 pixels that can be adjusted. Sometimes a little padding on the right will make it look even better.
Copy and Paste this in your Blog or Web page.
It will look like this.
This is the best size for a pale or transparent font color and it looks good when the paragraph begins with nearly any letter.
With minor changes, just a little tweaking here and there we saw a takeoff that goes like this. The CSS is shortened, which is a good practice when the style sheet starts growing. We keep using the same font family for the examples but other fonts work well too. This one uses Helvetica. If Helvetica is not available on your PC it will use Verdana, and if Verdana isn't available it will use Arial. If none of the fonts are available it will use any sans-serif font. The difficulty in testing is knowing, or wondering, what fonts the visitor has available.
The CSS looks like this.
Copy and Paste this in your Blog or Web page.
It will look like this.
With minor changes, just a little tweaking here and there we saw a takeoff that goes like this. The CSS is shortened, which is a good practice when the style sheet starts growing. We keep using the same font family for the examples but other fonts work well too. This one uses Helvetica. If Helvetica is not available on your PC it will use Verdana, and if Verdana isn't available it will use Arial. If none of the fonts are available it will use any sans-serif font. The difficulty in testing is knowing, or wondering, what fonts the visitor has available.
Smooth edges? Or do the edges of the screen font look jagged? You shouldn't see a jagged edge. While testing this code we had to adjust the settings on one PC manually. There was no font that could satisfy the display settings of one particular PC. The drop caps we made for this page look good, especially this large version. We are using a line-height of 60 pixels that can be adjusted. Sometimes a little padding on the right will make it look even better.
My Computer
Control Panel
Display
Effects
Select Smooth edges of screen fonts
There's more about Magazine Style
in the Text Tips pages.