Typography is often overlooked in today’s design specifically by web developers. It really is a shame because CSS gives us so much control over our type. That being said, we our limited to certain “web safe” typefaces but that shouldn’t decrease our creativity. Take control over your type!
Below are a few CSS tips for typography on the web. Just a really good resource and quick resources. Check out the full article at three{styles}.com
The Font Attribute
CSS provides us with the Font attribute, which is what allows us to tweak the text on our page. This is an overview of the syntax and how to effect text using CSS.
Font-size
Change the size of your font using font-size
|
1
2
3
|
font-size: 1.2em;
font-size: 12px;
font-size: 10pt;
|
Font-weight
This is used to change the weight of your font (i.e bold, bolder)
|
1
2
3
4
|
font-weight: normal;
font-weight: bold;
font-weight: bolder;
font-weight: lighter;
|
Text-transform
The text-transform property allows you to apply uppercase, lowercase, and capitalize effects to your text.
|
1
2
3
4
|
text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;
text-transform: inherit;
|
Text-decoration
The text-decoration property allows you to underline, overline and put a line through your text
|
1
2
3
4
5
|
text-decoration: normal;
text-decoration: underline;
text-decoration: overline;
text-decoration: line-through;
text-decoration: blink; (DO NOT USE)
|
Font-Variant
The Font variant property allows you to create the small-caps effect which capitalizes the letters then decreases the font size.
|
1
2
3
|
font-variant: normal;
font-variant: small-caps;
font-variant: inherit;
|
More resources from three{styles}:
-
-
-
-
-
Via three{styles}
Share this with your peeps:
Like this:
Like Loading...
