¿El tipo de mi sitio web en el navegador web se verá exactamente como en Photoshop?

Quiero asegurarme de que mi diseño se vea en la web exactamente como se ve en Photoshop o InDesign.

no puedes

La razón es que, para empezar, no hay una forma 'exacta' de que su sitio funcione en la web. Cada navegador, cada sistema operativo, cada preferencia de usuario final, cada pantalla, cada hardware traerá a la mesa alguna variación.

Esta es la razón por la que tanta gente sugiere que ya no diseñes sitios web completamente en Photoshop y que en su lugar utilices Photoshop como una herramienta de dibujo, pero que conviertas tu diseño en marcado y CSS tan pronto como puedas. Esto le permite diseñar con la variabilidad en lugar de luchar contra ella.

Un poco sorprendido por algunas de estas respuestas que no abordan el problema más grande... A menos que me esté perdiendo algo aquí...

Preguntar si Photoshop funcionará o no con fuentes web es como preguntar si puede surfear grandes olas en su Honda Civic. Ni siquiera son del mismo reino.

CUALQUIER COSA que hagas en PS, en algún momento, será escupido como una imagen de algún tipo. En ese punto, las fuentes que funcionan o no funcionan son completamente discutibles. Son solo píxeles entonces. Es exactamente por eso que Adobe Muse exporta fuentes que no son seguras para la web como imágenes... porque, por supuesto, aparecerán. No importa si es Helvetica o la fuente de visualización gratuita más horrible que jamás hayas visto, terminará como píxeles en PS.

Ahora, si solo está hablando por el bien de las maquetas, entonces sí, manténgalo seguro en la web cuando esté en PS. Incluso si no está seguro, cuando comience a diseñar y tenga algo que no sea seguro para la web, simplemente use Google Fonts o TypeKit o algo así para encontrar un reemplazo adecuado.

No. Quizás. Probablemente no.

En primer lugar, para las personas que tengan dudas, seguramente pueden usar fuentes web en Photoshop, si pueden descargar los formatos de fuente requeridos. Esto le permite tener una idea de cómo se verá su tipo en la web, no una representación exacta.

¿Por qué? Bueno, en pocas palabras, Photoshop e InDesign ofrecen algunas herramientas que los navegadores aún no ofrecen. Lo que es más importante, los navegadores carecen de un algoritmo anti-aliasing bueno y versátil para el texto. Los productos de Adobe suavizarán automáticamente las líneas finas, mientras que el navegador puede dejarlas irregulares. Aún más frustrante es que estas inconsistencias son bastante inconsistentes en sí mismas; el texto puede verse maravilloso en Firefox pero feo en Chrome.

Entonces, 100% de coincidencia? Olvídalo. Sin embargo, aquí hay algunos consejos generales para que sus fuentes se vean mejor en línea:

• ¿Líneas finas que parecen irregulares? Cambie su font-sizepor un píxel.
• Alternativamente, agregue un diminuto text-shadow(<1 px) a su texto. Hará que su texto se vea un poco menos nítido, pero modifique esto lo suficiente y se verá mejor que nunca.
• Use letter-spacing, especialmente en encabezados grandes. Acérquelos muy ligeramente.
• Puedes mejorar drásticamente la legibilidad jugando con line-height.

TL; DR No espere una coincidencia exacta en PS y navegadores, pero use las herramientas tipográficas que CSS le ofrece.

Hay fuentes seguras para la web y recursos de fuentes en línea a los que puede hacer referencia, y las tecnologías para la tipografía web que usan fuentes cambian rápidamente, al igual que las pautas. Intenté usar Web Preflight ( https://www.oss-usa.com/web-preflight?promo=web-preflight ) para el pase inicial en los diseños web de Photoshop, funciona bastante bien.