CSS Fonts
Controlling typography and font properties
🔤 What are CSS Fonts?
CSS font properties allow you to control the typeface, size, weight, and style of text on your web pages. Good typography makes your content more readable and attractive!
/* Font styling example */
h1 {
font-family: Arial, sans-serif;
font-size: 24px;
font-weight: bold;
}
Font Properties
Font Family
Choose the typeface
font-family: Arial;Font Size
Control text size
font-size: 16px;Font Weight
Make text bold or light
font-weight: bold;Font Style
Add italic styling
font-style: italic;🔹 Font Family
The CSS font-family property defines the typeface used for text, impacting readability, branding, and user experience across devices. Specify a font stack with fallbacks: font-family: "Helvetica Neue", Arial, sans-serif; ensures compatibility if the preferred font fails. Serif fonts like Times New Roman convey tradition; sans-serif like Arial offers modernity; monospace suits code. Web fonts (Google Fonts, Adobe Fonts) expand choices but require performance considerations. For SEO, legible typography improves content consumption, reduces bounce rates, and supports accessibility. Fast-loading fonts also contribute to better Core Web Vitals, particularly Largest Contentful Paint (LCP), directly influencing search rankings.
/* Different font families */
.serif { font-family: "Times New Roman", serif; }
.sans-serif { font-family: Arial, sans-serif; }
.monospace { font-family: "Courier New", monospace; }<p class="serif">This is serif font</p>
<p class="sans-serif">This is sans-serif font</p>
<p class="monospace">This is monospace font</p>Output:
This is serif font
This is sans-serif font
This is monospace font
🔹 Font Size
Font size in CSS controls text legibility and hierarchy using units like px, em, rem, and viewport-relative units for responsive scaling. Pixel (px) offers precision, while relative units (em, rem) adapt to user preferences and root settings. Viewport units (vw, vh) create fluid typography. Example: font-size: clamp(1rem, 2.5vw, 2rem); ensures readable scaling. Proper font sizing improves accessibility, meets WCAG guidelines, and enhances mobile experience. For SEO, responsive typography reduces zooming and panning, improves engagement metrics, and supports page experience signals. Faster rendering of well-sized text also aids performance, contributing positively to search visibility and ranking factors.
/* Font size units */
.small { font-size: 12px; }
.medium { font-size: 16px; }
.large { font-size: 24px; }
.percent { font-size: 150%; }
.em { font-size: 1.5em; }<p class="small">Small text (12px)</p>
<p class="medium">Medium text (16px)</p>
<p class="large">Large text (24px)</p>Output:
Small text (12px)
Medium text (16px)
Large text (24px)
🔹 Font Weight
Font weight controls the visual thickness and boldness of text, directly impacting readability and design hierarchy. In CSS, you can set font weight using keywords like normal (400), bold (700), lighter, or bolder, as well as numeric values from 100 (thin) to 900 (extra bold). This property is essential for creating contrast between headings, body text, and emphasized content. Proper use of font weight enhances user experience by guiding attention, improving scannability, and reinforcing content structure. For SEO, clear visual hierarchy helps keep users engaged longer, reduces bounce rates, and signals to search engines that your content is well-organized and user-friendly.
/* Font weight options */
.light { font-weight: 300; }
.normal { font-weight: normal; }
.bold { font-weight: bold; }
.bolder { font-weight: 900; }<p class="light">Light weight text</p>
<p class="normal">Normal weight text</p>
<p class="bold">Bold weight text</p>Output:
Light weight text
Normal weight text
Bold weight text
🔹 Font Style
Font style defines the slant or italicization of text, playing a crucial role in typographic expression and semantic emphasis. The CSS font-style property accepts values like normal, italic, and oblique. Italic styles are commonly used for citations, foreign words, or emphasized phrases, while oblique is a simulated slant of the regular font. Proper implementation improves content differentiation and readability, making text more engaging and accessible. From an SEO perspective, well-styled text enhances user experience, encourages longer page visits, and supports content structure—factors that search engines reward with better rankings and visibility in search results.
/* Font style options */
.normal { font-style: normal; }
.italic { font-style: italic; }
.oblique { font-style: oblique; }<p class="normal">Normal text</p>
<p class="italic">Italic text</p>
<p class="oblique">Oblique text</p>Output:
Normal text
Italic text
Oblique text
🔹 Font Shorthand
The font shorthand property allows developers to combine multiple font-related declarations into a single, concise CSS rule. This powerful syntax can include values for font-style, font-variant, font-weight, font-size, line-height, and font-family in a specific order. For example, font: italic bold 18px/1.5 Arial, sans-serif; efficiently sets multiple properties at once. Using shorthand reduces CSS file size, improves loading speed, and enhances maintainability. Faster-loading pages are favored by search engines, leading to better SEO performance, improved user experience, and higher engagement metrics across devices and browsers.
/* Font shorthand syntax */
/* font: style weight size/line-height family */
.shorthand {
font: italic bold 18px/1.5 Arial, sans-serif;
}<p class="shorthand">This uses font shorthand property</p>Output:
This uses font shorthand property