Instrucciones para dar a un diseñador de impresión que busca usar fuentes que no sean del sistema para sitios web

Tiene algunos problemas separados aquí, primero recomendaría señalar a los diseñadores hacia cualquiera

http://www.fontsquirrel.com y http://www.google.com/fonts/

Estos sitios contienen fuentes CC que funcionan perfectamente en la web y son de uso completamente gratuito, y hay instrucciones en el sitio sobre cómo agregarlas a sus sitios web, así como una descarga para que puedan usarse en aplicaciones de diseño.

En segundo lugar, recomendaría darles a sus diseñadores una plantilla de marco CSS para trabajar, algo como bootstrap (hay muchos otros que elijan su preferencia) sería bueno para esto.

http://twitter.github.io/bootstrap/ - el propio marco

http://benstewart.net/2012/06/bootstrap-responsive-photoshop-templates/ - una plantilla psd (esta fue una búsqueda rápida, puede haber mejores disponibles).

Si puede hacer que diseñen usando la cuadrícula, tal vez pueda lograr resultados mucho más cercanos a sus diseños.

Cuando me encuentro con diseñadores de impresión que se niegan a entender el medio, generalmente me siento y explico la diferencia:

En PhotoShop = usted, el diseñador, puede dictar el diseño.

En HTML/CSS = usted, el diseñador, simplemente sugiere lo que puede ser.

Entonces, el PSD es una gran sugerencia, usted, el desarrollador, implementará eso, pero en última instancia, depende de cada persona individual, configuración de preferencias, navegador web, pantalla de computadora y sistema operativo decidir qué tan cerca se adherirá a su sugerencia.

Más allá de eso, en general, cosas a tener en cuenta para escribir en la web:

• para el cuerpo del texto, un tipo de letra con una gran altura de x puede hacer que las cosas sean un poco más fáciles de leer
• evite establecer un tipo de tamaño inferior a 11px (
• el suavizado de fuentes está dictado por el navegador y el sistema operativo. Variará de una máquina a otra, de un navegador a otro
• Las fuentes web pueden ser excelentes, pero debido a problemas de suavizado de fuentes en algunas situaciones, es posible que desee relegar su uso para mostrar caras (títulos)

En el pasado, las fuentes populares estándar del sistema se llamaban fuentes " seguras para la Web ". Muchos en el diseño web han considerado una buena práctica apegarse a estos. ¿Por qué preguntas? Durante los primeros días de Internet, no había realmente una fuente estándar que se usara y se representara en todas las diferentes plataformas. Sin embargo, había fuentes con más probabilidades de ser la computadora de una persona, como Arial, Helvetica y Times New Roman.

Pero hoy en día, las cosas son un poco diferentes. Con los navegadores modernos, ahora es seguro usar " fuentes web ", que es una técnica que usa un archivo de fuente remoto para representar una fuente específica en una página web usando @font-face , lo que brinda más libertad creativa y flexibilidad al diseñar una página web. Este no es de ninguna manera un concepto nuevo, ha habido al menos un soporte parcial que se remonta al menos hasta IE 5.5.

@font-face se ha incluido formalmente en la versión más reciente de los estándares CSS de W3C (CSS3, se eliminó de CSS2.1). La API de fuentes de Google ofrece una forma rápida y fácil de hacer que las fuentes de su biblioteca se puedan usar al instante, generando el código que necesita después de elegir la fuente que le gusta.

@import url(http://fonts.googleapis.com/css?family=Open+Sans);
body { font-family: 'Open Sans'; }

Pero eso no significa que pueda volverse loco con sus opciones de fuentes web. Debe tomar medidas para usar una pila de fuentes CSS, para asegurarse de degradar con gracia su experiencia de texto en caso de que su elección no se cargue.

body {font-family: "Open Sans", "Arial", "Helvetica", sans-serif; }

Una pila de fuentes CSS debe incluir fuentes seguras para la web similares, siendo la última declaración en la pila una familia de fuentes genérica ("serif" o "san-serif"). Lo que sucede es que si su navegador no puede encontrar una fuente, busca la siguiente en la línea.

Pero ¿Por qué es importante? Después de todo, el uso de fuentes seguras para la web y pilas de fuentes CSS parece anticuado, especialmente porque @font-face tiene un gran soporte en todos los navegadores modernos.

Hay un par de razones... una de ellas es la integridad de estas fuentes. Es posible que ciertos caracteres de la fuente elegida no estén disponibles (esta fuente carece del carácter ™). Cuando eso sucede, el navegador intentará representar los caracteres no disponibles utilizando la siguiente fuente en su pila de fuentes CSS. Si no tiene una pila de fuentes de este tipo, el navegador usará su fuente estándar predeterminada (puede establecer esta en la configuración de su navegador). ¿Por qué sería esto un problema? Digamos que tiene un título serif (como Times New Roman) en la fuente mencionada y la fuente predeterminada de su navegador es una fuente san-serif (como Arial). La falta de coincidencia entre los dos estilos diferentes no necesariamente se ve bien. No tienes control sobre lo que debería tener la fuente predeterminada de tu navegador, ni deberías intentarlo.

Otra razón sería la propia Internet. En ocasiones, la gente se cae de Internet y también los servicios en Internet. Estas fuentes que tienes están alojadas en Internet. Si el servicio que lo aloja falla, incluso si es la mejor fuente del mundo, nunca se cargará, sino que usará el estándar predeterminado de su navegador, a menos que especifique una fuente segura para la web en su pila de fuentes CSS. El sitio web puede verse drásticamente diferente si, de repente, el archivo de fuente deseado no está disponible debido a algún tipo de interrupción del servicio.

Puede deshabilitar la descarga del lado del cliente de fuentes web a través de su navegador. Pero, ¿por qué querrías hacer esto? Esta es una de las razones más pasadas por alto, el rendimiento. Esto es más deseable para los usuarios que tienen conexiones a Internet lentas por una u otra razón. En la mayoría de los casos, la forma de hacer esto en un navegador es algo confusa. Podría llevar 1,2 segundos más cargar una fuente desde la API de fuentes de Google, cuando la página normalmente se cargaría en 0,011 segundos. Si bien damos por sentada la velocidad, dado que la banda ancha rápida está disponible en la mayoría de los países desarrollados, es importante asegurarse de que la visibilidad y la consistencia de la tipografía de su sitio no se vean afectadas por la restricción del usuario (opción de accesibilidad) o su plataforma (ancho de banda, navegador).

Entonces, para cerrar, lo que estoy tratando de decir es que está bien usar fuentes que no son seguras para la web para que las cosas se vean bien, pero no se vuelva loco y confíe en ellas, ya que no se crean todas las experiencias de los usuarios. iguales (los navegadores mis fuentes de procesamiento tienen un tamaño predeterminado diferente según el navegador y/o la configuración del sistema, por ejemplo, ClearType). Realmente no puede decirle a un usuario cómo usar su sitio, pero puede decirle cómo puede obtener la mejor experiencia. Si no pueden cumplir, asegúrese de ajustar las cosas en consecuencia para que aún puedan tener una buena experiencia. Las cosas en la web no están necesariamente escritas en piedra (o en tinta y papel). La flexibilidad variable de Internet permite a los usuarios ofrecer contenido de la manera que les resulte más cómoda.

si lo leí correctamente, desea las técnicas más eficientes para representar la fuente en la web. en ese caso, como ya se mencionó, vaya a fontsquirrel y use su generador de sintaxis/formato @font-face, escribe la declaración @font-face para usted, aunque yo edito la mía, pero lo más importante, crea copias de la fuente deseada en otros formatos, apuntando a otros navegadores/plataformas, logrando efectivamente lo que desea.

Dicho esto: todavía hay diferencias muy claras en algunas versiones de Windows y el uso de DirectX. También he tenido fuentes deficientes en chrome en win7 desde hace un tiempo. Aparte de los problemas de Chrome, la mayoría de estos son problemas caso por caso. hay algunas propiedades css3 que tienen una implementación limitada del navegador y, por lo general, los problemas que veré se pueden solucionar modificando estos...

dicho esto: las fuentes de google, typekit, etc., tienen (alguna) optimización incorporada, para tratar específicamente los casos que mencioné anteriormente... no soy un gran admirador de ninguno de los dos, porque la primera regla de terceros dependencias es evitar las dependencias de terceros. ;)
por supuesto que no es realista, pero los recorte tanto como sea posible. También me gusta que rodar el mío propio no dependa de javascript, además de hacer solicitudes http adicionales y, por último, me permite elegir a mano a través de la declaración @font-face, editar/recortar donde mejor me parezca.

1. Debe explicarles que cuando se trata de sitios web, no puede lograr una consistencia del 100 % en todos los millones de variables, solo puede tomar los pasos que estén a su alcance para lograr la mayor consistencia posible. La forma en que DA01 lo expresa en su respuesta es una manera muy sucinta y fácil de transmitir el mensaje.

2. Luego les diría que decidan primero sobre el estilo de fuente en lugar de una fuente específica.

3. Luego, solo después de decidir el estilo, observe las opciones disponibles con un enfoque sistemático desde las peores condiciones posibles hasta las condiciones ideales.
   Comience con las fuentes básicas del sistema (las 5 fuentes admitidas universalmente) y continúe. Podrían elegir algunas fuentes del sistema que son menos compatibles y luego una única fuente web ideal. (No desea cargar y renderizar muchas fuentes web en una página, como probablemente sepa).

No se acerque a hablar sobre la tarea como si estuviera abierta a discusión, en su lugar, explíqueles que es su responsabilidad como buen diseñador saber y tener en cuenta estas cosas si quieren diseñar con éxito para la web.

Hay otra pregunta reciente que puede ser útil para usted:

¿Es aceptable usar tipos de letra diferentes pero similares para contenido impreso y contenido web?