Tipografías variables y sus usos

Tipografías variables y sus usos
[et_pb_section fb_built=»1″ _builder_version=»4.5.3″ _module_preset=»default»][et_pb_row custom_padding_last_edited=»on|phone» _builder_version=»4.5.1″ _module_preset=»default» custom_margin_tablet=»-56px||||false|false» custom_margin_phone=»-87px||||false|false» custom_margin_last_edited=»on|tablet» custom_padding=»0px||0px||false|false» custom_padding_tablet=»» custom_padding_phone=»»][et_pb_column type=»4_4″ _builder_version=»4.5.1″ _module_preset=»default»][et_pb_text _builder_version=»4.6.0″ _module_preset=»default» text_line_height=»1.7em» custom_margin=»0px|0px|20px|0px|false|false» custom_padding=»0px||||false|false»]
Foto por Raphael Schaller en Unsplash
Arte Por: Rebeca Treviño
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row use_custom_gutter=»on» gutter_width=»2″ custom_padding_last_edited=»on|phone» _builder_version=»4.5.3″ _module_preset=»default» width=»100%» max_width=»1300px» custom_margin=»20px||20px||true|false» custom_margin_tablet=»» custom_margin_phone=»0px||||false|false» custom_margin_last_edited=»on|tablet» custom_padding_tablet=»|50px||50px|false|false» custom_padding_phone=»0px||||false|false»][et_pb_column type=»4_4″ _builder_version=»4.5.1″ _module_preset=»default»][et_pb_text _builder_version=»4.6.0″ _module_preset=»default» text_line_height=»1.7em» header_text_color=»#000a21″ header_3_text_color=»#000a21″ header_4_text_color=»#000a21″ header_5_text_color=»#000a21″ header_6_text_color=»#000a21″]

Las fuentes variables son lo de hoy, los tipógrafos las presumen y los diseñadores quieren usarlas para todos sus proyectos. Es una nueva tecnología que te permite modificar a tu gusto la tipografía, lo que la vuelve muy versátil, pero la pregunta real es ¿cuál es su utilidad y que necesidad es la que realmente cubren además de un gusto por usarlas?

 

[/et_pb_text][et_pb_text _builder_version=»4.6.0″ _module_preset=»default» text_line_height=»1.7em» header_text_color=»#000a21″ header_3_text_color=»#000a21″ header_4_text_color=»#000a21″ header_5_text_color=»#000a21″ header_6_text_color=»#000a21″]

Tecnología en fuentes variables

[/et_pb_text][et_pb_text _builder_version=»4.6.0″ _module_preset=»default» text_line_height=»1.7em» header_text_color=»#000a21″ header_3_text_color=»#000a21″ header_4_text_color=»#000a21″ header_5_text_color=»#000a21″ header_6_text_color=»#000a21″]

Una fuente variable viene en un formato llamado open type, estos archivos fueron creados por adobe microsoft, google y apple. Este formato de tipografías variables open type contienen datos y usos adicionales a comparación con el open type regular. 

La tipografía variable cuenta con detalles y variables en los types individuales y en conjunto e incluso con sus ejes, como el grosor, ancho, inclinación y los estilos tradicionales que permiten diferentes tipos de usos y miles de variantes.

 

[/et_pb_text][et_pb_image src=»http://blnk.mx/wp-content/uploads/2020/09/tipografias-variebles-como-funcionan-y-donde-se-usan1-1.gif» _builder_version=»4.6.0″ _module_preset=»default» hover_enabled=»0″ title_text=»tipografias-variebles-como-funcionan-y-donde-se-usan1″ sticky_enabled=»0″ box_shadow_style=»preset1″ align=»center»][/et_pb_image][/et_pb_column][/et_pb_row][et_pb_row use_custom_gutter=»on» gutter_width=»2″ custom_padding_last_edited=»on|phone» _builder_version=»4.5.3″ _module_preset=»default» width=»100%» max_width=»1300px» custom_margin=»20px||20px||true|false» custom_margin_tablet=»20px||20px||true|false» custom_margin_phone=»0px||||false|false» custom_margin_last_edited=»on|tablet» custom_padding_tablet=»|50px||50px|false|false» custom_padding_phone=»0px||||false|false»][et_pb_column type=»4_4″ _builder_version=»4.5.1″ _module_preset=»default»][et_pb_text _builder_version=»4.6.0″ _module_preset=»default» text_line_height=»1.7em» header_text_color=»#000a21″ header_3_text_color=»#000a21″ header_4_text_color=»#000a21″ header_5_text_color=»#000a21″ header_6_text_color=»#000a21″]

Usos de las tipografías variables

[/et_pb_text][et_pb_text _builder_version=»4.6.0″ _module_preset=»default» text_line_height=»1.7em» header_text_color=»#000a21″ header_3_text_color=»#000a21″ header_4_text_color=»#000a21″ header_5_text_color=»#000a21″ header_6_text_color=»#000a21″]

Definitivamente son súper divertidas y te permiten cuidar cada kerning, espacio y detalle de tu tipografía para lograr el significado que buscas, pero ¿cuál es el fin práctico de su uso? 

La tipografía variable te permite, en ámbitos web, cargar solamente 1 archivo y a partir de este hacer todas las modificaciones de la misma, incluso te permite un uso responsivo y al ser un solo archivo puedes hacer modificaciones más sencillas a la tipografía y usabilidad de la misma para generar un sitio mucho más rápido y eficiente. 

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row use_custom_gutter=»on» gutter_width=»2″ custom_padding_last_edited=»on|phone» _builder_version=»4.5.3″ _module_preset=»default» width=»100%» max_width=»1300px» custom_margin=»20px||20px||true|false» custom_margin_tablet=»20px||20px||true|false» custom_margin_phone=»0px||||false|false» custom_margin_last_edited=»on|tablet» custom_padding_tablet=»|50px||50px|false|false» custom_padding_phone=»0px||||false|false»][et_pb_column type=»4_4″ _builder_version=»4.5.1″ _module_preset=»default»][et_pb_text _builder_version=»4.6.0″ _module_preset=»default» text_line_height=»1.7em» header_text_color=»#000a21″ header_3_text_color=»#000a21″ header_4_text_color=»#000a21″ header_5_text_color=»#000a21″ header_6_text_color=»#000a21″]

Donde conseguir tipografías variables

[/et_pb_text][et_pb_text _builder_version=»4.6.0″ _module_preset=»default» text_line_height=»1.7em» header_text_color=»#000a21″ header_3_text_color=»#000a21″ header_4_text_color=»#000a21″ header_5_text_color=»#000a21″ header_6_text_color=»#000a21″]

Aunque el formato se creó en 1996, en la actualidad sigue siendo útil, pues los requisitos de los buscadores y navegadores son cada vez más agresivos. Hay sitios donde puedes encontrar tipografías variables bien hechas y aquí te dejamos una lista de las páginas donde las vas a conseguir.

 

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row use_custom_gutter=»on» gutter_width=»2″ custom_padding_last_edited=»on|phone» _builder_version=»4.5.3″ _module_preset=»default» width=»100%» max_width=»1300px» custom_margin=»20px||20px||true|false» custom_margin_tablet=»20px||20px||true|false» custom_margin_phone=»0px||||false|false» custom_margin_last_edited=»on|tablet» custom_padding_tablet=»|50px||50px|false|false» custom_padding_phone=»0px||||false|false»][et_pb_column type=»4_4″ _builder_version=»4.5.1″ _module_preset=»default»][et_pb_text _builder_version=»4.6.0″ _module_preset=»default» text_line_height=»1.7em» header_text_color=»#000a21″ header_3_text_color=»#000a21″ header_4_text_color=»#000a21″ header_5_text_color=»#000a21″ header_6_text_color=»#000a21″]

Google fonts 

[/et_pb_text][et_pb_text _builder_version=»4.6.0″ _module_preset=»default» text_line_height=»1.7em» header_text_color=»#000a21″ header_3_text_color=»#000a21″ header_4_text_color=»#000a21″ header_5_text_color=»#000a21″ header_6_text_color=»#000a21″]

En google fonts puedes encontrar una gran variedad de tipografías variables sin costo y puedes usarlas para sitios web y programas en tu computadora, cuenta con gran variedad de tipografías de muy buena calidad.

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row use_custom_gutter=»on» gutter_width=»2″ custom_padding_last_edited=»on|phone» _builder_version=»4.5.3″ _module_preset=»default» width=»100%» max_width=»1300px» custom_margin=»20px||20px||true|false» custom_margin_tablet=»20px||20px||true|false» custom_margin_phone=»0px||||false|false» custom_margin_last_edited=»on|tablet» custom_padding_tablet=»|50px||50px|false|false» custom_padding_phone=»0px||||false|false»][et_pb_column type=»4_4″ _builder_version=»4.5.1″ _module_preset=»default»][et_pb_text _builder_version=»4.6.0″ _module_preset=»default» text_line_height=»1.7em» header_text_color=»#000a21″ header_3_text_color=»#000a21″ header_4_text_color=»#000a21″ header_5_text_color=»#000a21″ header_6_text_color=»#000a21″]

Adobe fonts 

[/et_pb_text][et_pb_text _builder_version=»4.6.0″ _module_preset=»default» text_line_height=»1.7em» header_text_color=»#000a21″ header_3_text_color=»#000a21″ header_4_text_color=»#000a21″ header_5_text_color=»#000a21″ header_6_text_color=»#000a21″]

Si cuentas con la paquetería adobe, adobe fonts te permite activar y desactivar las fuentes a partir de la nube, por lo que no usa espacio en tu computadora y no solo eso, son tipografías hechas por grandes tipográfos que puedes usar para tus proyectos. Solo tienes que considerar que no están descargadas, por lo que si actualizas la licencia puedes perder la tipografía.

 

[/et_pb_text][et_pb_text _builder_version=»4.6.0″ _module_preset=»default»]

Estos son solo 2 lugares, pero existen muchos más como My fonts. Hoy en día todos los desarrolladores y distribuidores de tipografías cuentan con types variables. 

Es momento de que actualices tus tipografías y comiences a desarrollar tus productos gráficos con tipografías variables, para que hagas un uso más rápido y eficiente y archivos y webs menos pesadas. 

Comentanos si las has usado y para que

 

Welcome to the new norm

 

[/et_pb_text][et_pb_blog fullwidth=»off» posts_number=»3″ include_categories=»14″ show_date=»off» show_excerpt=»off» masonry_tile_background_color=»rgba(0,0,0,0)» _builder_version=»4.4.1″ background_color=»rgba(0,0,0,0)» custom_margin=»|||0px|false|false» custom_padding=»|||0px|false|false» border_width_all=»9px» border_color_all=»rgba(0,0,0,0)»][/et_pb_blog][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section fb_built=»1″ _builder_version=»4.4.9″ background_color=»#010c21″ use_background_color_gradient=»on» background_image=»http://blnk.mx/wp-content/uploads/2020/07/fondo-blnk-textura-con-ondas-para-web.jpg» parallax=»on» custom_margin=»0px||||false|false» custom_padding=»||106px|||»][et_pb_row column_structure=»3_5,2_5″ _builder_version=»4.4.9″ max_width=»1300px» custom_padding=»120px||7px||false|false»][et_pb_column type=»3_5″ _builder_version=»4.4.8″][et_pb_text _builder_version=»4.4.9″ text_font_size=»23px» header_5_font=»Roboto|300|||||||» background_layout=»dark»]

Get it touch!

[/et_pb_text][et_pb_text _builder_version=»4.4.9″ text_font_size=»23px» header_5_font=»Roboto|300|||||||» background_layout=»dark» custom_margin=»20px|0px|49px||false|false»]

Compártenos tu proyecto y creemos algo juntos

[/et_pb_text][/et_pb_column][et_pb_column type=»2_5″ _builder_version=»4.4.8″][/et_pb_column][/et_pb_row][et_pb_row _builder_version=»4.4.9″][et_pb_column type=»4_4″ _builder_version=»4.4.9″][et_pb_contact_form captcha=»off» email=»alfredo@blnk.mx» custom_message=»Nombre||et_pb_line_break_holder||%%nombre%%||et_pb_line_break_holder||Email||et_pb_line_break_holder||%%email%%||et_pb_line_break_holder||Telefono||et_pb_line_break_holder||%%telefono%%||et_pb_line_break_holder||||et_pb_line_break_holder||Mensaje||et_pb_line_break_holder||%%mensaje%%» _builder_version=»4.4.9″ form_field_background_color=»rgba(255,255,255,0.64)» form_field_text_color=»#1b1c24″ form_field_focus_background_color=»#ffffff» form_field_focus_text_color=»#0b24fb» form_field_font=»Roboto||||||||» form_field_font_size=»20px» custom_button=»on» button_text_size=»20px» button_text_color=»#ffffff» button_bg_color=»#0b24fb» button_border_width=»0px» button_border_radius=»100px» button_letter_spacing=»0px» button_font=»Roboto||||||||» button_use_icon=»off» button_custom_margin=»3px||||false|false» button_custom_padding=»10px|50px|10px|50px|false|false» width=»100%» max_width=»100%» custom_margin=»0px||||false|false» custom_padding=»0px||0px|0px|false|false»][et_pb_contact_field field_id=»nombre» field_title=»Nombre» _builder_version=»4.4.9″ button_text_size__hover_enabled=»off» button_one_text_size__hover_enabled=»off» button_two_text_size__hover_enabled=»off» button_text_color__hover_enabled=»off» button_one_text_color__hover_enabled=»off» button_two_text_color__hover_enabled=»off» button_border_width__hover_enabled=»off» button_one_border_width__hover_enabled=»off» button_two_border_width__hover_enabled=»off» button_border_color__hover_enabled=»off» button_one_border_color__hover_enabled=»off» button_two_border_color__hover_enabled=»off» button_border_radius__hover_enabled=»off» button_one_border_radius__hover_enabled=»off» button_two_border_radius__hover_enabled=»off» button_letter_spacing__hover_enabled=»off» button_one_letter_spacing__hover_enabled=»off» button_two_letter_spacing__hover_enabled=»off» button_bg_color__hover_enabled=»off» button_one_bg_color__hover_enabled=»off» button_two_bg_color__hover_enabled=»off»][/et_pb_contact_field][et_pb_contact_field field_id=»email» field_title=»Correo electrónico » field_type=»email» _builder_version=»4.4.9″ button_text_size__hover_enabled=»off» button_one_text_size__hover_enabled=»off» button_two_text_size__hover_enabled=»off» button_text_color__hover_enabled=»off» button_one_text_color__hover_enabled=»off» button_two_text_color__hover_enabled=»off» button_border_width__hover_enabled=»off» button_one_border_width__hover_enabled=»off» button_two_border_width__hover_enabled=»off» button_border_color__hover_enabled=»off» button_one_border_color__hover_enabled=»off» button_two_border_color__hover_enabled=»off» button_border_radius__hover_enabled=»off» button_one_border_radius__hover_enabled=»off» button_two_border_radius__hover_enabled=»off» button_letter_spacing__hover_enabled=»off» button_one_letter_spacing__hover_enabled=»off» button_two_letter_spacing__hover_enabled=»off» button_bg_color__hover_enabled=»off» button_one_bg_color__hover_enabled=»off» button_two_bg_color__hover_enabled=»off»][/et_pb_contact_field][et_pb_contact_field field_id=»telefono» field_title=»Teléfono» fullwidth_field=»on» _builder_version=»4.4.9″][/et_pb_contact_field][et_pb_contact_field field_id=»mensaje» field_title=»Mensaje» field_type=»text» fullwidth_field=»on» _builder_version=»4.4.9″ button_text_size__hover_enabled=»off» button_one_text_size__hover_enabled=»off» button_two_text_size__hover_enabled=»off» button_text_color__hover_enabled=»off» button_one_text_color__hover_enabled=»off» button_two_text_color__hover_enabled=»off» button_border_width__hover_enabled=»off» button_one_border_width__hover_enabled=»off» button_two_border_width__hover_enabled=»off» button_border_color__hover_enabled=»off» button_one_border_color__hover_enabled=»off» button_two_border_color__hover_enabled=»off» button_border_radius__hover_enabled=»off» button_one_border_radius__hover_enabled=»off» button_two_border_radius__hover_enabled=»off» button_letter_spacing__hover_enabled=»off» button_one_letter_spacing__hover_enabled=»off» button_two_letter_spacing__hover_enabled=»off» button_bg_color__hover_enabled=»off» button_one_bg_color__hover_enabled=»off» button_two_bg_color__hover_enabled=»off»][/et_pb_contact_field][/et_pb_contact_form][/et_pb_column][/et_pb_row][/et_pb_section]