Fonts in CSS
Fonts in CSS are a key aspect of typography, which refers to the art and technique of arranging type to make written language legible, readable, and appealing when displayed. Fonts refer to the style or design of a set of characters, including letters, numbers, punctuation, and symbols.
In web design and development, fonts are used to style text and create visual hierarchy on a webpage. Web fonts can be divided into two main categories: system fonts and custom fonts.
- System fonts: These are fonts that are installed on a user’s device and are available to all websites they visit. They are typically used as fallback options if a custom font isn’t available, or for simple text content like body copy. Some common system fonts include Arial, Helvetica, Times New Roman, and Georgia.
- Custom fonts: These are fonts that are not installed on a user’s device but are downloaded from a server and used specifically for a website. Custom fonts can be used to create unique branding and visual identity, and can add personality and flair to a website. Custom fonts can be either free or paid, and are typically loaded using the @font-face rule in CSS.
In CSS, fonts can be specified using various properties, including font-family, font-size, font-weight, font-style, font-variant, line-height, and more. By using these properties, you can customize the look and feel of text on your website and create a consistent visual style across different devices and browsers.
Example:
Fonts in CSS
<!DOCTYPE html>
<html>
<head>
<title>Font Example</title>
<style>
body {
font-family: Arial, sans-serif;
font-size: 16px;
color: #333;
}
h1 {
font-family: Georgia, serif;
font-size: 36px;
font-weight: bold;
color: #0066cc;
}
p {
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
color: #666;
}
</style>
</head>
<body>
<h1>Welcome to my website</h1>
<p>This is a paragraph of text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.</p>
<script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
</html>Top of Form
In this example, we’ve set the font-family property for the entire webpage to Arial, sans-serif, which means the browser will first look for the Arial font and then use a generic sans-serif font if Arial is not available. We’ve also set the font-size property to 16px and the color property to #333, which is a dark gray color.
For the h1 heading, we’ve overridden the font-family property to use the Georgia font, which is a serif font that is better suited for headings. We’ve also set the font-size property to 36px, the font-weight property to bold, and the color property to #0066cc, which is a blue color.
For the p paragraph, we’ve set the font-family property back to Arial, sans-serif, and set the font-size property to 16px again. We’ve also added a line-height property of 1.5, which creates more space between lines of text, and set the color property to #666, which is a light gray color.
1. Font Family:
The font-family property is used to specify the typeface or font family for text. It can take multiple values in a comma-separated list, representing the preferred order of fonts. If the browser doesn’t support the first font, it will try the next one in the list.
body {
font-family: "Arial", sans-serif;
}
Font Size:
The font-size property sets the size of the text. It can be defined using various units like pixels (px), ems (em), percentages (%), or keywords such as small, medium, large, etc.
p {
font-size: 16px;
}
Font Style:
The font-style property is used to set the style of the text, such as normal, italic, or oblique.
em {
font-style: italic;
}
Font Weight:
The font-weight property determines the thickness of the characters. It can be set to values like normal, bold, or specific numeric values ranging from 100 to 900.
h1 {
font-weight: bold;
}
Font Variant:
The font-variant property controls the use of small caps. It can be set to normal or small-caps.
span {
font-variant: small-caps;
}
Conclusion:
In conclusion, understanding and utilizing Fonts in CSS is crucial for effective web design. The various properties provided by CSS enable developers to control the appearance of text, from choosing the right font family to adjusting size, style, and other typographic aspects. Additionally, the ability to import external fonts or use web font services like Google Fonts further expands the options available for creating visually appealing and unique web typography. As web development evolves, staying updated on best practices for font usage and responsive typography is essential for creating modern and user-friendly websites.