Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Set different font families for screen and print with CSS
The CSS @media rule allows you to specify different styles for different output devices. You can use it to set different font families for screen display and print output, ensuring optimal readability for each medium.
Syntax
@media screen {
selector {
font-family: font-for-screen;
}
}
@media print {
selector {
font-family: font-for-print;
}
}
Example: Different Font Families for Screen and Print
The following example specifies different font families for screen and print, with a common font size for both media types −
<!DOCTYPE html>
<html>
<head>
<style>
@media screen {
p.bodyText {
font-family: verdana, arial, sans-serif;
}
}
@media print {
p.bodyText {
font-family: georgia, times, serif;
}
}
@media screen, print {
p.bodyText {
font-size: 10pt;
}
}
</style>
</head>
<body>
<p class="bodyText">This text will display in Verdana/Arial on screen but Georgia/Times when printed.</p>
<p class="bodyText">Both screen and print versions will use 10pt font size.</p>
</body>
</html>
On screen: Text appears in Verdana (or Arial as fallback) with 10pt size. When printed: Text appears in Georgia (or Times as fallback) with 10pt size.
Key Points
- @media screen applies styles only when viewing on a computer screen
- @media print applies styles only when printing the document
- @media screen, print applies styles to both screen and print media
- Sans-serif fonts (like Verdana, Arial) are typically better for screen reading
- Serif fonts (like Georgia, Times) are often preferred for printed documents
Conclusion
Using @media rules allows you to optimize typography for different output devices. This ensures your content looks great both on screen and in print by choosing appropriate font families for each medium.
Updated on: 2026-03-15T11:40:40+05:30
2K+ Views
Advertisements