Fonts for Screens

Previous articles are here:
- Fonts for Books
- Fonts for Posters
- Fonts for Signage (coming soon)

Digital technology is a constantly evolving field. The technical standards in place have a limited lifespan in the face of innovation, whether in terms of programming languages, web browsers, multimedia design software or the evolution of reading terminals (desktop, laptop, smartphone, tablet, connected devices, etc.).

So, if you have to learn the technique on your own, prefer manuals or websites that are less than 2-3 years old, if not even less than a year old. Also, beware of trainers who are no longer up to date and who throw out rather vague or generalist aphorisms.

For example, until the advent of smartphones, screens had a lower definition than printed documents: 72 ppi compared with 300 dpi for paper. Today, these figures are no longer valid, and a recent smartphone has a screen with an average definition of 1080 x 2400 pixels: the ratio in inches therefore corresponds to over 300 ppi.

Other obsolete data: typography must be that of the operating system or of generally defined substitutes, serif, sans and so on. This was true before fonts were embedded on computer servers, and even before Google Fonts. Since 2009, fonts have also been available in Web Open Font Format (WOFF), a format similar to Open Type, enabling fonts to be deposited online and displayed on any reading terminal.

With these two corrections, design for the screen is not so far removed from classic reading on paper. Before going any further into the subject, it's a good idea to catch up by reading the previously published articles on publishing and poster typography.

Aliasger Rasheed used for his design and photography portfolio website, **Taklobo** (The Box) as the animated display type on landing and in the footer.
Sometimes, a website can be designed as simple and impactful as a huge poster.

Defining your typographic palette

Before going into the details of typographic choice, it's important to distinguish between different types of on-screen display. Composing the credits for a film or TV series is a different typographic exercise from designing a commercial website displayed on a smartphone. The former is quite similar to the design of a poster or book cover, while the latter is far more technical and problematic. For the purposes of this article, we'll focus on the case of web publishing.

As we've already seen in previous articles devoted to publishing and posters, choosing typefaces is a matter of sensitivity and cultural and economic context - in short, a matter of being in tune with the psychology of your audience. Graphic design means respecting the target audience and fulfilling the objectives defined by the client. Breaking this triune balance between client, audience and designer means project failure.

1. Define the target audience with your client: he will tend to say that he's targeting everyone, in which case you can reply that he won't reach anyone. Achieving a realistic objective is more profitable than reaching people randomly and without personality.

2. Once you've completed the first step, you'll have a clearer idea of how to match your understanding of the audience with the connotations of the typography. A website for a toy shop will be typed differently if the audience is an adult audience composed of geeks, teenage gamers or young parents who've had their first child.

3. Compose your font pairing (see here, but also there & there) respecting the rule of no more than 3 typefaces, unless your purpose and aesthetic bias allow it. This font-pairing is also based on taking hierarchies into account: title levels, running text, captions, etc.

Portfolio website for Sam Phlix, creative developer based in Lyon, France, using **Oroban** and **Surt** throughout. The font pairing iw working pretty well with a basic contrast between Serif and Sans.

Managing the display system

The real challenge for the web designer is to know how to finely manage displays on totally different terminals and in totally different viewing contexts.

Today, a web page can be displayed on a large TV screen, on a large desktop screen for work, a laptop has a smaller display, but much less than that of a tablet or smartphone.

Fix Studio is a graphic design studio based in Brooklyn and honored with numerous international awards. The seriousness of their productions needs no longer to be proven and naturally, it is the vivacity of their creativity that the studio wanted to show in a new graphic identity. Finally, **Rules** go along the custom logo and is used for the whole body text of the website.

Kami Naglik is a creative and strategic consultant, working with internationally acclaimed artists, galleries and museums. The Polish studio Goodnews created an interactive design website for her new visual identity. Uniquely set in **Area**, and built on a responsive grid, the website offers multiple interactions all along the navigation.

Desktop first

The design of a website relies on a balance between functionality and design. Rather than starting with a design adapted to medium-sized terminals, such as the tablet, start with what offers the most freedom, namely the computer screen. It's the design that will guide your creation: once the graphic identity has been established, you can then fine-tune your creation so that the site's functionalities and general ergonomics are consistent.

Spinelli Kilcollin is a young jewelry brand designed and made in downtown Los Angeles. Their website shows a delicate use of the **Inferi** family, used throughout the site, from the logotype to titles and body copy.
This use show how the simplicity leads to an elegant and balanced design.

The typographic choice can then make use of typefaces adapted to large titling, ligatures or other Opentype features.

The typographic palette can be more extensive than on other terminals: in fact, the computer screen offers a surface and a quieter reading experience conducive to dazzling the viewer's eye. In short, it's the cinema screen for detailed viewing and maximum sensations.

For his personal project “Web Graphic Experiments”, Japanese front-end developer Keita Yamada made a plethora of web animations. In the same shape of a library, we can navigate through his experiments almost infinitely. Typeset in **Arges Condensed Black**, with numerals from **Oroban**, the navigation is fluid and baffling.

Laptop & tablet for a balance

The formats of these two terminals are a good compromise between freedom of space and optimized ergonomics. Paradoxically, this format corresponds in spirit to the early days of the web, when desktop screens were relatively small and functionalities limited.

Sight Management Studio is a leading international model agency with men, women, celebrities and influencers departments. The website, build as a single page, shows a wide range of model’s portraits. Each photograph is followed by a legend composed in **Apoc**. Above all, there are **Apoc** and its lineal version, **Apoc Sans** used in large size for the main menu. The website is provided in three languages; Spanish, English, and Chinese.

The aim of this adaptation is to reduce display functionalities to offer more efficient reading without losing too much in the way of design. Colors and graphics will be similar, but typographic choices may be narrowed down to more legible typefaces for small formats and variable lighting conditions.

It's important, however, to maintain a high degree of consistency between your desktop typographic palette and these formats: title typography will be reduced in size, possibly without its ligatures or options, while commercial typefaces may be fatter. A few substitutions may be made if you have many typographic families on the same screen.

The Hamburg Institute for Advanced Study (HIAS) hosts outstanding scholars and researchers, as well as representatives of both the visual and the performing arts, who will find an interdisciplinary space of research and exchange in Hamburg, Germany. HIAS promotes scholarship and research in the fields of the Humanities and Social Sciences, Life Sciences, Natural Sciences, Engineering and the Arts. **Surt** is used throughout in a few weights.

This Swiss like design, grid, typography and color, is the perfect design for various browsers, on smartphone or wide screen.

Smartphone for extreme reading

The limited space of the smartphone screen offers little freedom. Adaptation is therefore reduced to respecting the graphic identity, guaranteeing legibility, and optimizing ergonomics. The typographic palette must be reduced like that for the tablet format, while ensuring that the sizes of each level of information are legible yet different. Variations between capitals and lower case, as well as weights and inclinations, are just as important as variations in type size.

Milid, MicroLearning for Information and Data, is an educational app developed by HEG & HEAD Genève (HES-SO) for Geneva students universities. The app was created during a microlearning course, accessible on smartphone on the topic of introduction to information research and data analysis. The visual identity is inspired by the computer world and in particular by the visual of punched cards, represented by a cluster of circles. These symbolize the information and data, knowledge and knowledge that the user acquires during his training. They also represent the network of people on the application and the moments of sharing they experience through multiplayer modes. They can challenge their friends and compare their score, a more fun way and stimulating to learn.

**Surt** seems to be preferred by our agencies for contemporary and functional designs, specially on small size screens.

Generally speaking, there's no need to worry about a smartphone website appearing more functional than graphic. Viewing a website on this type of terminal indicates that you want to get an idea of content, not of a company's mindset.

Quantile’s compression and optimization services have already eliminated USD trillions of gross notional of OTC derivatives and billions of dollars in margin. Created in 2017 they are relatively young but have quickly become an established name. Their branding needed an overhaul to reflect their market-leading position, and a new website was required to provide greater detail on their range of services and to create a destination for their thought-leadership content and market commentary. Our Response: It became clear that a radical approach was required. We created an unconventional color palette and built a generative design tool that allows Quantile to produce their own unique brand imagery. As important as what Quantile looked like is how they sound. We crafted a value proposition, series of key messages and tone of voice document allowing Quantile to speak with purpose, punch and passion – and their own distinctive personality. **Surt** is used throughout.

Wide Screen: the future of poster & signage

The case of large screens is a subject in its own right. Within this category, credits or video ads act like posters, with movement adding an extra dimension. The history of animated credits draws as much from the art of animated cinema (cartoons and stop motion) as from avant-garde and then commercial practices. From Saul Bass (credits for numerous films by Otto Preminger, Billy Wilder, Alfred Hitchcock, Stanley Kubrick, John Frankenheimer, Martin Scorsese) to Kyle Cooper (Seven, The Island of Doctor Moreau, Mission: Impossible, Men in Black, Gattaca, The Avengers, Lost in Space, The Mummy, etc.), typography for credits has constantly reinvented itself through the formal games offered by technological evolution. The article on poster typography is therefore an excellent entry point for motion designers.

Credit design for the “Timeless Collection” campaign by Pellicer. Most text is set in **Apoc**.
Credit design is a whole sprectrum in screen design.

Without going into too much detail, our streets are gradually replacing printed posters with video screens. Evolving technologies such as LEDs and electronic paper offer displays that are quicker and more convenient to update. Displays can be programmed by computer for time slots, customized frequencies and precise locations. Electronic paper displays (similar to e-readers) also save energy if they are fixed and long-lasting. Some technologies add interactivity to these devices with motion sensors.

The real innovation, since the urban screens will be nothing more than giant posters, is to be found on the video installation side, notably stage design for concerts or other cultural events.

Malo Lacroix designed the live visuals for the Balzaal Redbull Electropedia stage at the Dour Festival 2019, curated by Simon Médard. He worked with **Oroban** and animated it for an ultra-panoramic scenographic set up, with light and LED system by Arf&Yes. The batch of motion sequences were inspired by short statements from the world of mass media and advertising.

Check out our Font Catalog! Lern How To Design Fonts!