CSS is a
programming language that describes the look of a web page. It includes the
color, font, and layout. CSS
font family is used to give certain fonts to an element of the web
pages. It can provide some fonts that named fallback system which will show
another font if the first font is not supported by the browser. The fonts on
CSS have two types which are generic family and font family. Generic family
groups the fonts with the similar look. Meanwhile, font family is the specific
font.
Managing CSS Font Style on Your Website
- Determine the Font Size
A good
website must be able to be read easily both from desktop and smartphone. To make
a good website, the font size is one of the most important elements. You can
use the properties to differentiate between a paragraph and a heading. The size
of the font can be set to absolute or relative size. Absolute size means you
set a specified size for the font and the reader cannot change the size from
their browser. While, relative size means that the size of the font can be
adjusted by the surrounding elements and the reader can change it freely. Example :
#body .header .contact h2 {
font-size: 23px;
}
#body .header .contact h2 {
font-size: 23px;
}
- Use Interesting Font Color
When you
already determine the size of your font, it is the time to add some colors to
them. The font color property
is the one that you can use for it. To make your website easy to be read, use a
color that has good contrast with your website background. Different colors can
also be used to highlight a specific word or part in the text. It makes them
more likely to be found by the reader.
Example :
#header div ul li a:hover {
background-color: #620031;
color: #ffffff;
}
Example :
#header div ul li a:hover {
background-color: #620031;
color: #ffffff;
}
- Manage the Font Style
If you
want to change the font into normal, italic, or oblique, you can type the CSS font style property. Type ‘p.normal’ if you want the text to
be shown normally, ‘p.italic’ if you want your font to look italic, and ‘p.oblique’
to make your text leaning. There is also ‘initial’ value which set the font to
the default value and ‘inherit’ which inherits the property.
Example :
Example :
- Determine Font Variant
The CSS font variant determines when a text should be showed in
small-caps fonts. Small-caps font allows lowercase letters to be changed to a
smaller size uppercase letters. It has the same property values as initial and
inherits font style. There are many kinds of fonts that you can use to
customize your website. Use font combination so the fallback system will work
well to make sure that your website is compatible with your browser and
operating system. In writing the font combination, you better start it with the
font family and end it with generic family.
Example :
Example :
- Choose Appropriate Font
If your
font is not available on the reader’s browser, it will automatically select a
similar font from the generic family. The CSS fonts list commonly consist of serif, sans-serif, and
monospace fonts. The Times New Roman and Georgia are both included in serif
fonts. Arial and Verdana include in san-serif fonts. While the examples of
monospace fonts are Courier New, Lucida, and Console.
0 komentar:
Posting Komentar