Problema con Fuentes y porcentajes

Saludos amigos:

Necesito ayuda con el tamaño de las fuentes de una aplicación web, los tamaños están establecidos en porcentajes :

#letrerou
{
color: white;
font-size:110%;
left:11.3%;
position: fixed;
text-shadow: black 1px 2px 1px;
top:32%;
z-index:2;
}

el problema es cuando accedo a la aplicación en otra pc de la red, los tamaños no corresponden y por lo tanto se desfasan o la fuente crece a como se ve en la pc donde programe, trate de colocar el tamaño de letra en el body con % y meter las medidas mediante em y el resultado es el mismo.
Alguien me podría ayudar con este problema, cualquier sugerencia es buena....


Saludos

Usar las fuentes en % es engañoso mientras no le indiques al navegador cuál es tu 100%. Y esto lo puedes hacer con algo como:
html { font-size: 10pt; }
Así el 100% es igual a 10 punto de tipografía (que bien podrían ser 10 píxels también).

gracias por la respuesta,

El problema biene cuando lo veo en pantallas on resolucion diferente a la pantalla en la que se programo la apliccaion, trate como tu dices pero los textos se siguen desbordando, el letrero se queda en su pocicion solamente no respeta el tamaño de la letra del css.

Alguna otra sugerencia..

Saludos

Yo establezco el tamaño en pixeles en body... y en lo demás en 'em'... se ve igual a cualquier resolución

JONATHAN1:

Tendría que ver el sitio funcionando para hacer un buen diagnóstico.

Amigo gracias por la rspuesta pero tampoco, se ve diferente aun poniendo en pixeles en body y lo demas en em, en otras pantallas la letra sigue viendose diferente

Alguna otra sugerencia
Saludos

A ver, sólo para ponerlo claro: No es posible hacer que la letra se vea del mismo tamaño en todas las resoluciones, ni usando pixels ni porcentajes ni ems.
La razón de esto es que el "píxel" no es un tamaño exacto de medida, como el centímetro, por ejemplo, es por ello que "12px" se ven mucho más grandes en una resolución de 800x600 que una de 1280x1024, por decir algo.

Dicho esto, acá unos tips que quizá puedan ayudarte.
En la mayoría de los casos, los navegadores usan 16px para el tamaño de la fuente por defecto. Así que si en tu css escribes

Código CSS :

body{font-size:100%}

en la mayoría de los casos será equivalente a 16px como tamaño de fuente base, por supuesto si tu título tiene un tamaño de 2 em, equivaldría a 32 px, y así con el resto.

Aunque 16px parece funcionar bastante bien para las pantallas de los móviles, hay a quienes les parece muy grande para el desktop, por lo que es bastante usado 87.5% para estos casos, que equivale a 14px (asumiendo que 100% son 16px)

Por otro lado, si vas a establecer un tamaño de fuente relativo (ems o porcentajes), se recomienda en HTML5 Boilerplate usar porcentajes para la base (para evitar un problema que existe con IE7) y pueden usarse luego ems para los demás.

En última instancia, el tamaño real en que vas a ver las fuentes (o de hecho, el resto de tu sitio) va a depender de la resolución de la pantalla. Asi que una solución podría ser el uso de media queries usando device-pixel-ratio para que puedas ajustar el tamaño de fuente de acuerdo a la densidad de píxeles y no sólo el tamaño de la pantalla.

Muchas gracias por el interes en mi post:

Bueno el uso de las media queries se me hace una solucion bastante buena, solo que en un determinado momento tendria que poner unas cuantas para cadatipo de resolucion diferente, lo que tengo en mi aplicacion es algo como esto:

<div id="letrerod">MENSAJES</div>

y en mi css:

#letrerod
{
color: white;
font-size:110%;
height: x%;
left:13.1%;
position: fixed;
text-shadow: black 1px 2px 1px;
top:58%;
width x%;
}

en donde el widht y height son valores porcentuales. En todas las resoluciones el div de redimensiona perfectamente al tamaño de la pantalla, gracias a los valores relativos de los %, lo unico que tengo probrema es con la fuente, en mi resolucion el 110% de la fuente cabe perfectamente en el div, logicamente a resolucion de 800*600 (por poner un ejemplo) se ve mas grande y se desborda el letrero, lo mismo pasa en mis formularios, la letra crece y me hace un desorden.
Hay alguna manera en que la letra se adapte al cambio sin el uso de las media queries? porque a lo que investigue, necesitaria poner varias, tambien he visto en paginas de internet que la letra se acopla a la resolucion y no se desborda.

Saludos

alguna otra sugerencia


Saludos

Simplemente suscribir la respuesta de The Fricky.
Saludos

no voy a decir nada nuevo... pero por si te aclaro un poco.

los porcentajes van bien , mejor dicho muy bien a pesar de que haya alguien en contra, lo que es lógico.

para que se entienda y no desfase... lo ideal sería meter un tamaño de referencia (si se quiere), en el inicio.

por ejemplo un font-size: 20px;

el resto sería en porcentajes, es decir:

para títulos: 120%
para subtitulos: 100%
texto: 80%
notas: 60%
pies de foto: 30%

¿que se consigue de esta manera?, que este en la resolución que esté, cada texto será proporcional dependiendo de su función. Esto NO quiere decir que se vea muy grande o muy pequeño, pero SI proporcional.

¿Y?¿que soluciono con esto?.. realmente nada, pero tu diseño tendra una estructura definida...

Moraleja: Cada uno puede, en su navegador, aumentar las fuentes o disminuirlas (sólo (o eso creo)) si están en porcentajes, las resoluciones de pantalla dependerá de cada pantalla. Es como si quisieramos que vieran los colores en un monitor de blanco y negro.

bueno después de lo dicho, esto no lo he probado en humanos asi que no respondo de los efectos secundarios.