Webtype in use: Saint Lucas University College of Art and Design Antwerp

sint-lucas-antwerpen-website-home

The website for Saint Lucas University presented a web design challenge for Dennis Kestelle and Bart Rylant. The complexity and sheer volume of information the College of Art and Design has to offer could be difficult to wrangle. But, along with the hefty content demands, the local Antwerp designers (and Saint Lucas grads) were also given a healthy dose of creative freedom. In return, they gave the school an online presence that is inviting and exciting — vital attributes for any institution looking to attract talented youth.

The school’s events listing is set with color-coded text on a black background, offering a break from the rest of the site’s content.

The school’s events listing is set with color-coded text on a black background, offering a break from the rest of the site’s content.

Armed with various weights of Salvo Sans and Alright Sans Kestelle and Rylant played with typographic scale and a flexible grid to bring freshness and appeal to what might otherwise be an overwhelming and monotonous deluge of text. We talked to the team about the role type played in their successful design.

What was your role in the design process?

We both studied graphic design at Saint Lucas and felt it was a big honor they asked us to design their website. Their corporate identity is very low-key (actually there is only a logo), so we could do whatever we wanted, which is of course a great starting point for a designer. We had several meetings during the design and development process, but apart from some minor details, they went with everything we proposed. It was a great experience getting this freedom, and working together with people that really understand the importance of design. We spent quite some time finding a concept and graphical identity for the website that would stand out and capture the philosophy of Saint Lucas. It had to have an edge to it, something unconventional, but at the same time it had to be very legible and simple. Oh well, that sounded like Jony Ive in an Apple commercial.

How did you choose these typefaces?

For the headlines we were looking for a very bold/black font, but not anything too mainstream or neutral. Salvo has some interesting details and we wanted to make sure the visitors would notice this. So we blew up the headlines, sometimes causing the titles to flow offscreen, but that didn’t matter. It really works well as a header with the many great pictures they provided us.

The body copy had to be different, for contrast. Alright Sans seemed to be just right: different enough, but very good friends with Salvo.

Extra large section headlines are allowed to run off the page.

Extra large section headlines are allowed to run off the page, serving as design cues rather than literal titles meant to be read.

What feature was most important to you (rendering, availability, extensiveness of family in weights or widths, design feature, etc.)?

The website is very text-heavy. They have lots and lots of general information about the different programs, about applying, about the university itself, but they also post information about every event they organise and everything that is in some way related to the students or teachers. So we needed a font that was very legible and worked for short navigation words as well as very long texts. We also looked for a font that had many weights. Not to use them all, but we feel sometimes a text looks better with a semilight and a semibold, instead of using a regular and bold weight. The type is really important on the website since we also didn’t create any graphics or icons that would interfere with the images of student work featured on the website.

How did you go about determining font-sizes, line-spacing and other typographic parameters?

All graphical hierarchy, and there was a lot of it, was established with only type and colour. There is a lot of variation, but consistent throughout the website. Starting with largest and smallest sizes and then giving everything in between it’s appropriate place and size was the way to go. To be honest, we just did this by looking at the type, testing lots of options and just deciding what looked best. For instance, we tried to do the submenus on the left with indents, different weights, different sizes, etc. But in the end making the whole menu the same size and weight, and just using some grayshades made the menus look clear and non-disruptive to the rest of the site.

Nav menus are set in Alright Sans Bold with rectangular backgrounds. When the menus are invoked, the main content dims and the black-background logo is hidden for clearer contrast.

Nav menus are set in Alright Sans Bold with rectangular backgrounds. When the menus are invoked, the main content dims and the black-rect logo is hidden for clearer focus.

How was your experience with licensing and implementing the fonts?

We are not very big fans of subscription services. We like to invest in buying a font, and being able to use for as long as we like instead of having to pay every year. We also feel there could be more options between the 10,000 and 250,000 pageviews plan. The Saint Lucas Antwerp website has about 25,000 pageviews a month (a 250% increase compared to their previous website by the way, we are very proud of that), so we are closer to the cheaper account but have to go with the more expensive account. But we like the fact that Webtype has a big collection of quality fonts, instead of other services often having the more mainstream and generic fonts in their library.

Implementing the fonts was easy as pie. Being able to make a trial collection let us give the client some real-life examples with different fonts, and we could really check what different fonts would do to the design. The fact that we can just include a CSS, and don’t have to rely on JavaScript makes a big difference for us, because now we can also use the same type in the Saint Lucas Antwerp email campaigns as well.

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>