Material Design Type System en Xamarin Forms.

Este post  forma parte del Calendario de Adviento  de Xamarin 2019  Día 19.

Un saludo amigos de la comunidad Xamarin,  en el post del día 2 de Diciembre  deje mi aportación de como usar el Material Design Color System en nuestros proyectos de Xamarin de form y tener los colores bien documentados  y poder hacer uso de ellos en todo el proyecto.

En  esta mi segunda aportación  continuare con otro tema muy importante que es el Manejo de tipografías  y como deben ser manejadas en nuestro proyecto basado en las Recomendaciones de Material Design Type System

Cual es la finalidad del Material Design Type System

Usar la tipografía para presentar su diseño y contenido de la manera más clara y eficiente posible.

Cada proyecto  Móvil  es un reto de diseño. y concepto,  para el Diseñador gráfico  que no tiene experiencia en el desarrollo de aplicaciones móviles  puede que cometa el error de  declarar  una gran variedad de fuentes tipográficas y de tamaños que  hacen  un reto complicado su implementación,  ya que la formación de la mayoría de los diseñadores proviene del Mundo editorial  y no del  mundo tecnológico.

 

Si nosotros vemos la plantilla de Material Design para el adobe XD que se puede descargar de https://www.adobe.com/mx/products/xd/resources.html

encontraremos este panel :

 


 

La primera duda que genera la documentación es ¿cuantas fuentes  son las ideales para el proyecto?:
La respuesta  ideal es  de una a no mas de 5 fuentes tipográficas.

Recomendaciones con fuentes tipográficas:

  1. Cada fuente tipográfica  aumenta el tamaño de nuestra aplicación ejemplo la fuente Roboto en su versión regular aumenta en 159k  la app “nota la fuente esta ya instalada en Android error incluirla dentro de los resources de Android”
  2. Usar una fuente tipográfica de fácil lectura para los textos,  tipo Arial , Helveticas, etc.
  3. En el caso de aplicaciones de Marcas incluir la fuente tipográfica de la Marca para su uso en texto publicitario y en títulos “Opcional”.
  4. Si usamos Iconos como fuentes tipográficas  “FontAwesome”, “Material Design Icons”   ver de solo usar los archivos con los iconos que realmente usamos ejemplo:  fa-solid900.ttf mide 194k
    si usamos todo el set de FontAwesome tendremos 400kb   de archivos en la app.
  5. Ver que los archivos  De Fuentes sean compatibles con  dispositivos móviles,

 

La escala de tipo Material Design incluye una gama de estilos contrastantes que respaldan las necesidades de su producto y su contenido.

La escala de tipos es una combinación de 13 estilos compatibles con el sistema de tipos los cual permite representar armónicamente   cualquier texto de manera clara
estas son:

La serie H1 al H6 son los Headers “Titulos sección”  y van desde grande a pequeño sirven para enfatizar una sección de la app.  el valor Size esta en Pts “Puntos tipográficos” no confundir  Puntos con Pixeles.
ya que por ejemplo una letra a 12 pixeles que es el tamaño recomendado para textos es igual a  9 Pts

por lo que se tiene que tener cuidado al poner las unidades de tamaño en Xamarin por ejemplo:


Es fácil caer en el error de declarar   FontSize=”Header” en  Xamarin Forms y pensar que el header estará con el tamaño adecuado en todo el sistema  aquí el ejemplo:

<Label Text=”Texto 96″ FontSize=”96″/>
<Label Text=”Texto Font Header” FontSize=”Header”/>

 en Xamarin Android la salida es :


Lo que vemos es que FontSize=”Header” es igual a FontSize=”96″  pero o sorpresa al pasar a IOS o WPF
ver caso IOS:

Aqui vemos que FontSize=”Header”  es different  a FontSize=”96″ y que su valor real es 17, por lo que no recomiendo usar los valores de FORMS.
ver la siguiente tabla para ver la diferencia en los tamaños  de las definiciones por nombre de Xamarin.Forms.

Por lo que la recomendación es crear nuestra definición  de material design Type System.

en un resource estatico para todo el desarrollo:

ejemplo de código para las definiciones por tamaño:

Código Aplicado a una pagina

 

Vista del resultado

 

Aplicando la escala de tipo

La escala de tipo aparece como texto en los componentes y el diseño general. Los atributos de tipo pueden usar valores personalizados para el tipo de letra, la fuente, el caso, el tamaño y el espacio entre letras.

1. Categorías de escala2. Valores reales

 

Titulares

En la escala de tipo, los encabezados abarcan desde un rango de 1 a 6. Los encabezados son el texto más grande en la pantalla, reservado para cortos, importantes …

LEE MAS

En la escala de tipo, los encabezados abarcan desde un rango de 1 a 6. Los encabezados son el texto más grande en la pantalla, reservado para texto o números cortos e importantes.

Para los titulares, puede elegir una fuente expresiva, como una pantalla, manuscrita o estilo de guión. Estos diseños de fuentes poco convencionales tienen detalles y complejidad que ayudan a atraer la atención.

Se utiliza un estilo de visualización para el Título 2.
Se utiliza un estilo de script para el Título 3.

Los tipos de letra serif o sans serif funcionan bien para los titulares, especialmente en tamaños más pequeños.

Un sans serif se usa para el Título 6.

 

Subtitulos

Los subtítulos son más pequeños que los titulares. Por lo general, están reservados para texto de énfasis medio que es más corto en longitud. Los tipos de letra serif o sans serif funcionan bien para …

LEE MAS

Los subtítulos son más pequeños que los titulares. Por lo general, están reservados para texto de énfasis medio que es más corto en longitud. Los tipos de letra serif o sans serif funcionan bien para los subtítulos.

Se utiliza un tipo de letra sans serif para el Subtítulo 1.

Para los subtítulos, tenga cuidado al usar fuentes expresivas, incluidos los estilos de pantalla, manuscritos y guiones.

Precaución.

Tenga cuidado al usar fuentes expresivas para subtítulos.

 

Cuerpo

El texto del cuerpo viene en rangos 1-2, y generalmente se usa para escritura de formato largo, ya que funciona bien para tamaños de texto pequeños. Para secciones más largas de …

LEE MAS

El texto del cuerpo viene en rangos 1-2, y generalmente se usa para escritura de formato largo, ya que funciona bien para tamaños de texto pequeños. Para secciones más largas de texto, se recomienda un tipo de letra serif o sans serif.

Se utiliza un tipo de letra serif para el Cuerpo 1.
Se utiliza un tipo de letra sans serif para el Cuerpo 2.

No utilice fuentes expresivas, incluidos los estilos de pantalla, manuscrita y guión para la copia del cuerpo.

No lo hagas.

No utilice fuentes expresivas para el texto del cuerpo.

 

Subtítulo y overline

Los subtítulos y el texto sobreimpreso (texto con una línea encima) son los tamaños de fuente más pequeños. Se usan con moderación para anotar imágenes o para introducir …

LEE MAS

Los subtítulos y el texto sobreimpreso (texto con una línea encima) son los tamaños de fuente más pequeños. Se usan con moderación para anotar imágenes o para introducir un titular.

Un tipo de letra serif que se utiliza para una leyenda.
Un tipo de letra sans serif que se utiliza para un overline.

No utilice fuentes expresivas, incluidos los estilos de pantalla, manuscritas y guiones para subtítulos o líneas generales.

No lo hagas.

No utilice fuentes expresivas para un overline.

 

Botón

El texto del botón es un llamado a la acción que utiliza diferentes tipos de botones (como texto, botones contorneados y contenidos) y en pestañas, cuadros de diálogo y tarjetas …

LEE MAS

El texto del botón es una llamada a la acción que utiliza diferentes tipos de botones (como texto, botones contorneados y contenidos) y en pestañas, cuadros de diálogo y tarjetas.

El texto del botón suele ser todo en mayúsculas sin serifa.

Se utiliza un tipo de letra sans serif en mayúsculas para un botón.

El texto del botón puede ser un caso de oración, sans serif o serif.

Precaución.

Tenga cuidado cuando el texto del botón aparezca distinto del texto no interactivo, como este tipo de letra sans serif superior inferior en un botón.

No utilice fuentes expresivas como texto de botón, incluidos los estilos de pantalla, manuscritos y guiones.

No lo hagas.

No utilice un estilo de visualización para el texto del botón.

Gracias a todos los miembros de la Comunidad de Xamarin en Español por  su retroalimentación y aportaciones en este calendario de Adviento  de Xamarin.

Como  nota final  este articulo solo se enfoco en comprender la recomendación y  en como usarla  algunos podrán decir porque no incluyes la fuente  y el color, estos son 2 aspectos que muchos desarrolladores integran y no esta mal este tipo de notación en Xamarin, solo recomiendo simplificar a  que es mejor declarar fuentes y colores acordes al número de Fonts que el diseñador especifico  y que los colores depende del juego definido en el color System el cual es más simple declararlo según el uso en su componente.

Féliz Navidad y prospero año nuevo,  mucho éxito en sus proyectos.