Como convertir px a em

Nunca la conversión fue tan fácil

Varias veces, he postulado aquí lo importante que es trabajar los diseños en base a medidas em en lugar de px de cara a la Accesibilidad Web

En PXtoEM.com la cosa ahora, la presentan claramente y aportan con soluciones casi para usar.

Simplemente hay que determinar el alto de fuente base con que vamos a trabajar, para que luego la aplicación nos presente una muy buena distribución de medidas a lo largo del diseño:

/*
typography.css * Sets up some sensible default typography.
* Based on the typography.css portion of 
Blueprint CSS @ http://blueprintcss.org/
*/
/* Default font settings.
The font-size percentage is of 16px. (1 * 16px ~ 16px) */
body {
 font-size: 100%;
 color: #222222;
 background: #FFFFFF;
 font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
/* Headings  */
}
h1,h2,h3,h4,h5,h6 {
 font-weight: normal;
 color: #111111;
}
h1 {
 font-size: 3em;
 line-height: 1;
 margin-bottom: 0.5em;
}
h2 {
 font-size: 2em;
 margin-bottom: 0.75em;
}
h3 {
 font-size: 1.5em;
 line-height: 1;
 margin-bottom: 1em;
}
h4 {
 font-size: 1.2em;
 line-height: 1.25;
 margin-bottom: 1.25em;
}
h5 {
 font-size: 1em;
 font-weight: bold;
 margin-bottom: 1.5em;
}
h6 {
 font-size: 1em;
 font-weight: bold;
}
h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {
 margin: 0;
/* Text elements  */
}
p {
 margin: 0 0 1.5em;
}
p img.left {
 float: left;
 margin: 1.5em 1.5em 1.5em 0;
 padding: 0;
}
p img.right {
 float: right;
 margin: 1.5em 0 1.5em 1.5em;
}
a:focus, a:hover {
 color: #000000;
}
a {
 color: #000099;
 text-decoration: underline;
}
blockquote {
 margin: 1.5em;
 color: #666666;
 font-style: italic;
}
strong {
 font-weight: bold;
}
em,dfn {
 font-style: italic;
}
dfn {
 font-weight: bold;
}
sup, sub {
 line-height: 0;
}
abbr, acronym {
 border-bottom: 1px dotted #666666;
}
address {
 margin: 0 0 1.5em;
 font-style: italic;
}
del {
 color: #666666;
}
pre {
 margin: 1.5em 0;
 white-space: pre;
}
pre,code,tt {
 font: 1em 'andale mono', 'lucida console', monospace;
 line-height: 1.5;
/* Lists  */
}
li ul, li ol {
 margin: 0 1.5em;
}
ul, ol {
 margin: 0 1.5em 1.5em 1.5em;
}
ul {
 list-style-type: disc;
}
ol {
 list-style-type: decimal;
}
dl {
 margin: 0 0 1.5em 0;
}
dl dt {
 font-weight: bold;
}
dd {
 margin-left: 1.5em;
/* Tables  */
}
table {
 margin-bottom: 1.4em;
 width: 100%;
}
th {
 font-weight: bold;
}
thead th {
 background: #C3D9FF;
}
th,td,caption {
 padding: 4px 10px 4px 5px;
}
tr.even td {
 background: #E5ECF9;
}
tfoot {
 font-style: italic;
}
caption {
 background: #EEEEEE;
/* Misc classes  */
}
.small {
 font-size: .8em;
 margin-bottom: 1.875em;
 line-height: 1.875em;
}
.large {
 font-size: 1.2em;
 line-height: 2.5em;
 margin-bottom: 1.25em;
}
.hide {
 display: none;
}
.quiet {
 color: #666666;
}
.loud {
 color: #000000;
}
.highlight {
 background: #FFFF00;
}
.added {
 background: #006600;
 color: #FFFFFF;
}
.removed {
 background: #990000;
 color: #FFFFFF;
}
.first {
 margin-left: 0;
 padding-left: 0;
}
.last {
 margin-right: 0;
 padding-right: 0;
}
.top {
 margin-top: 0;
 padding-top: 0;
}
.bottom {
 margin-bottom: 0;
 padding-bottom: 0;
}

Cualquier ulterior modificación, corre por cuenta y orden de cada uno. Pero, esto establece una buena hoja de estilos de cara a la Accesibilidad.