Webtype in use: Más por Más

Above “the fold”, Más por Más boldly presents a forward-thinking news source, from its tight, all-lowercase logo to the image-based feature story teaser.

Above “the fold”, Más por Más boldly presents a forward-thinking news source, from its tight, all-lowercase logo to the main feature story introduced with an infographic style image.

At first glance it’s apparent that Más por Más is a news site tailored for the modern web, and there is real power and flexibility built under the surface that backs up that assumption. The publication was designed first in print by Gustavo Belmán with art direction by Eduardo Danilo of Danilo Design, and then on the web in collaboration with Santiago Orozco. The web edition was developed to give the content editors plenty of design freedom while staying true to the publication’s stylistic guidelines. Using a customizable “mosaic” homepage, editors can change the configuration every day, adjusting the headline font, type size, color, and line-height to their specific needs.

maspormas-bottom-mosaic

The framework behind the Más por Más front page is the “mosaic”, a flexible grid into which editors can arrange images and headlines to suit the content.

We asked Orozco about building a website from a flexible typographic perspective.

What was your role in the design process?
My role is to take care of the correct type usage, this is an iterative process that happens throughout all the development of any website we make.

Why did you choose these typefaces?
Since Más por Más is a publication that runs only in Mexico City, we wanted to project a mood that is “metropolitan”, “modern”, and different from any other publication. The contemporary typefaces reflect that: Gotham for the logo and section headlines, Salvo Sans and Serif for headlines, and Benton Sans and Sans RE for large and small text.

maspormas-article

A clear hierarchy is shaped on article pages. The section flag is set in a wide, sturdy Salvo Sans, while various weights of Benton Sans deliver the navigation, headline, deck, and byline.

What features were most important to you when choosing the type palette?
Mainly we focus on selecting type with the personality we think is appropriate for the voice of the publication. Aside from this we check the availability for web. After this initial consideration we choose the weights we need to create rhythm and hierarchy, and also good rendering performance on all platforms.

Text is set in Benton Sans RE, designed specifically for readability at small sizes — even the relatively tiny stuff in the sidebar remains clear and legible. Salvo Serif’s numerals give life to the story’s related figures.

Text is set in Benton Sans RE, designed specifically for readability at small sizes — even the relatively tiny stuff in the sidebar remains clear and legible. Salvo Serif’s numerals give life to the story’s related figures.

How did you go about determining font-sizes, line-spacing and other typographic parameters?
We first start defining body copy size and measure, so we have the main baseline, and we take it from there to calculate the line height for headings, subheadings, kickers, bylines, pull quotes, etc. This is the base for all the templates in our websites.

How was your experience with licensing and implementing the fonts?
Oh, it’s very easy to implement. We just select the types we want from webtype.com, put the css link on our repository, and make the markup needed to make the site look great.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>