Tipografía
La tipografía utilizada para todos los correos de Saludsa es la FS Silas. Para utilizar esta tipografía se debe utilizar el siguiente snippet dentro del componente <mj-style> en <mj-head>:
/* Normal */
@font-face {
font-family: 'Silas';
font-style: normal;
font-weight: 400;
src: local('FSSilasSansWeb-Regular'), url(http://www.redsaludsa.com/webservices/MarketingImagenes/Silas/fonts/FSSilasSansWeb-Regular.woff) format('woff');
}
/* Bold */
@font-face {
font-family: 'Silas';
font-style: normal;
font-weight: 700;
src: local('FSSilasSansWeb-Bold'), url(http://www.redsaludsa.com/webservices/MarketingImagenes/Silas/fonts/FSSilasSansWeb-Bold.woff) format('woff');
}Se recomienda agregar a la tipografía en los atributos de texto del head del documento y utilizar la tipografía Trebuchet MS como fallback
font-family="Silas, Trebuchet MS, sans-serif"Se estableció una jerarquía en la tipografía para estandarizar tamaños en función de lo requerido, la decisión de usar cada tamaño depende del diseñador y redactor. Pero se adjuntarán recomendaciones de uso para cada tipo.
Tipografía a usar:
Para colocar texto va siempre dentro de los siguientes tags :
<mj-body>
<mj-section>
<mj-column>
<mj-text>Una vez ubicado el <mj-text> se debe colocar la etiqueta de título <h1> o texto normal <p> de la siguiente manera. Por ejemplo:
<mj-text> <h1>HOLA</h1></mj-text>
A continuación se expondrán las posibles jerarquías en tipografía, con su debido ejemplo y explicación.
LargeTitle: Nos ocupamos de tu Salud.
Recomendaciones:
-Normalmente este estilo no se utiliza por su tamaño, pero si se diera el caso deberá ir al inicio del mail como título principal.
Title1: Somos gente honesta y ética.
Recomendaciones:
-Normalmente este estilo se lo usa para títulos o encabezados principales que no tengan más de dos líneas de texto, debido al peso visual. (Usualmente puede variar de color).
Title2: Servimos a los clientes como a nosotros mismos.
Recomendaciones:
-Normalmente este estilo se lo usa para títulos o encabezados principales que tengan bastante texto (más de dos líneas).
-Normalmente se lo usa sin negrilla (en aplicaciones con los respectivos colores de cada categoría) a excepción de las aplicaciones en gris.
Title3: Valoramos y respetamos el medio ambiente y la sociedad en su conjunto.
Recomendaciones:
-Normalmente este estilo se utiliza para sobresaltar una idea principal o algún dato (es en negrilla).
Body1: Un plan de medicina prepagada Saludsa te proporciona acceso a hospitales, laboratorios y centros médicos de prestigio. Planifica cada etapa de tu vida junto a nosotros.
Recomendaciones:
-Normalmente este estilo se lo usa para párrafos de poco texto.
Body2: Un plan de medicina prepagada Saludsa te proporciona acceso a hospitales, laboratorios y centros médicos de prestigio. Planifica cada etapa de tu vida junto a nosotros.
Recomendaciones:
-Normalmente este estilo se lo usa para párrafos de bastante texto y correos no tan formales.
Table:
Texto dentro de las tablas
Button: Botón
Los estilos de los botones podrás ver en la pestaña de botones: https://saludsa.gitbook.io/manual-marca/~/edit/drafts/-LU1F5D3AeVBtd-hHDw5/correos-electronicos/botones
Recomendaciones:
-Normalmente los botones van en mayúsculas.
-Si el botón es de color va con tipografía blanca.
-Si el botón es gris se utiliza en la tipografía el color que corresponda dependiendo del tipo de mail.
Caption: Servicio adicional exclusivo para clientes Saludsa.
Recomendaciones:
-Normalmente se utiliza para textos largos.
Overline: FITNESS
Recomendaciones:
-Normalmente se utiliza para palabras cortas, las cuales pueden ir en mayúsculas.
Little:
Recomendaciones:
-Normalmente es la jerarquía más pequeña que se usa para: indicar, advertir o recordar algo importante.
Footer:
Has recibido este correo como parte de tu afiliación a Saludsa.
Si quieres dejar de recibir estos correos haz clic aquí.
República de El Salvador N36-84 y NN.UU., Quito - Ecuador.
Servicio al cliente a nivel nacional: 60 20 920.
vive@saludsa.com.ec
Recomendaciones:
-Normalmente se lo usa en la parte final inferior del mail.
Style:
Para poder usar automáticamente los estilos antes nombrados en el encabezado del código se pone lo siguiente dentro de <mj-style inline="inline">:
.LargeTitle {
font-size:85px;
line-height:90px;
font-weight:normal;
margin-top:30px;
margin-bottom:60px;
}
.Title1 {
font-size:52px;
line-height:60px;
font-weight:normal;
margin-top:30px;
margin-bottom:30px;
}
.Title2 {
font-size:32px;
line-height:38px;
font-weight:normal;
margin-top:30px;
margin-bottom:0px;
}
.Title3 {
font-size:20px;
line-height:30px;
font-weight:bold;
margin-top:15px;
margin-bottom:0px;
}
.Body1 {
font-size:20px;
line-height:30px;
font-weight:normal;
margin-top:0px;
margin-bottom:30px;
}
.Body2 {
font-size:18px;
line-height:27px;
font-weight:normal;
margin-top:0px;
margin-bottom:30px;
}
.Table {
font-size:15px;
text-align:left;
padding-left:20px;
color:#555555;
font-weight:normal;
}
.Button {
letter-spacing:1px;
}
.Caption {
font-size:15px;
line-height:18px;
font-weight:normal;
margin-top:0px;
margin-bottom:10px;
letter-spacing:0.5px;
}
.Overline {
font-size:14px;
line-height:14px;
font-weight:bold;
margin-top:20px;
margin-bottom:0px;
letter-spacing:1.5px;
}
.Little{
font-size:12px
}
.Footer {
font-size:12px;
line-height:18px;
font-weight:normal;
margin-top:30px;
margin-bottom:30px;
text-align:center;
}Los atributos más comunes para la tipografía que se van a utilizar (se los puede modificar si es necesario) y logran formar cada estilo, son los siguientes:
font-size: Tamaño de tipografía.
line-height: Interlineado.
font-weight: Espesor de la tipografía.
margin-top: Espacio en la parte superior del texto.
margin-bottom: Espacio en la parte inferior del texto.
text-align: Posición del texto.
letter-spacing: Espacio entre caracter.
Para nombrar a cada uno se lo hace con class="xxx" por ejemplo:
Si son títulos:
<mj-text>
<h1 class="LargeTitle">
Tomando en cuenta que siempre hay que cerrar los tags </h1></mj-text>
Para nombrar a cualquier otro título se realiza lo mismo, con la diferencia que se nombra al título correspondiente: Title1, Title2, Title3
Si es texto:
<mj-text>
<p class="Body1">
Las p no es necesario numerarlas como a las h.
Tomando en cuenta que siempre hay que cerrar los tags </p></mj-text>
Para nombrar a cualquier otro estilo de texto se realiza lo mismo, con la diferencia que se nombra al estilo correspondiente de texto: Body1, Body2, Caption, Overline, Little.
Style Para Celular:
Es importante considerar que los tamaños para pantallas de celulares son más pequeños, por ello se coloca un código en style, debajo o sobre del anterior donde se dan las modificaciones de tamaño tipográfico específicas para tamaños menores de 480px.
Para celulares, luego de poner el atributo es importante poner !important; para que el navegador pueda leer los estilos para celulares; por ejemplo: font-size: 52px !important;
@media (max-width:480px) {
u ~ div {
min-width: 100vw;
}
@media screen{
@font-face {
font-family: 'Silas' ;
font-style: normal;
font-weight: normal;
src: local('FSSilasSansWeb-Regular'), url(http://www.redsaludsa.com/webservices/MarketingImagenes/Silas/fonts/FSSilasSansWeb-Regular.woff) format('woff');
}
@font-face {
font-family: 'Silas' ;
font-style: normal;
font-weight: bold;
src: local('FSSilasSansWeb-Bold'), url(http://www.redsaludsa.com/webservices/MarketingImagenes/Silas/fonts/FSSilasSansWeb-Bold.woff) format('woff');
}
}
@media all and (max-width:480px) {
.LargeTitle {
font-size:52px !important;
line-height:60px !important;
}
.Title1 {
font-size:32px !important;
line-height:38px !important;
}
.Title2 {
font-size:20px !important;
line-height:30px !important;
font-weight:bold !important;
}
.Body1 {
font-size:18px !important;
line-height:27px !important;
}
.Body2 {
font-size:14px !important;
line-height:24px !important;
}
.boton{
font-size:13px !important;
}
.Footer {
font-size:10px !important;
line-height:15px !important;
}
.Caption {
font-size:12px !important;
line-height:14px !important;
}
.Overline{
font-size:15px !important;
}
.Little{
font-size:12px !important;
line-height:14px !important;
}
}NOTA:
Si se desea modificar algún atributo de algún estilo se lo cambia directamente en el tag de ese atributo, por ejemplo:
Si existe bastante espacio entre línea (line-height) en el Body1, se debería hacer lo siguiente:
<mj-text>
<p class="Body1" style="line-height:10px;">
</p>
</mj-text>
Si existe bastante espacio en la parte superior del texto (margin-top) en el Body2, se debería hacer lo siguiente:
<mj-text>
<p class="Body2" style="margin-top:0px;"
</p>
</mj-text>Esa es la forma para modificar ciertos atributos en cada estilo.
Last updated