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.

[e-mail]

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.