Digamos que diseñaste algo con fuentes personalizadas que era un poco elegante. Tal vez una determinada palabra esté colocada entre los ascendentes de otra palabra debajo de ella. Parte del texto se separa a continuación para que coincida con el ancho de esa misma palabra.
Esto es algo que podríamos decirle a un diseñador gráfico que cambie de impresión a web que evite. Es demasiado quisquilloso. Demasiado posicionamiento absoluto delicado e inescalable. Demasiado riesgo por el diferente comportamiento de representación de fuentes.
Pero con SVG en línea, podemos hacerlo y hacerlo bien.
SVG
El gran “truco” aquí es que SVG tiene un <text> elemento que es solo eso: texto. No esbozos de texto, solo texto web seleccionable y accesible.
<svg xmlns="http://www.w3.org/2000/svg"
width="800px" height="300px" viewBox="0 0 800 300">
<text x="25" y="55"
font-family="'Lucida Grande', sans-serif"
font-size="32">
Regular ol' text here. Hi.
</text>
</svg>Ver.
está feliz de usar fuentes personalizadas
Utilizando @font-face y fuentes personalizadas en su sitio? No hay problema. Ese SVG está feliz de usarlos. Esto funciona con SVG en línea, donde puede configurar la familia de fuentes con CSS:
<text class="hook">Some Cool Text Yeah.</text>.hook {
font-family: "proxima-nova", sans-serif;
}pero incluso funciona para SVG-as- (o
background-image, presumiblemente) también, siempre que la familia de fuentes haga referencia a la fuente personalizada con el nombre correcto.
<text x="25" y="55"
font-family="'proxima-nova', sans-serif"
font-size="32">Usar software de diseño
No he probado un montón de software diferente, pero Adobe Illustrator puede “Guardar como” SVG. Cuando diseñas con elementos de texto, <text> es lo que obtienes en el archivo .svg.
Es posible que deba hacer algunos ajustes manuales para eliminar o ajustar los atributos/estilos de fuente.
La belleza de esto es que elimina la complicada tarea de posicionar con CSS y te permite hacerlo bien en un software que lo hace increíble. Luego, el posicionamiento real ocurre con esa transformación de matriz.
Escala perfectamente
Si estuviera tratando de replicar un diseño como este solo en HTML/CSS, no es solo que el posicionamiento sería complicado, es que no se escala. Algo como font-size: 41px; top: 37px; left: 81px; funciona solo en un tamaño. Tal vez podrías hacer algo con vw unidades y porcentajes y esas cosas, pero es mucho más fácil en SVG.
En SVG, el tamaño de fuente que establezca es relativo al tamaño del propio SVG, no del documento completo. Entonces, si ajusta el tamaño del SVG (puede ser fácilmente ancho fluido), su diseño tipográfico permanece perfectamente intacto.
Una configuración de ancho fluido:
<div class="ad-wrapper">
<svg class="ad">
<text ... />
<text ... />
<text ... />
</svg>
</div>/*div*/.ad-wrapper {
height: 0;
padding-top: 100%;
position: relative;
}
/*svg*/.ad {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
Escalas proporcionalmente. El texto todavía se puede seleccionar de forma normal.
Diseño con tipografías que tengas en la web
Este flujo de trabajo funciona mejor si puede usar el software local con las fuentes que también tiene disponibles a través de @font-face. Por ejemplo, si estuviera trabajando en Open Sans, podría descargar una copia para uso de escritorio desde Font Squirrel pero luego usarla en la web a través de Google Fonts.
Creo que Typekit hace que este flujo de trabajo sea bastante bueno, con su función de sincronización de escritorio. Cuando elige fuentes, puede agregarlas a un kit para usar en la web, así como sincronizarlas localmente a través de Creative Cloud.
Entonces están disponibles directamente en Illustrator.
Es un poco raro porque los nombres de las familias de fuentes estarán un poco fuera de lugar. Por ejemplo, puede obtener como
<text font-family="'MarketOT'">Example</text>de Illustrator, pero en la web tendrá que ser como
<text font-family="ff-market-web, cursive">Example</text>Pero bueno, eso es solo parte del trabajo. Tal vez haya una buena razón para ello. Tal vez algún día puedan sincronizar esas cosas.
Cuándo usar
Si está utilizando las mismas fuentes personalizadas en otras partes del sitio, es obvio, continúe y use <text> diseños basados según sea necesario. Si las fuentes en uso no se usan en ningún otro lugar, podría ser una tarea difícil incluir una fuente personalizada completa solo para usar en un solo gráfico. O tal vez no. Tendrás que equilibrar las opciones tú mismo.
En el ejemplo que he usado aquí, usé Proxima Nova y FF Market de Typekit, y el Kit costaba alrededor de 115K. No está mal si el resto del sitio también usa esas fuentes. Pero luego convertí el ejemplo en contornos (es decir, <text> está fuera y <path>s se usan en su lugar para dibujar las formas de las letras), y el archivo se incrementó de un increíblemente pequeño 4K a un increíblemente grande 260K (más grande que todas las fuentes, aunque sin comprimir).
Estoy seguro de que, en algunos casos, el esquema tiene sentido y, a veces, incluso un gráfico de trama de retina funciona, suponiendo que siga todos los pasos de accesibilidad necesarios (un buen alt etiqueta como mínimo).
Manifestación
Aquí hay una demostración que muestra todo en el trabajo, incluido el escalado, la capacidad de selección y las fuentes personalizadas en el trabajo:
Vea el Pen SVG con el ejemplo de Chris Coyier (@chriscoyier) en CodePen.