Tamaño de fuente recomendado y familia de fuentes para el contenido del sitio web

Si está tratando con una audiencia mayor y los problemas de visión son una preocupación, Verdana realmente aprovecha al máximo sus píxeles. 11px en Verdana está cerca de 14 en muchos otros.

Por la misma razón, muchas personas piensan que Verdana es la fuente más fea de la web. Como siempre, ten cuidado con cómo usas tu tipo. Verdana y Georgia fueron diseñados por uno de los mejores diseñadores tipográficos de la era moderna (Matthew Carter) y destinados a un uso pequeño en pantalla. No te vuelvas loco y utilízalo en todas partes... ¿estás escuchando a Ikea?

En términos de estilo (supongo que te refieres al peso), apégate a 'regular' o 400 para la mayor parte de tu texto. En muchas fuentes, la negrita es demasiado oscura o densa para facilitar la lectura.

Asegúrese de probar su fuente/tamaño/peso en varios navegadores y sistemas. En este momento, colocaría IE 7 en Windows XP como el abusador de tipo más brutal entre los principales jugadores. He visto a IE 8 superarlo con algunas fuentes web. IE 9 adopta un nuevo enfoque que puede adelgazar las fuentes, pero generalmente se ven bien. Casi todo se ve mejor en los navegadores de Mac. Todo depende de las estadísticas siempre críticas de su sitio.

100% es la respuesta estándar. Pero para ser más específicos, la mayoría de las pautas de accesibilidad sugieren al menos 11 píxeles.

Pero en sí misma, esta pregunta es bastante vaga y carece de mucho contexto.

Pensaría en fuentes modernas y sans serif que sean fáciles de leer y que tiendan a ser estrechas. Me gusta la fuente de Oswald . También es una fuente basada en Google. Como decía Angie arriba, de 13 a 14 puntos sería un buen lugar para quedarse.

En términos generales, 16px es estándar . Lo recomiendan Typecast , Smashing Magazine (irónicamente, el artículo ahora usa un tamaño de fuente de ~20 px para mi dispositivo), UX.SE , los navegadores más comunes y muchas otras fuentes. 16px corresponde a una fuente de 12 puntos en la mayoría de los libros que se leen a la misma distancia. Cada uno de los enlaces aquí son buenas lecturas sobre el tema si desea leer más razonamiento.

Dicho esto, está bien variar según el contexto porque hay muchos factores con respecto a la legibilidad, incluidos (los temas generales de) audiencia, propósito y otras cualidades tipográficas. Para las páginas con mucha información que no debe leerse por completo, se recomienda usar un tamaño de fuente un poco más pequeño, entre 12 y 14 px.

Extrayendo de una respuesta mía relacionada que habla sobre el tamaño de fuente óptimo:

Como es el caso con casi todo en el diseño, la forma en que se presenta su contenido debe diferir en función de lo que está presentando y a quién se lo está presentando. StackOverflow tiene gran tipo (IMO) para su uso porque transmite una gran cantidad de información en un espacio relativamente pequeño mientras se mantiene limpio. [Utiliza un tamaño de fuente de 14px]. Sin embargo, nunca usaría una fuente tan estrecha y pequeña como esta en un blog personal.

Personalmente, me encanta el tipo del blog Coding Horror de Jeff Atwood . Utiliza un tamaño de fuente de 17 px para escritorios y una altura de línea de 27 px (ambos determinados por ems). Para dispositivos móviles, reduce el texto a 15 px y la altura de la línea a 24 px. La fuente que eligió es Open Sans, una opción muy común y sólida, con sans-serif como alternativa.

Como se indicó, la legibilidad de una fuente también se basa en el contraste, la altura de la línea (muy importante) y la familia de fuentes. Cuanto más débil sea el contraste, más grande probablemente tendrá que ser la fuente. Para la legibilidad de cuerpos de texto más largos, tener una altura de línea más grande realmente puede ayudar a la legibilidad. Por ejemplo, en mi extensión de lector de artículos de Chrome utilizo una fuente de 16 px con una altura de línea de 1,75 em.

Legibilidad de la familia de fuentes, consulte esta publicación de GraphicDesign.SE preguntando sobre la mejor fuente para la legibilidad.

El debate entre serif y sans-serif también es un tema muy amplio que debe abordarse por separado. Para obtener más información al respecto, consulte esta publicación de GraphicDesign.SE y una pregunta similar en UX.SE.

Para obtener más detalles, lea los enlaces a lo largo de esta publicación.

No estoy seguro de lo que quiere decir con "estilo" de fuente. Pero para el tamaño de la fuente, dependerá un poco de la fuente, pero 13 px es un buen punto de partida para el texto normal. 14px suele ser mejor. Por supuesto, eso es si está utilizando píxeles para el tamaño de fuente. Sin embargo, hacer coincidir eso con ems o % no es difícil.

También puede considerar usar CSS/Javascript para cambiar el tamaño de la fuente de forma dinámica en función de que un usuario haga clic en +/- o similar.