Consulta básica sobre tipografía

He realizado varios sitios web, pero recientemente he comenzado a preocuparme por el hecho, netamente estético, de que las tipografías que se visualizan en una página web salen pixeladas, sobre todo cuando son de un cuerpo pequeño.

La preocupación viene por la diferencia entre cómo se ve la tipografía en el JPEG que uno presenta al cliente como boceto de diseño (tras haber diseñado en Ilustrator, por ejemplo) y el resultado final, una vez subida la página al servidor.

¿Alguien sabe si tiene solución este tema o simplemente hay que resignarse a que las tipografías se vean pixeladas en las páginas HTML?

Gracias.

Omar.

Pues hasta donde yo no es posible en HTML
Pero si manejas Flash puedes hacerlo ahí
Solo debes de escribir el texto en tipo: Dynamic Text ó Texto dinámico para habilitar la función Copiar y Pegar a la hora de que sea visto en el navegador.

Sí, en Flash seguro se ve bien, justamente mi duda era sobre HTML. Debe ser por eso que muchos sitios optan por usar tipografías en gris, evitando así un contraste muy chocante del negro pixelado de las letras sobre los fondos claros.

Gracias.

Cuando vas a hacer un diseño en las secciones que sabes que es un texto para web, solo debes limitarte a usar familias de fuentes que estan instaladas en la mayoria de pc's o mac's. Las que se usan en CSS son las siguientes familias:

Arial, Helvetica, sans-serif
Times New Roman, Times, serif
Courier New, Courier, monospace
Georgia, Times New Roman, Times, serif
Verdana, Arial, Helvetica, sans-serif
Geneva, Arial, Helvetica, sans-serif
Tahoma, Arial, Helvetica, sans-serif
Trebuchet MS, Arial, Helvetica, sans-serif

Y cuando haces los bocetos, en lugares donde son parrafos, etc, lugares donde sabes que el texto es para web no uses suavizados, yo no he usado illustrator pero por ejemplo en Photoshop, donde estan las propiedades de texto hay un combo para seleccionar el metodo de anti-aliasing, y ahi selecciono None (ninguno), para que no aplique nada y se ve ya algo mas real como estaria en una web.

Y es posible que en titulos desees usar una fuente distinta con suavizado, puedes usar metodos como sIFR quer te permite renderizar fuentes no comunes en una website, esto solo se debe usar en lugares pequeños como en ciertos titulos, pero no debe ser usado para parrafos completos o textos largos.

Normalmente si utilizas tipografía del sistema como te señala drarock no debe pixelarse el texto.
Ahora, si en el css utilizas pixel como unidad de medida para el texto, es seguro que vas a verlo variar de tamaño según el navegador. Para evitar esto, lo mejor es que utilices como medida em, y una manera de asegurarse que en cualquier navegador tu texto se vea del mismo tamaño es colocar en el css:

Código :

body { font-size: 62.5% } 

Esto lo que hace es crear un promedio para que utilices los em como pixel pero que se vea bien en todo lado.
Por ejemplo tamaño para el parrafo 1.2em siendo el 1.2em = 12 pixel
1.3em = 13 px y así, con esto no tiene porque verse pixelado el texto, pruebalo y nos cuentas como te va.

Es extraño, onpress, lo que me contás, porque tuve muy malas experiencias utilizando em y %; los tipos variaban mucho el tamaño de monitor a monitor.

Justamente, poniendo font-size en px es la única forma en que el tamaño del texto no varía. Sucede que algunos usuarios tienen configurado el monitor con letras muy grandes; el pixel mantiene un tamaño constante. No obstante, no lo he probado poniendo, como tu dices, la condición body {font-size: 62.5%}.

Así es, utilizando {font-size: 62.5%}. en el css, te aseguras que se vea en todo lado igual, a mi me ha resultado y lo he visto en varios equipos y navegadores.
salu2

Puedes usar un reset para fuentes como el de yahoo

http://developer.yahoo.com/yui/fonts/

te sirve para darles un tamaño estandar a las fuentes de una forma facil

saludos

mmmm con todo respeto, creo que tanto onpress como fack.us se salieron un poco del tema que nuestro colega elmaluf tenia en un principio, el dijo:

elmaluf escribió:

En HTML o un apagina web, las fuentes si son pixeleadas en algunos buscadores Chrome, Firefox, Opera, entre otros, algunos si le aplican un suavizado como IE7 y Safari. Pero el problema de elmaluf es que cuando el presenta sus diseños en el JPG (como todos) los lugares donde va cualquier texto 'web' no le esta quitando el ANTI-ALIASING que hay en las propiedades de un texto en el editor de graficos que este usando, él dice que usa Illustrator para diseñar su web y de ahi mostrarle al cliente, y pregunta si hay alguna forma de mostrar estos JPG's mas pegados a la realidad de un browser, y si que la hay, es buscar en las propiedades de texto y no utilizar ningun metodo de Anti-Aliasing, en Photoshop que es la herramienta que yo uso, sale en las propiedades de texto en un combito 'anti-aliasing method' (no tiene ese label escrito pero si se pasa el mouse sale eso). No se si Illustrator tendra la misma opcion, puede que si, pero en todo caso, eso es lo que se usa para que la fuente se vea con sus pixeles sin suavizar, asi ya no tendra el problema de que presenta un JPG con el diseño a su cliente y luego sale distinto al momento de desarrollar debido a las fuentes web.

Espero haberme hecho entender.

Estimado drarock:

En realidad mi intención al poner este tema de relieve era saber si alguien conocía una forma de que los navegadores suavicen las letras; porque en realidad a mí no me gusta que las letras se vean pixeladas, preferiría que se vean más parecidas al Ilustrator. No obstante, tu consejo me pareció muy práctico para evitar problemas o malosentendidos con los clientes.

Por otro lado, una de las cosas que más me gustan de este foro es que cada vez que uno saca un nuevo tema aprende mucho, justamente por la variedad de opiniones e ideas que todos aportan, algunas derivadas, incluso, de errores de interpretación de las preguntas.

Creo que todos hacemos un excelente equipo a la hora de compartir temas.