Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non porta arcu. Duis sollicitudin felis non nibh pulvinar adipiscing. Nulla facilisi. Quisque tempor erat eu est hendrerit sollicitudin. Praesent facilisis tincidunt magna, quis luctus ligula suscipit id. Morbi nec nunc in magna ullamcorper lacinia non ac ipsum. Suspendisse mollis nibh nec velit vestibulum nec mattis sem commodo. Curabitur non leo turpis. Maecenas sit amet molestie lectus. Donec in turpis in nisi vehicula ultricies eget posuere quam. Cras purus magna, rhoncus quis euismod id, laoreet nec mi. Donec a lectus enim, vel aliquam ipsum. Nam sit amet tellus nec ligula molestie ullamcorper ut vel ante. Phasellus vehicula egestas nulla, vitae sollicitudin dolor sodales eget.
Phasellus vehicula egestas nulla, vitae sollicitudin dolor sodales eget. Sed augue nulla, faucibus a egestas id, mattis non nunc. Sed euismod fermentum est porta tempus.
| 32 | 20 | 3,2 | |||||||||
|
|||||||||||
El tamaño de fuente se establece en la etiqueta body al 62.5% y a un alto de línea de 1.5em.
A partir de aquí, el tamaño de los textos, en ems, será el resultado de dividir entre 10 el tamaño del texto en puntos del archivo psd.
Por ejemplo:
Si un encabezado es de 20pt, su correspondencia en la regla de estilos sería de 2em
Al poner el tamaño de la fuente en el body al 62.5%, el tamaño por defecto del texto de los párrafos, será de 10
pxtoem.com: para establecer el tamaño en base a 16px
| en puntos | 62.5% | ems |
|---|---|---|
| 32 | 20 | 3,2 |
| 30 | 18,75 | 3 |
| 28 | 17,5 | 2,8 |
| 26 | 16,25 | 2,6 |
| 24 | 15 | 2,4 |
| 22 | 13,75 | 2,2 |
| 20 | 12,5 | 2 |
| 18 | 11,25 | 1,8 |
| 16 | 10 | 1,6 |
| 15 | 9,375 | 1,5 |
| 14 | 8,75 | 1,4 |
| 13 | 8,125 | 1,3 |
| 12 | 7,5 | 1,2 |
| 11 | 6,875 | 1,1 |
| 10 | 6,25 | 1 |
| 9 | 5,625 | 0,9 |
| 8 | 5 | 0,8 |
| 7 | 4,375 | 0,7 |
En Opera, hay que indicar la familia de fuentes para los encabezados y campos de entrada de texto, aunque se hayan asignado en la etiqueta body.
body {
font-size:62.5%;
font-family: Georgia, "Times New Roman", Times, serif;
line-height:1.5em;
}
h1, h2, input, textarea, select {font-family: Georgia, "Times New Roman", Times, serif;}
En Internet Explorer 7 no entiende el tamaño de fuente heredado para las listas anidadas; así que hay que especificar el tamaño de fuente en 100% o en 1em;
p, ul, ol, div{
font-size:1.3em;
line-height:1.5em;
text-align:justify;}
ol ol, ul ul {padding:0 0 0 2em; font-size:1em;}
Basicamente se establece un tamaño de fuente para las etiquetas de los elementos en bloque, y en caso de estar contenidos, se establece el tamaño al 100% o a 1em, para que no varíen su tamaño respecto al contenedor.
Con las tablas ubicadas en celdas de tabla.
table {
font-size:1.3em;
}
table table {
font-size:1em;
}
En el caso del formulario que tiene los elementos contenidos en capas en lugar de en párrafos:
form {
font-size:1.3em;
}
/* Ahora, como el párrafo tiene definido un tamaño de 1.3em, para que no incremente su tamaño, lo establecemos al 100% o a 1em */
form p {
font-size:1em;
}