Font-length test

by marakoss

HTML

<div class="section sansserif">



<h1>
Font-lenght test</h1>
<h2>
Consider these mobile screen widths:</h2>
<p>
- 320px (@72dpi)<br />
- 640px (@144dpi) <br />
</p>
<small><i class="gray"> Note that: Higher resolution means that fonts are more crisp and the smaller font sizes will still be readable, but the ratio between the text and display dimensions won't change.</i></small>
</div>


<div class="section tab serif">


<div class="screen t40" data-font="40">
mmmmmmmmmm
MMMMMMMMM
iiiiiiiiiiiiiiiiiiiiiiiiiiiii
nejneobhospodařovávatelnějšímu
kindercarnavalsoptochtvoorbereidingswerkzaamhedenplan
pneumonoultramicroscopicsilicovolcanoconiosis
<span class="upper">
nejneobhospodařovávatelnějšímu
kindercarnavalsoptochtvoorbereidingswerkzaamhedenplan
pneumonoultramicroscopicsilicovolcanoconiosis
</span>
</div>

<div class="screen t24" data-font="24">
mmmmmmmmmmmmmmmmm
MMMMMMMMMMMMMMM
iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii
nejneobhospodařovávatelnějšímu
kindercarnavalsoptochtvoorbereidingswerkzaamhedenplan
pneumonoultramicroscopicsilicovolcanoconiosis
<span class="upper">
nejneobhospodařovávatelnějšímu
kindercarnavalsoptochtvoorbereidingswerkzaamhedenplan
pneumonoultramicroscopicsilicovolcanoconiosis
</span>
</div>

<div class="screen t20" data-font="20">
mmmmmmmmmmmmmmmmmmmm
MMMMMMMMMMMMMMMMMM
iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii
nejneobhospodařovávatelnějšímu
kindercarnavalsoptochtvoorbereidingswerkzaamhedenplan
pneumonoultramicroscopicsilicovolcanoconiosis
<span class="upper">
nejneobhospodařovávatelnějšímu
kindercarnavalsoptochtvoorbereidingswerkzaamhedenplan
pneumonoultramicroscopicsilicovolcanoconiosis
</span>
</div>

<div class="screen t18" data-font="18">
mmmmmmmmmmmmmmmmmmmmmmm
MMMMMMMMMMMMMMMMMMMM
iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii
nejneobhospodařovávatelnějšímu
kindercarnavalsoptochtvoorbereidingswerkzaamhedenplan
pneumonoultramicroscopicsilicovolcanoconiosis
<span...

CSS

.section{
	position: relative;
	left: 80px;
	padding: 20px 80px;
	overflow: hidden;
	max-width: 500px;
}

.section:first-child{
	padding: 20px 50px;
	left: 0;
}

.serif {
	font-family: serif;
}

.sansserif {
	font-family: sans-serif;
}

.tab {
	float: left;
}

.screen{
	width: 320px;
	border: 1px solid #000;
	position: relative;
	margin: 0 0 20px 0;
}

.screen:before {
	content: 'Size 'attr(data-font);
	white-space: pre;
	font-size: 12px;
	position: absolute;
	left: -80px;
	top: 0;
}


.sansserif .screen:before{
		content: 'Sans-serif \a Size 'attr(data-font);
}

.serif .screen:before{
		content: 'Serif \a Size 'attr(data-font);
}

.t40 { font-size: 40px}
.t24 { font-size: 24px}
.t20 { font-size: 20px}
.t18 { font-size: 18px}
.t16 { font-size: 16px}
.t12 { font-size: 12px}
.t10 { font-size: 10px}

.upper{
	text-transform: uppercase;
}

.gray {
	color: #777;
}