Design principles for screen?

[em_bes]

This topic was imported from the Typophile platform

Hello,

I’m searching for resources on designing typefaces for screen (books, websites, blog posts, etc.). I’ve looked here and there and didn’t find anything so I wondered if someone here could be of some help. This question is curiosity-driven since I’m not working on such a project, this is why I wanted to focus on the design part of the issue. I know of course that hinting comes into play for the rendering process on screen and that every screen and situation (based on software, etc.) is different, but this not a technical question (and that’s why I’ve put it in the Design section). I’m talking about the forms of the letters. What are the design principles for type design for screen? For instance, if I take a look at Px Grotesk by Optimo (http://www.optimo.ch/typefaces_Px-Grotesk.html), I can deduce that it is grid based and that there is a strong emphasis on the squareness of the stems to match the pixels. This is the kind of information I’m looking for. I can look around and compare typefaces of course but I wanted to know if there was some kind of exhaustive resource like there is Size-specific adjustments to type designs for the subject of designing for specific sizes.

I hope I was clear enough and thanks in advance.

[Riccardo Sartori]

http://www.rastertragedy.com/

[em_bes]

Yes, I’ve browsed through this already but it is mainly focused on technical issues about rendering and hinting. I’m searching for resources that could be more focused on the drawing process, not on the production.

[bojev]

Look at Logo Font and Lettering Bible by Leslie Cabarga - a very good intro to making letter forms into fonts etc.

[Stephen Coles]

There is some screen-specific info in Reading Letters: Designing for Legibility.

[mike_duggan]

we touch on some of this, in the Now Read This booklet

https://typography.guru/forums/topic/92705-forwarding

if you are interested I am sure Michelle can send you on a booklet.

[Nick Shinn]

Please explain why this is “not a technical question” when you’ve defined your parameters in terms of technology.

[em_bes]

Thanks for the links!

Mike, I would definitely like to browse this booklet! Should I leave a message on that thread in order to receive one?

Nick, I wanted to specify that it’s not a technical questions since I’m not looking for anything related to the font technology such as hinting, font formats, etc. My question revolves around the visual aspect of type design. I wonder if there are particular forms deriving from the context of screen display, some design “tricks” inspired by technical constraints such as inktraps (different context of course) or rules in the letter proportions, etc.

[Frode Bo Helland]

Dear Emmanuel,

I don’t think PX Grotesk is a very relevant example. I like it very much. However, it is not drawn for, but inspired by, the æsthetics of lowres. I would rather look into Font Bureau’s RE series, or other initiatives like H&FJ’s ScreenSmart fonts, Typotheque’s Screen fonts, Letter From Sweden’s Core fonts or our (Monokrom’s) Screen series (admittedly not much of a series, yet). You can read a little bit about my process with Aften Screen here.

I went far with Aften Screen, and perhaps I will tone it down in the future when medium resolution screens are more common, but there are still lessons to be learned. With anti-aliasing, letters start to behave very much like they do in small sizes on paper. When blurry edges overlap and multiply, you end up with a fuzzy image. One can counteract this by moving things further apart: enlarging the x-height, drawing wider shapes, increasing the spacing, simplifiying shapes, opening the apertures, “trapping” the corners &c. The ideal weight of a text cut differs from browser to browser and system to system, but better results can generally be achieved with a slightly lighter weight than the ideal print weight. You’ll want to focus mainly on simplifying things that cause fuzz in the y-direction. The computer doesn’t have eyes – it sees only coordinates. If some vertical alignment differ only by a few units across your styles, it is bound to be rounded differently by different browsers and different systems at different sizes. David Berlow preaches a different, but related, idea (and I’m not indifferent, just focus slightly differently): quantification (which is a variant of the same thing I’m talking about – only he seems more interested in the x-direction).

Another thing, that is not directly design related, but crucial to contemporary web fonts: keep the points as few as possible, keep your hinting effective, and use components whenever possible – in short, keep the file size as tiny as possible.

[em_bes]

Thanks for your responses! Now I have some material to dig into the problem. I’ll have a look at all the examples you provided and try to make my own conclusions as well.

[dberlowgone]

It's a good question.

I mostly agree with Mike and Frode, though "quantification (which is a variant of the same thing I’m talking about – only he seems more interested in the x-direction", is not quite all right. I quantize quantifiably.;)

My interest in x is no more than Latin's greater complexity there. I think Latin glyphs exhibit uniqueness in their combinations of x and y things. But in y there are a few alignments, their over/undershoots, and waistbands, while in x, each letter has something unique.

It's slightly more comforting a design process than normal though, as the way a normal font may be used off-screen, it's nearly impossible to test everything that may be done with it, while designing for, e.g. small size use, only on the web, the designer is much more free to really look at, and address everything likely to happen in recommended use, for a change. ;)