![]() In this example, the goal is to achieve 75 CPL at a font size of 16px for a font that has a character constant of 2.28. Sample Predicted Width Calculation Based on CPL ![]() The aforementioned equations can be simplified and combined into one master equation that relates CPL, font size, and line width for any font:Īlright-now that you’ve seen the basic math behind CPL, let’s bring this together by looking at an example. Once you have the width factor, all you need to do is multiply it by the font size to get the predicted line width, w, that will result in the desired CPL. The width factor from the equation above tells you how many increments of width are needed to reach the desired CPL. This results in a width factor, x w, which is specific to the desired CPL and font: Start with a desired CPL value, and then divide it by the character constant for the font you’re using. Thanks to this relationship, it’s possible to predict CPL mathematically. It may not be obvious at first, but this character constant is awesome because it establishes a mathematical relationship between the vertical (font size) and horizontal (character width) dimensions of text.įor instance, if you have a font size of 12px, and the font you’re using has a character constant of 2.3, then 2.3 characters will fit in every 12px increment of width (on average). In other words…Įach font has a character constant, μ, associated with it that relates the font size to the width of each character. ![]() To relate font size and character width, I simply divided the font size ( f) by the newly-calculated average character width:Īnd this is where I noticed something extraordinary-for any font, the value ( μ) from the above equation remains constant, even at different font sizes. The next step, however, is where things started to get interesting. Not surprisingly, as the font size increased, the average character width also increased. ![]() Using text samples like the one in Figure 2, I first calculated the average character width ( c w) at each font size by dividing the resulting line width by the CPL value. Click to enlarge.Īs I stated above, my goal was to determine the mathematical relationship between font size and CPL for particular fonts (obviously, this relationship will differ slightly from font to font). To determine the average character width at a particular font size, you can divide the resulting width (shown in gray next to each line of text) by the CPL. Research sample with Helvetica Neue set to 83 CPL. You can see one of my samples in Figure 2 below.įigure 2. To do this, I examined text samples in the range of 40–100 CPL at font sizes between 5 and 26px for various fonts. Recently, I became obsessed with the idea of predicting CPL at any font size, so I set out to uncover a mathematical relationship between font size and CPL. Problem is, you don’t have a programmatic way to predict CPL…yet. On top of that, it’s simply an imprecise approach, and we all know how I feel about that…Ĭontrary to number one, choice number two sounds great and makes a ton of sense. Figure out a programmatic way to predict CPL, and then choose a width based on this prediction.Ĭhoice number one is a laborious pain in the rear, and it gets old really quickly. ![]() Alright sans font trial#Use the good ol’ trial and error method, whereby you select different widths, count the characters per line, and settle on the width that you prefer.There are two potential approaches you can take here. So, how can you tune your typography to a specific CPL and, therefore, a specific width? The bottom line here is that your typography should dictate how wide your columns of text are, not vice-versa. Every decision-especially those involving your design and typography-should have a meaningful rationale behind it. They simply pick a column width, and however many CPL that results in…well, that’s what you get.įrankly, I can’t stand this imprecise approach. This has some significant design implications, and worse, most designers don’t even consider CPL when choosing a column width for their text. Designers must consider this behavior when determining how wide a column of text should be. For a given font size, line width increases as CPL increases. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |