Below I have an example of my attempt to see a difference between a font-weight of normal, lighter and lightest. They look exactly the same in Safari and Chrome. Any suggestions?

<!DOCTYPE html>
<html>
<head>
<style>
p.normal {font-weight:normal;font-size: 20px;}
p.light {font-weight:lighter; font-size: 20px;}
p.lightest {font-weight:100;font-size: 20px;}
</style>
</head>

<body>
<p class="normal">This is a paragraph.</p>
<p class="light">This is a paragraph.</p>
<p class="lightest">This is a paragraph.</p>
</body>
</html>