Saltar al contenido principal

Typography

La tipografía está definida según los estandares de material design.

info

Toda fuente de texto en componentes de agave usan Barlow.

Tenemos fuentes personalizadas siguiendo la escala de tipos de material design (Type Scale).

Type scaleName style XMLFontText Size
H1h1Barlow Bold75 sp
H2h2Barlow Light60 sp
H3h3Barlow Regular45 sp
H4h4Barlow Bold35 sp
H5h5Barlow Bold24 sp
H6h6Barlow Bold19 sp
Subtitle 1subtitle1Barlow Medium24 sp
Subtitle 2subtitle2Barlow Semibold19 sp
Body 1body1Barlow Semibold17 sp
ButtonbuttonBarlow Semibold16 sp
CaptioncaptionBarlow Regular12 sp
OverlineoverlineBarlow Regular16 sp

El modo de uso es muy sencillo, se basa en definir un Name style Android en el atributo style de cualquier texto, el color de texto lo defines tú.

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    style="@style/h1"
    android:textColor="@color/primary500"
    android:text="Headline 1"/>

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    style="@style/h2"
    android:textColor="@color/primary500"
    android:text="Headline2"/>

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    style="@style/h3"
    android:textColor="@color/primary500"
    android:text="Headline 3"/>

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    style="@style/h4"
    android:textColor="@color/primary500"
    android:text="Headline 4"/>

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    style="@style/h5"
    android:textColor="@color/primary500"
    android:text="Headline 5"/>

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    style="@style/h6"
    android:textColor="@color/primary500"
    android:text="Headline 6"/>

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    style="@style/subtitle1"
    android:textColor="@color/primary500"
    android:text="Subtitle 1"/>

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    style="@style/subtitle2"
    android:textColor="@color/primary500"
    android:text="Subtitle 2"/>

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    style="@style/body1"
    android:textColor="@color/primary500"
    android:text="Body 1"/>

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    style="@style/button"
    android:textColor="@color/primary500"
    android:text="Button"/>

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    style="@style/caption"
    android:textColor="@color/primary500"
    android:text="Caption"/>

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    style="@style/overline"
    android:textColor="@color/primary500"
    android:text="Overline"/>

drawing