he visto esta pregunta en SO:mejor tamaño de la práctica de fuente para el móvil
What are the most common font-sizes for H1-H6 tags con esta siendo el tamaño de las fuentes recomienda fo etiquetas H:
h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.17em; }
h5 { font-size: .83em; }
h6 { font-size: .75em; }
¿Hay una 'mejor práctica' para éstos para teléfonos móviles? -digamos el tamaño de la pantalla del iphone?
Los tamaños de fuente en su pregunta son un ejemplo de qué proporción debe tener cada encabezado en comparación entre sí, en lugar de qué tamaño deberían ser ellos mismos (en píxeles).
Así que en respuesta a su pregunta "¿Hay una 'mejor práctica' para éstos para teléfonos móviles - dicen que el tamaño de la pantalla del iPhone?", Sí es probable es - pero podría encontrar lo que alguien dice es "la mejor práctica "no funciona para tu diseño.
Sin embargo, para ayudarlo a seguir el camino correcto, this article about building responsive layouts proporciona un buen ejemplo de cómo calcular la base font-size en píxeles en relación con los tamaños de pantalla del dispositivo.
Los tamaños de fuente sugeridos para resoluciones de pantalla sugeridas de ese artículo son los siguientes:
@media (min-width: 858px) {
html {
font-size: 12px;
}
}
@media (min-width: 780px) {
html {
font-size: 11px;
}
}
@media (min-width: 702px) {
html {
font-size: 10px;
}
}
@media (min-width: 724px) {
html {
font-size: 9px;
}
}
@media (max-width: 623px) {
html {
font-size: 8px;
}
}
dice usar 'rem' en lugar de' em'. 'em' hereda de parent, mientras' rem' es directamente de 'html'..as se puede ver aquí en el violín que hice http://jsfiddle.net/5qb4x/ –
Prefiero decir que ir por debajo de 12px ya está malo. Bueno, incluso 8px es legible, pero no es tan fácil de leer como 12px o similar. El usuario debe ver el texto en el tamaño, que le dará la oportunidad de leer el texto sin escalar o sostener el teléfono cerca de los ojos. ** Contenido ** es esto lo que los clientes buscan en nuestro sitio web, no el fondo blanco con letras minúsculas;) – instead
Otra razón por la cual cualquier <12px es malo es porque algunos navegadores (como Chrome con un paquete de idioma chino) representarán algo más pequeño que 12px como 12px. Por esa razón, nunca me quedaría por debajo de 12px, y tomaría a cualquiera que te lo diga con un grano de sal. –
Todo el asunto es que el tamaño es relativo a la base. Entonces, yo diría que puedes mantener los tamaños de fuente alterando la base.
Ejemplo: Si la base es 16px, y p es .75em (que es 12px), tendría que elevar la base a aproximadamente 20px. En este caso, p sería igual a 15px, que es el mínimo que personalmente requiero para teléfonos móviles.
Pero esto no se trata de tamaño de fuente base. Si lo fuera, yo diría que depende del ancho de la pantalla. Ya sabes, con una regla '@ media'. Esto se trata de la relación de encabezado a normal, y luego no se puede hacer mejor que usar ems. –
Lo siento pero no está de acuerdo con usted mismo. "Proporción de encabezado a normal": ¿cuál es el tamaño normal? Exactamente la base, que se mide en px, porque los medios constan de píxeles. Si desea usar em, debe establecer una base (16px es estándar en la mayoría de los navegadores). –
Usted no entiende la pregunta entonces. La pregunta no es sobre cuál es el mejor, digamos, el tamaño del cuerpo. Se trata del tamaño de los encabezados, en relación con el tamaño normal. Y em no es relativo a un tamaño indefinido que debe establecer primero, es relativo al tamaño en el elemento principal (cuerpo en este caso). Si no establece un tamaño para el cuerpo, el navegador usará su predeterminado. Por lo tanto, el navegador siempre sabrá qué tamaño tiene una em en píxeles, incluso si no fuerza el tamaño de una base en el usuario. –
Basado en mi comentario a la respuesta aceptada, hay un potencial de lote escollos que pueden surgir al declarar Font- tamaños más pequeños que 12px. Al declarar estilos que conducen a tamaños de fuente calculados de menos de 12px, así:
html {
font-size: 8px;
}
p {
font-size: 1.4rem;
}
// Computed p size: 11px.
se encontrará con problemas con los navegadores, como Chrome con un paquete de idioma chino que hace que automáticamente cualquier tamaño de las fuentes calculan bajo 12px como 12px. Por lo tanto, lo siguiente es cierto:
h6 {
font-size: 12px;
}
p {
font-size: 8px;
}
// Both render at 12px in Chrome with a Chinese language pack.
// How unpleasant of a surprise.
Yo también diría que por razones de accesibilidad, por lo general, no debe utilizar tamaños bajo 12 píxeles. Es posible que pueda justificar los subtítulos y cosas por el estilo, pero de nuevo, prepárese para sorprenderse con algunas configuraciones de navegador y prepárese para hacer que su abuela entreceje cuando intente leer su contenido.
En vez de ello, optar por algo como esto:
h1 {
font-size: 2.5rem;
}
h2 {
font-size: 2.25rem;
}
h3 {
font-size: 2rem;
}
h4 {
font-size: 1.75rem;
}
h5 {
font-size: 1.5rem;
}
h6 {
font-size: 1.25rem;
}
p {
font-size: 1rem;
}
@media (max-width: 480px) {
html {
font-size: 12px;
}
}
@media (min-width: 480px) {
html {
font-size: 13px;
}
}
@media (min-width: 768px) {
html {
font-size: 14px;
}
}
@media (min-width: 992px) {
html {
font-size: 15px;
}
}
@media (min-width: 1200px) {
html {
font-size: 16px;
}
}
usted encontrará que tonsofsites que tiene que centrarse en el uso de accesibilidad bastante grandes tamaños de fuente, incluso para p elementos.
Como nota al margen, establecer margin-bottom igual a font-size generalmente también suele ser atractivo, es decir:
h1 {
font-size: 2.5rem;
margin-bottom: 2.5rem;
}
Buena suerte.
¿Cómo fuerzo los tamaños de fuente calculados en 12px? Si lo configuro en 10px, quiero que sea 10px no 12px.? – MrCalvin
En algunos navegadores, no se puede. Creo que la versión china de Chrome hace esto porque el texto chino <12px es completamente ilegible. No estoy seguro de otras distribuciones de Chrome, pero supongo que es seguro decir que es posible que otros idiomas también tengan este conjunto de "tamaño mínimo". Por esa razón, y por razones de accesibilidad en general, es una buena idea mantener los tamaños mínimos en 12px. No es una mala idea de todos modos. Las empresas como google investigan mucho sobre accesibilidad y rara vez usan tamaños de fuente <12px. –
¿Con qué base em, 16px? –
La única recomendación que puedo dar es que sí, los ems son el camino a seguir, no los píxeles, como sugiere la otra pregunta. Pero depende. Por ejemplo, si el texto de una h1 es grande (como, una oración completa), encuentro que 2em es un poco abrumador y me gustaría ir con un tamaño más pequeño. –
Bueno, sabes que em es una medida relativa ¿no? Entonces 1em sin base no significa nada. –