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 WebEn
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.
Luego del lavado de cara que Olga Carreras ha llevado a cabo en su blog, Usable y accesible; me encuentro con la novedad de un excelente recurso que nos brinda Olga con respecto a la Usabilidad y la Accesibilidad Web.
Mi nombre es 
