Skip to content

Instantly share code, notes, and snippets.

@stuartpb

stuartpb/font-comparison.html

Created September 11, 2013 03:15
Show Gist options
  • Save stuartpb/6518946 to your computer and use it in GitHub Desktop.
Save stuartpb/6518946 to your computer and use it in GitHub Desktop.
Download ZIP
The page I used for mocking up blot.pw's wordmark in different fonts. #bikeshedding
Raw
font-comparison.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>blot.pw</title>
<link href='//fonts.googleapis.com/css?family=Kavoon|Peralta|Margarine|Chicle|Special+Elite|Ceviche+One|Freckle+Face|Skranji|Sarina' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Gorditas|Sansita+One|Pacifico|Norican|Fontdiner+Swanky|Henny+Penny|Wendy+One' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Rock+Salt|Seaweed+Script|Damion' rel='stylesheet' type='text/css'>
<link href='blot.svg' rel='icon' type='image/svg+xml'>
<style>
h1 {
font-size: 3.2rem;
font-family: 'Skranji', cursive;
font-weight: normal;
color: #5D6570;
}
.blotdot {
position: relative;
}
.blotdot::before {
position: absolute;
content: '';
background-image: url("blot.svg");
background-size: contain;
background-repeat: no-repeat;
width: 1ex;
height: 1ex;
pointer-events: none;
display: inline-block;
bottom: 2%;
left: -25%;
}
.blotdot.lowp::before {
bottom: 15%;
}
.blotdot.moreleft::before {
left: -130%;
}
.blotdot.lessleft::before {
left: 15%;
}
/* This would be nice if WebKit / Blink weren't broken:
https://bugs.webkit.org/show_bug.cgi?id=115930
https://code.google.com/p/chromium/issues/detail?id=288202
.blotdot::selection::before {
-webkit-filter: invert(100%);
}
*/
</style>
</head>
<body>
<h1 style="font-family: Ceviche One">blot<span class="blotdot">.</span>pw</h1>
<h1 style="font-family: Chicle">blot<span class="blotdot">.</span>pw</h1>
<h1 style="font-family: Skranji">blot<span class="blotdot">.</span>pw</h1>
<h1 style="font-family: Wendy One">blot<span class="blotdot">.</span>pw</h1>
<h1 style="font-family: Sansita One">blot<span class="blotdot">.</span>pw</h1>
<h1 style="font-family: Kavoon">blot<span class="blotdot">.</span>pw</h1>
<h1 style="font-family: Gorditas">blot<span class="blotdot">.</span>pw</h1>
<h1 style="font-family: Peralta">blot<span class="blotdot">.</span>pw</h1>
<h1 style="font-family: Fontdiner Swanky">blot<span class="blotdot">.</span>pw</h1>
<h1 style="font-family: Henny Penny">blot<span class="blotdot lowp">.</span>pw</h1>
<hr>
<h1 style="font-family: Seaweed Script">blot<span class="blotdot lowp moreleft">.</span>pw</h1>
<h1 style="font-family: Damion">blot<span class="blotdot lowp lessleft">.</span>pw</h1>
<h1 style="font-family: Norican">blot<span class="blotdot lowp">.</span>pw</h1>
<h1 style="font-family: Pacifico">blot<span class="blotdot lowp lessleft">.</span>pw</h1>
<h1 style="font-family: Sarina">blot<span class="blotdot">.</span>pw</h1>
<h1 style="font-family: Rock Salt">blot<span class="blotdot lowp moreleft">.</span>pw</h1>
<h1 style="font-family: Special Elite">blot<span class="blotdot">.</span>pw</h1>
<h1 style="font-family: Margarine">blot<span class="blotdot">.</span>pw</h1>
<h1 style="font-family: Freckle Face">blot<span class="blotdot">.</span>pw</h1>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment