<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<h2 style="border-bottom: 1px solid gray;">What is 'M Height'?</h2>
<h4 style="background-color: #E5E5E5; padding: 6px;">Overview</h4>
<p>M Height is a reference value you can set to make letters, numbers, words,
<br/> or phrases <b><i>in the same font</i></b> proportional to each other.</p>
<img src="http://www.wordsanywhere.com/images/m-height-first-illustration.png" />
<h4 style="background-color: #E5E5E5; padding: 6px;">Detailed Explanation</h4>
<p>Consider all the upper and lower case letters of the corsiva font shown below.
Now ask yourself, "How tall is this lettering?" </p>
<img src="http://www.wordsanywhere.com/images/m%20height%20illus%201.png" alt="Corsiva Alphabet" />
<p>Each letter is a different size...so which should define the lettering height? </p>
<img src="http://www.wordsanywhere.com/images/m%20height%20illus%202.png" />
<p>Should it be 7.13" like the 'G', or possibly 6.24" like the capital 'R'? Maybe it's 3.6" like the 'e'. To add to the confusion the lower case 'j' at 7.43" is taller than the capital 'G'!</p>
<p>Due to size variations between characters in the same font at the same size, when referring to 'vinyl letter height' a common reference point is needed. </p>
<p>We've chosen one letter to be the reference point for all the other characters. The capital M. </p>
<img src="http://www.wordsanywhere.com/images/m%20height%20illus%203.png" />
<p>In this example the entire alphabet shown above is proportional to a 5.49" capital M. </p>
<p>By setting the M Height the same for each phrase, we can make two phrases </p>
<img src="http://www.wordsanywhere.com/images/m%20height%20illus%204.png" />
<p>match each other in size even though their actual measured...
CSS
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
JavaScript
/* Latest compiled and minified JavaScript included as External Resource */
Please Whitelist JSFiddle in your content blocker.
Help keep JSFiddle free for always by one of two ways:
Whitelist JSFiddle in your content blocker (two clicks)
Go PRO and get access to additional PRO features →
Join the 4+ million users, and keep the JSFiddle dream alive.
Ad-free
All ads in the editor and listing pages are turned completely off.
Use pre-released features
You get to try and use features (like the Palette Color Generator) months before everyone else.
Fiddle collections
Sort and categorize your Fiddles into multiple collections.
Private collections and fiddles
You can make as many Private Fiddles, and Private Collections as you wish!
Console
Debug your Fiddle with a minimal built-in JavaScript console.