W3.CSS Typography
Easy to Read
W3.CSS pages are easy to read, even for people with slight reading disabilities.
- All fonts used are easy readable 15px sans-serif fonts
- The standard font (Verdana) has a very good letter spacing
- The standard line-spacing (1.5) is also very good
HTML Headings <h1> - <h6>
By default w3.css styles HTML headings this way:
Example
<h1>Heading 1 (36px)</h1>
<h2>Heading 2 (30px)</h2>
<h3>Heading 3 (24px)</h3>
<h4>Heading 4 (20px)</h4>
<h5>Heading 5 (18px)</h5>
<h6>Heading 6 (16px)</h6>
Try It Yourself »
Font-Size Classes
Headings should be used for what they are: Headings.
With W3.CSS, font sizes can be set by classes:
Example
w3-tiny
w3-small
w3-medium (Default)
w3-large
w3-xlarge
w3-xxlarge
w3-xxxlarge
w3-jumbo
Try It Yourself »
Overriding the Standards
Overriding the W3.CSS standards is very easy.
You got at least three simple options:
- Override the standard in the <head> section of your page
- Add your own CSS file after W3.CSS
- Download and change the content of the W3.CSS file
Override in<head>
h1{font-size:64px;}
h2{font-size:48px;}
h3{font-size:36px;}
h4{font-size:24px;}
h5{font-size:20px;}
h6{font-size:18px;}
Try It Yourself »
Add your own CSS
<link rel="stylesheet" href="https://www.noidatut.com/lib/w3.css">
<link rel="stylesheet"
href="myStyle.css">
Change W3.CSS
h1{font-size:36px} h2{font-size:30px} h3{font-size:24px} h4{font-size:20px} h5{font-size:18px} h6{font-size:16px}
