Articles Feed | LucasFonts

New custom font for Miele

Thu, 01 Aug 2024 18:00:00 +0200

Large companies need fonts that can be used in many areas of the organisation. They must represent the brand identity and function across all touchpoints – from appliance displays to apps, online stores, print, proceedings, and forms or labelling of all kinds. If the client happens to be the premium brand Miele, a minimalist design language with complex font technology requirements is in demand. This is exactly what LucasFonts has developed together with the Miele Design Center over the last couple of years. The result is a sans serif neo-grotesque family optimised for each respective application, which redefines the genre – it bears the name Miele Elements.

Helvetica – too generic?

When Luc(as) de Groot began working with the Miele design team in 2003 to create bitmap fonts and icons for their household appliances, it was not yet clear that he would eventually shape the company’s entire typography in this way. Luc(as) de Groot had already adapted and modernised the company font Helvetica once, because the Miele Design Center was dissatisfied with the way it rendered on the displays of the appliances at the time. Luc(as) quickly improved the existing font for the defined purpose.

Always better - Miele’s motto was also an incentive for Sedat Parta, the designer responsible at the time, not to be satisfied with another small revision, especially as Helvetica was already widely in use and appeared increasingly generic. Sedat Parta: For us as a manufacturer, the brand lacked identity and distinctiveness. Our standards of quality and design didn’t really fit in with Helvetica and the possibilities that a new generation of displays offered us.

For all communication

So the idea was born to develop a custom font for Miele – initially just for use on appliance displays. However, Miele Elements (the working title at the time was Miele Evolution) proved to be a resounding success, as the uniqueness of the typeface and its wide range of applications inspired the in-house designers at an early stage. In the end, management and brand managers decided to use the new typeface for all corporate communications. Since then, the Miele Elements typeface has become one of the cornerstones of the Miele Design System.

The font family now consists of nine weights ranging from Thin to Black, matching original italics, including different figure styles and small caps. The language coverage includes Cyrillic, Greek and extended Latin. There is an Office version of the fonts for use in Office applications, variable fonts for dynamic environments and a Condensed package for special purposes.

Building bridges

Miele’s typography was to be brought up to date both visually and technically, making it ready for the digital future. The Miele Elements font family preserves the visual identity and values of Miele and thus builds a bridge between the Miele values that have been tried and tested for over 125 years, and the requirements of the digital world. This connection creates something very unique and clearly different from what can be seen in the competition.

The aspect of visual identity plays an important role, especially for large companies such as Miele and its brand design. There are also monetary advantages: if a company purchases a custom font, cost-intensive licence models from other font providers and the associated administrative effort can be avoided.

Clearing up inconsistencies

Traditionally, large quality companies such as Miele use neo-grotesque fonts. The new typeface should stay true to the grotesque genre, because high-quality brands need a minimalist design. The more eye-catching the outside, the more short-lived the effect. Coolness doesn’t work that way, says Luc(as) de Groot, who has decades of experience with clients from a large variety of industries.

Good old Helvetica, for example, has many design inconsistencies and outdated details. It is not unusable, but can not be recommended for a company anymore. In connection with the first generations of devices with TFT displays, the opportunity arose to improve many details through the expertise of Luc(as) de Groot.

Improved readability

For example, Helvetica sets too narrow, a result of the mass digitisation of fonts more than 40 years ago. Adjustments for different font sizes were rarely made. In the past, the tight-but-not-touching effect was deliberately used in advertising. What was effective and sales-promoting back then usually just looks old-fashioned nowadays. What’s worse, in small text, the tight spacing also compromises readability. So the first step was to create enough space. With Miele Elements, the letters are given generous space to breathe in reading sizes – which results in a balanced overall appearance and reinforces the feeling of timelessness and grandeur. And it significantly improves readability, which is particularly important for users in regard of the maximum font sizes in smaller displays.

Improved Spacing: contemporary and elegant spacing at the top, too tight 70s fashion at the bottom.

The uppercase letters of the predecessor font Helvetica are all roughly the same width. Visually, this creates a certain bulkiness that gives the font a pragmatic, stiff appearance. The Futura capitals, on the other hand, exude grandeur and are based on the classic proportions of Capitalis Monumentalis. However, the widely varying widths of the letters create a sense of unrest in the word image.

Miele Elements combines the best of both worlds: Differentiated proportions with generous spacing. This lends the font a sense of sovereignty and class. Miele Elements also makes use of the possibilities of digital formats: the capital letters, for example, are equipped with an additional kerning table – this is what intelligent fonts look like these days.

Design approaches of capital letters: Helvetica capital letters with the same width and the classically designed Trajan – Miele Elements is deliberately somewhere in between.

Readability per square centimetre

A comparison of the details of grotesque fonts reveals that many of them have unnecessarily complex letter constructions. Miele Elements provides a counterbalance here and simplifies wherever possible for the sake of readability.

One of the golden rules of reading typography is: The eye should glide smoothly across the text without being distracted by unimportant details. It must be possible to grasp the content quickly and effectively.

Better proportions, better reading flow.

Paying attention to the subtleties of a font can have a huge impact on the big picture – and on readability. Luc(as) de Groot spent many years studying what he calls readability per square centimetre. He determined how different design parameters affect the effective and compact presentation of content in a limited space. Important aspects that play a role in the improved readability of Miele Elements are the introduction of higher ascenders and smaller center heights, which combine to create a more even rhythm overall. An interesting aspect of readability and reading flow: Helvetica Light, which had previously been used in the Miele user manuals, performed particularly poorly in this regard.

Comparison of readability per square centimetre. Left: Predecessor font Helvetica Light. Center: Same amount of text, set with Miele Elements Light – the text looks more elegant and is also easier to read. Right: If Regular is used instead of Light, the readability per square centimetre improves once again – even if set slightly smaller.

Minimal corner rounding

Miele Elements draws part of its formal heritage from the Miele logo. The diamond-shaped i-dot, which has been used here for over 100 years, or the angle of the M and the horizontal letter endings in the word Miele are a nod to the Miele logotype. A good logo never loses its relevance – like good typefaces. Both can be timeless.

Use of details from the logo.

Inspired by Miele product design and lead typefaces: Rounded corners are a subtle but exquisite detail of the font.

A subtle, barely noticeable but significant feature of the Elements family is the minimal rounding of the corners. These curves have two origins. Firstly, they are influenced by the brand’s timeless product design: Miele appliances look precise and straight-lined from a distance, but if you take a closer look, you will notice that all corners are slightly rounded. The products are always pleasant to handle and therefore easy to use on a daily basis. There are no annoying edges. Miele even goes to the trouble of subjecting the surfaces and edges of its products to a strak process – an important step in product development, especially in automotive and product design.

In the context of design, the strak process refers to the design of surfaces, especially visible surfaces such as car bodies or product surfaces. The aim is to ensure that the design is both aesthetically pleasing and technically feasible.

Modelled on lead type

The new Miele typeface was to be a strictly constructed neo-grotesque that was nevertheless friendly and warm. This is exactly what you find in old prints from lead type. Masterfully cut lead typefaces often looked better than their digital counterparts.

Punch cutters used their craftsmanship to bring form, material and the printed result into harmony. It shows that geometric designs can look pleasant and harmonious. The letter strokes seem to be straight, but in reality they are full of detail and life. This is reflected by the slightly concave stems in Miele Elements.

Tests on the concaveness of the stems and the rounding of the corners.

A very fine grid

Typically, fonts are designed on a grid that divides the font size into 1000 units. Miele Elements, however, was drawn on a much finer grid, 4096 units, in order to enable the subtle play with form. The number 4096 is no coincidence: TrueType fonts are scaled and rendered much faster if their basic grid corresponds to a power of two (binary system), for example 512, 1024, 2048, 4096. Thanks to the much higher grid resolution, which is adapted to the digital number space, symbols or other detailed illustrations from the Miele Design System can easily be integrated into the font files.

Many styles and one variable font

LucasFonts wanted to design just one font family for all micro- and macro-typographic purposes. This requires thin and very bold weights: the finer weights for elegant and delicate headline type, the bold weights for robust and loud applications – Miele is equipped for all future design challenges and marketing campaigns.

The middle range of weights, i.e. everything around the Regular, is a perfect fit for long and short copy text.

To ensure data-efficient use on the web, the font family has also been produced as a variable font. A variable font that contains all weights takes up less file size than three individual weights in static fonts. The format therefore inspires interactive and playful applications.

Fine-tuned for weight: The variable fonts have 3 masters to enable good interpolation results.

The use of variable fonts is perfect for data-efficient use and for animations.

Figures

For differentiated typography, the family is equipped with different figure styles, a must for a modern font. The default are proportional lining figures, which, unlike in other grotesque fonts, are aligning exactly with the capital height. This makes product names look good when capitals are mixed with numbers. However, tabular figures are common in the office environment, and especially apps which need to arrange rows of numbers next to and below each other does not support OpenType features.

There are also oldstyle figures, which are designed as proportional and tabular variants. The latter enable an excellent design of tables, for example to make even extensive data sets easier to read. Superscript, subscript and fractional figures are also a mandatory part of Miele’s digital typecase.

Clearly slanted

Italics are part of the typographic spectrum and must be clearly differentiated from upright fonts. With serif fonts, the difference is achieved by different letter construction, and is usually clearly apparent. Many grotesque fonts are merely slanted – the technical term for this is oblique. If the slant angle is too small, the visual difference to the upright is insufficient.

LucasFonts decided to break with this tradition and chose a generous angle of 14 degrees and some key cursive letterforms to maximise the difference between upright and italic.

Clearly distinguishable: The italic uses a different type of construction than the upright. This is particularly evident with a, e, f and g.

If you want to play in the typographic masterclass, you need small caps. They are smaller capitals and visibly taller than the lowercase letters. They can be used as an additional type of emphasis in text, like for product names or abbreviations, and they blend in better with the text than capital letters.

The tops of the small caps are at the same height as the oldstyle figures.

Product names that stand out: Small caps with jumping numerals enliven the word image and promote legibility.

Multilingual

Generous language coverage is essential when you are addressing a global audience like Miele. That’s why Miele Elements supports over 150 languages using the Latin, Cyrillic and Greek writing systems. LucasFonts integrated several language-specific features in the process. The team knows from experience how important it is to respect local typographic preferences. This is part of good manners and ensures that you are perceived as a serious and professional company everywhere. The features include solutions for Dutch, French, Romanian, Bulgarian, Serbian and Macedonian, among others.

LucasFonts has also integrated global fonts into Miele Elements, to provide support for languages such as CJK and Arabic.

Miele Elements covers a large range of languages.

Several glyphs automatically change their form, depending on the language and context, to meet the expectations of the respective readership.

Font formats

Miele Elements is used in many different environments. In addition to the interfaces and apps, especially Windows Office environments and browser-based web applications, it was therefore decided to produce the fonts exclusively as TrueType with manual hinting. This was a way to guarantee the best possible screen display, while at the same time reducing the implementation and maintenance overhead by the company’s IT department.

The PostScript-based OpenType fonts commonly used in the design sector would not have been sufficient for this. Their display quality in Windows environments and in the familiar Adobe products does not meet the quality expectations of LucasFonts. With TrueType-based fonts, all details of the display can be controlled by programming in the font itself – provided the appropriate expertise is available – which also represents a considerable gain in convenience during maintenance and use.

In PowerPoint, for example, only TrueType fonts can be embedded and then exported to pdf documents. In addition, neither OpenType features such as different figure sets nor OpenType kerning work here. For this reason, in addition to the large design font package, an additional Office package has been put together consisting of, among other things, tabular default figures and a legacy kerning table which also works in PowerPoint.

More and more icons

The fact that the functions of the appliances themselves are constantly being improved also fits in with Miele’s claim ‘Always better’. The continuous development and updates of networked appliances with new content and functions create a constant need for new icons and explanations. That’s why maintaining, refreshing and expanding the extensive set of icons already available in the Miele Design System is a never-ending task.

These icons can now be found everywhere in the Miele world: on packaging, appliance displays, in the apps, on trade fair booths, in the Miele Experience Centers and online. The characteristic Miele design language is also replicated in the icons. Together with the Miele Elements fonts, they form the visual backbone of the interfaces. Most of the icons are also available in different line widths, are variable, and are often even available as pixel variants in different sizes for the interfaces at Miele via the Design System.

The Miele icon set is huge.

The icons can be interpolated to cover different weights – an additional center line version shows more details and is suitable for a larger display.

A dedicated icon management tool

The design of new icons and the updating of old ones follows a tried and tested workflow. There are often specific requirements for the various applications – standards and other constraints in the professional or medical sector are particularly important. However, the requirements for icons for domestic appliances often differ significantly from region to region. That’s why LucasFonts updates the fonts for the Miele design team at regular intervals. To prevent surprises during production, this is done according to strict quality assurance processes and specifications.

Each symbol has its own Unicode codepoint from the private use area (known as PUA in technical jargon). LucasFonts developed a custom icon management tool to make it as easy as possible for the design team to manage the icons. The icons, symbols and characters are organised clearly and thematically, can be found quickly by keyword, and copied as Unicode text. The icons can also be exported as SVG files.

Many icons have pixel variants.

These in turn are available for different pixel sizes.

Meticulous final drawing of the symbols. Minimum spacing and line thickness are checked and adhered to everywhere, with the help of small circles that depict the desired line thickness.

Welcome, Miele Elements

Miele Elements is currently being rolled out throughout the company. You can already see it in use in many parts of the company: in the online presence, in outdoor advertising and, of course, at trade fairs. Its design has already been nominated for competitions and won the Red Dot Award. The font is not only a visual statement and an expression of innovative brand management, but will also be a loyal and identity-forming companion and brand ambassador for decades to come.

ARD Logos

Fri, 10 Dec 2021 17:06:00 +0100

When Munich-based design agency Luxlotusliner was tasked with redesigning ARD’s logos, Luc(as) de Groot was asked for advice and fine-tuning.

Firstly, the project was a redesign of the main ARD logo, which would be the starting point for a logo series. Luc(as) developed a special variant of TheSans for all of ARD’s logos based on the newly edited A, R and D.

Luc(as) also made subtle optical adjustments to the circle and the number 1 in the logo.

ARD (short for Arbeitsgemeinschaft der öffentlich-rechtlichen Rundfunkanstalten der Bundesrepublik Deutschland) is a German public broadcasting association consisting of nine regional broadcasters and an international broadcaster, Deutsche Welle. In addition to operating Das Erste as a joint television program, each regional broadcaster has its own range of television and radio programs. ARD was founded in 1950 and, together with ZDF (Zweites Deutsches Fernsehen) and Deutschlandradio, forms Germany’s public broadcasting.

The old logo (left) and the new version from 2019 (right)

The fine-tuning of the three initial letters was complex. How do A, R and D relate to one another? Are the white spaces harmonious? The distances between the letters and the circle had to be balanced. In addition to working in all sizes, the logo system also had to accomodate all-caps and mixed case extensions underneath the logo and to its right. The vertical and horizontal spacing in relation to the main logo needed to be precisely defined. This included the line spacing and, of course, the spacing between all the letters.

If the first three letters are set up with their spacing, that does not mean that their spacing also fits words. So as he encountered new letter combinations in ARD’s many logos, Luc(as) had to continue defining new rules for the letter spacing. As he revised the letter shapes, the entire font became harmoniously redesigned.

A series of over 50 logos was developed between January and March 2020. It was a systematic design process between font and logo design; an iterative process between LucasFonts and Luxlotusliner, the design agency responsible for the redesign.

The result is an exclusive font from LucasFonts containing the entire logo system from Luxlotusliner, with which future ARD logos can also be added to the brand family.

Many thanks to ARD and Luxlotusliner for the rewarding collaboration!

Icons for Miele

Fri, 15 Oct 2021 13:57:00 +0200

Miele, a leading manufacturer of household appliances, has collaborated with LucasFonts since 2003. The quality of Miele’s products has long been recognized the world over. Since the company’s founding in 1899 in Germany – owner-run until today, in 4th generation – Miele has remained true to its Immer Besser brand promise (translates to “forever better” or “better and better”). Walter Isaacson quotes Steve Jobs as saying that Miele appliances are:

… really wonderfully made and one of the few products we’ve bought over the last few years that we’re all really happy about. These guys really thought the process through. They did such a great job designing these washers and dryers. I got more thrill out of them than I have out of any piece of high tech in years.

With LucasFonts’s assistance, Miele has developed a large series of user interface icons. Our role in this project sways between design execution, font engineering, and consulting on the icons’ direction. Icons that are instantly recognizable help customers and users navigate Miele’s appliances quickly and get whatever they need doing done fast. Miele’s icons share a common design language across a wide range of products, from coffee makers to ovens, from vacuum cleaners to dishwashers. The icons are legible and readable. They encapsulate Miele’s brand aesthetic within tiny spaces that are sometimes only seven pixels tall.

Miele was already embedding bitmapped icons into their machines before we became their type supplier. The icons used in the user interfaces of Miele’s appliances were saved in font files. As Miele expanded to new markets, new characters were added by Luc(as) to the tiny bitmap fonts to support more languages. Bitmap fonts in 7, 8, 9 and 10-point are generic because there is little room to play, but in bigger sizes design comes in. These were then based on Luc(as)’ adaptation of Helvetica for printing typography on machines. His Helvetica is more loosely spaced, more open, and has better curves than the official Neue Helvetica from Linotype.

Miele pixel teddy bear

Each Miele pixel font was prepared for a specific size. The same icons existed in versions that were 12, 14, 22, 24, 26, and eventually 36 pixels high. The smallest sizes were the oldest, but larger sizes were added over time as displays improved. According to Miele’s slogan Immer Besser, which speaks to the company’s desire to always improve – Miele’s interfaces are always getting better and better, too. Eventually, the bitmapped icons were supplemented by outline fonts, whose vector drawings were synchronized with them. The level of detail had been limited in the bitmaps, due to the coarse resolution that the size-specific grids had offered. Luc(as) sometimes used hints in a TrueType version of the outline font to produce consistent bitmaps for new icons and sizes. The main reason for the longevity of the Miele bitmap fonts is that they offer up to ten years of guarantee on their washing machines.

Designing bitmaps with hints is a most challenging art. The bitmapped icons’ traits were carried over into the outline fonts: each one was simple in design and monolinear in its drawing. The icons are drawn with a minimum line thickness, even white spaces inside the symbols may not be below this line thickness. Newer machines with better screens are now using outline fonts for the user interface as well. Our internal working data contains two versions of every icon: a lighter and a heavier one. Intermediate weights for special purposes are calculated when needed.

An animation showing a coffee cup being filled, made from six glyphs. The icon on the left was designed for a specific pixel-size. Those on the right can be scaled to any height.

Within the bitmap fonts, several icons can be “animated”, meaning that the fonts contained one glyph for each stage of the animation. Displays could then cycle through the glyphs, showing the movement frame-by-frame to animate a coffee cup being filled, for example. We added frame-by-frame animations into the outline fonts, too.

Sometimes the initial drawings for icons include elements that are too close together. We use small circles to gauge both the minimum distance that must come between items and to determine how thick lines should be.

Size-constraints are not the only kind of challenge that icon design brings. A few years ago, we worked on a series of icons depicting the different kinds of stains that clothes could have, visualizing blood, sweat, pee and poop, in black and white. We have even designed icons to differentiate between different varieties of hot drinks, for instance between cocoa and coffee.

The design process can differ, depending on project stage, obviously, and briefings; the results need consistency, nonetheless. Sometimes Miele’s design department responsible for hardware graphics sends us sketches for new icons. Then we redraw them within the technical confinements and make Light and Bold versions. Sometimes we propose revisions to a new icon’s design. At other times, we will just be provided with a list of terms that need new icons, and then we design them from scratch.

Miele’s icon fonts currently contain more than 1,500 icons. Over the course of about a decade, the number of vector icons has increased by a factor of ten. The icon font was released more than 100 times by now, and each upgrade comes with meticulous lists of changes, names and unicodes.

We are proud to collaborate with Miele on a long-term basis. With our type designers’ eyes for coherency, we support them in building up an ever-expanding icon library to support their evolving product portfolio and technical innovations. Our work for the company is an example of the fruits that grow from a long-term partnership. Thus, our work is truly sustainable, like the Miele products – in short: Immer Besser.

Trial Fonts

Wed, 27 Jan 2021 14:15:00 +0100

Register a free user account and subscribe to our newsletter to access the trial fonts. You will find download links for all available trial font packages in your account.

When a family has trial fonts, there is also a “Get Trial Fonts” link on the family page.

The LucasFonts trial font license

You receive OTF, TTF, and WOFF2 file (if each format is available).
Before downloading the fonts, you must subscribe to our newsletter.
A free user account is required in order to download trial fonts.
Fonts are provided for the purpose of deciding whether you want to purchase a commercial license.
The fonts can not be used in published content.
Students can use the trial fonts for non-commercial projects that are part of their studies.

The legally binding full license text can be viewed in your account and is also included in the downloads.

What is the difference between trial fonts and the full fonts?

Styles

There is a trial font for each style of the family, but not for each different character set or supported language that is available for commercial use.

Character set

The character set is reduced to only contain basic characters, so you can get an impression of what the typeface looks like. The full character set is shown on the package details page and may differ among the various packages that we offer.

OpenType layout features

The trial fonts only contain kerning, but no other layout features. All available layout features are shown on each package’s respective package details page.

Speaking Events

Fri, 27 Mar 2020 18:58:00 +0100

Upcoming and past presentations by Luc(as) and other team members. Some of them have been recorded and can be watched right here.

View speaking events archive

Karwath+Todisko pixel fonts

Fri, 28 Feb 2020 16:17:00 +0100

In 2017, the artist Karwath+Todisko was planning an installation for a building façade and she needed a pixel font. She turned to Luc(as) de Groot. Her installation, mounted on the east façade of the building housing the Darmstadt Technical University’s supercomputer, consists of a 12 × 8 grid with 96 individual lighting elements. On this grid, ideas from the eighteenth-century German mathematician Georg Christoph Lichtenberg are displayed in 8-digit binary code.

Since this code isn’t directly understandable, it alternates with readable text displayed in a pixel font. Text and code each scroll across the grid.

The mechanics of the installation called for non-square pixels. Letterforms are constructed from rectangular shapes. This has beneficial typographic ramifications: vertical strokes become stronger than horizontals.

Lucas created a series of pixel fonts for Karwath+Todisko to choose from. In the end, she picked a wide design utilizing capital letters that were each six pixels high. Although this might sound rather small, when those six “pixels” are stacked on top of each other, the resulting letters are as tall as one floor of the building.

As a first step. Luc(as) drafted several alphabets showing different directions the text could take. The fourth and fifth lines each show two fonts in combination. These would fit in combination within the vertical 8-pixel size, such as to visualize a dialog, for example.

This was the variant selected for further adaptation. The installation only used capitals. Forms of some letters were changed. The above video includes a different Ä and S, etc.

The finished installation is named HLR LICHTENBERG1. The abbreviation “HLR” stands for the German word Hochleistungsrechner, meaning a supercomputer. The piece went up in January 2018 at the Technische Universität Darmstadt, Campus Lichtwiese.

Mastering the Pen Tool in Adobe Illustrator

Luc(as) de Groot — Fri, 24 Jan 2020 18:17:00 +0100

Prepare

Learn to work with two hands, one to move the mouse, one to press the Spacebar, Shift, Tab, Alt/Option and Command/Control keys.

Activate “Snap to point” from the “View” menu.

With Cmd/Ctrl-U, pink intelligent guidelines appear that can help with aligning the next point. Often this is annoying. Memorize the shortcut.

Use Cmd/Ctrl-Y to switch between Preview and Outline mode. Basic knowledge.

Go to Preferences > Selection & Anchor Display and activate [V] Constrain Path Dragging on Segment Reshape, the fourth checkbox from the top. That works better to fine-tune curves. Many other options on this page are related to the pen tool, try them out some time.

With the Selection Tool (V), a path can be selected. With the Direct Selection Tool (A), one or more points on a path can be selected. In Illustrator a selected point is dark (filled) and non-selected points are hollow.

To digitize letter shapes from a photo, set Fill to “None”. Set Stroke to a thin line in a color that contrasts well with the colors in the photo.

Put photos or scans in a separate layer and lock it.

All paths are drawn with on-curve Anchor points. Curved segments have additional off-curve Handles that control the curvature.

Anchor points in Illustrator can be Corner points or Smooth points. For Smooth points, the Handles on either side of the point have the same direction. Illustrator does not have handy tangent points that you might find in other drawing software.

First choose the Direct Selection Tool (A), and then the Pen Tool (P). Pressing Cmd/Ctrl then gives access to the previously selected tool, Direct Selection, which is practical.

Start, Straight lines first

At first, the Pen Tool has a small asterisk (*) next to it, to symbolize the birth of a new path.

Click on the canvas to set a point, click once more to create a straight line.

Press and hold the Shift key to constrain the placement of the next point to 45 degrees angles in relation to the previous point.

You are now creating an open path with two endpoints.

In the active path, click on a previously set point to remove that point from the path. The Pen cursor shows a minus (-).

Click in between two points on the path to insert an extra point. The Pen cursor shows a plus (+).

Curved segments

A curved segment has two handles by definition, a straight segment should have no handles. When one of the handles of a curved segment is on the point it originates from, the curved segment seems to have only one handle. Segments with one visible handle are easier for very shallow curves but are mathematically not ideal.

As usual, first choose the Direct Selection Tool (A), and then the Pen Tool (P).

Click, hold down the mouse button and drag. This draws smooth curve points with control vectors on either side of the point, the handles are of equal length and direction.

Click-Drag again to finish the first curved segment and start the next.

Pressing the Shift key before clicking constrains the position of the next point, pressing the Shift key while dragging constrains the direction of the handle to 45-degree angles.

Click-drag again on the last smooth point to differentiate the length of the outgoing handle, the point remains smooth. or simply press Cmd/Ctrl while dragging. I love this relatively new improvement.

The power of the Option/Alt key

Pressing the Alt/Option key while dragging a handle enables a different length and direction for the outgoing handle, the smooth point becomes a corner point.

Press the Alt/Option key to quickly access the Anchor Point Tool (Shift+C). It looks like an upside-down V.

Alt/Option-click on a smooth point in a selected path to retract both handles coming from this point. Room for improvement: Alt/option-click on a handle to retract just this handle

Alt/Option-click-Drag on a corner point in a selected path to drag out handles of equal length.

Alt/Option-click-drag on the handle of a smooth point to move it independent of the other handle. The smooth point becomes a corner point.

With the Alt/Option key pressed, (or with the Cmd/Ctrl key pressed) click on a curved segment to reshape the segment directly. The cursor becomes a black arrow with a small curve segment next to it. Constrain Path Dragging on Segment Reshape should be switched on in preferences, and smart guides should be off (Cmd/Ctrl-U).

(Only when using Alt/Option-drag on a straight segment to turn it into a curved segment, it is more practical when the option “Constrain Path Dragging on Segment Reshape” is switched off. This unfinished Adobe business, I suggest considering converting a straight segment into a curved segment using the Alt/Option key a special case that should never constrain the direction of the newly born handles, regardless of the setting in preferences.)

Alternating straight and curved segments

When a curved segment should be followed by a straight one, click on the last point to remove the outgoing handle, (the cursor shows an upside-down v) and click somewhere else to add the straight segment.

When a straight segment should be followed by a curved one, click-drag from the last drawn corner point. (the cursor shows an upside-down v) Room for improvement: this new handle could be in the direction of the previous straight-line segment by default (like triangle tangent points in font editing software) unless or when Alt/Option is pressed.

Closing paths

In font production, paths are closed, in Illustrator they don’t have to be.

While drawing a path, click on the start point of the path to close it. The cursor shows a small circle (o). When the closing point is smooth, click-drag modifies the length of the last handle of the previous curve segment plus the direction of first handle of the path.

Press Cmd/Ctrl to temporarily access the Direct Selection Tool, select two open end points by clicking or dragging over them, and type Cmd/Ctrl-J (Join). This will draw a straight-line segment between the two points.

When you move the two endpoints of a path on top of each other (Snap to point must be active) the path will not be closed. Select the double point with the Direct Selection tool and type Cmd/Ctrl-J to join.

To open a closed path, click on it with the Scissors Tool (C)

Be in Command/Control

Press Cmd/Ctrl to temporarily switch to the Direct Selection Tool, to move any point on the path you are drawing.

Press Cmd/Ctrl (or Alt/Option) to modify the curvature of a curved segment. Activate “Constrain Path Dragging on Segment Reshape” and deactivate smart guides (Cmd/Ctrl-U) for better control.

Press Cmd/Ctrl to move a straight segment within a path to a new position. The handles of adjacent curved segments stay in place, wow. (this was default behavior in the great FontStudio from 1991)

To start a new path, press Cmd/Ctrl and click in an empty area to deactivate the previous path and then continue drawing.

Press Cmd/Ctrl to select one or more points with the mouse. With the arrow keys of the keyboard, selected point(s) can be moved around, according to Preferences > General > Keyboard Increment. I set it to a very small value. With the Shift key pressed, this value is multiplied by 10.

Press command near a corner might show controls to add rounded corners.

Continuing the path

Illustrator will show you where the line goes before you set the next point. After using the arrow keys, the Pen Tool loses connection with the active path (I think this is a bug) and you will have to click on an endpoint of a path to continue drawing from there.

When the drawing was interrupted, or if you want to continue drawing from the other side of the path, press Ctrl/Cmd to deselect and then reselect the path. Then use the pen tool to click or click-drag on any endpoint of the path to continue drawing from there.

Koning Display: technologically-advanced curves

Mon, 20 Jan 2020 16:35:00 +0100

In the last few decades, LucasFonts has developed specialized custom font solutions for all sorts of clients: from newspapers and television stations to pushing the boundaries for electronic companies and several automobile manufacturers; from transparent PNG fonts to variable fonts, for which we built tools first. We gained a lot of knowledge working on those projects, and we have funnelled that technical know-how into our library’s newest typeface: Koning Display.

We are grateful that our efforts have been recognized with numerous awards: TDC Certificate of Typographic Excellence and Award of Excellence from Communication Arts both in 2018, and Gold from German Design Awards in 2020.

The wide range of weights and styles shipping as part of the Koning Display family can be seen in this sample above.

We released Koning Display in November 2019. Named after the Dutch word for “king,” the design was an in-house side project we revisited over and over again for about a decade-and-a-half. Time and many revisions allow typefaces to ripen. We even invented new constructions to fine-tune contrast in interpolated weights.

This animation shows how Luc(as) can control the contrast in the interpolated weight without changing the design of the masters.

The look of a Koning

Luc(as) wants to make graphic designers’ jobs easier, but his fonts are not all drawn with a specific area of use in mind. That is everyday work anyway: custom-type clients come to him because they need something specific; Luc(as) is the best font developer who can deliver that for them. This is important because Koning is not specifically intended to be a typeface for editorial design work, for instance, like Floris and Spiegel Sans are. It was not developed for branding on the cosmetics market, either – even though we think it could tackle that kind of application well. Type designers sometimes tell graphic designers what a typeface is for, but Koning is not like that. We are eager for our customers to tell us themselves.

In Koning Display’s Black weight, the counters inside of letters are small. This helps in the overall spacing of the typeface because it allows the font’s default spacing to be compact. Since Koning Display is a display design – the intended size range is right there in the name – the emphasis when spacing and kerning its letterforms was on achieving equal distances between shapes. For a text font, the focus would be more on the rhythm of white spaces inside and between the letters, and all punctuation is to be spaced with more air. In a display font, everything is more compact; differences in distances between punctuation and letter shapes become very obvious and need pair-specific adjustments. Therefore, Koning Display has quite a few kerning pairs. Special techniques were used to keep the size of the kerning data small, to facilitate a smooth webfont experience.

The distinctive swelling of thin stems might seem like a purely decorative decision, but it is actually a means of color control, it fills up spaces inside letters, making the overall texture of a text more even. The regular weights of Koning Display work astonishingly well in small sizes when tracking is applied to add some spacing. The smaller the size, the more tracking is needed.

Spacing and OpenType features

It is not just glyph pairs that have been kerned in Koning Display! Some rare language situations require that glyph triplets get extra treatment. Narrow glyphs, kerned on both sides might provoke the neighbors crashing into each other. Two examples: the strong kerning between the apostrophe and the A is reduced when these follow an L; the kerning between a period and an ordinal is reduced when they are preceded by the numeral 7.

Language solutions

In general, the various international ways of using quotes in text needs special attention. Periods and commas follow the rhythmic spacing of characters, but things like : ; ! ? « » read better when they have some extra space between the letters. So we built that in, as always the French take this so far that they type full spaces in around such glyphs – which, even for French typographic standards, is too much. So, full spaces between double chevrons and words are reduced to a narrow space in French text. The same is true for the : ; ! and ? characters. For Moldavian and Romanian, the cedilla-shaped diacritic is replaced by a form that looks like a comma. In Dutch, a j with an acute appears after the i with an acute.

Koning Display’s fonts include 31 different OpenType features, including ligatures, stylistic sets, and case-sensitive alternates. Visit the Koning Display family’s package details page for a complete list of OpenType features, including before and after samples.

OpenType features

Some of the fonts’ OpenType alternates are typographic options that will be familiar to users of well-made fonts. Aside from the ability to toggle between single-story and double-story letterforms, users can substitute proportionally spaced old-style figures in for the fonts’ default lining figures. Other OpenType features offer much more striking changes to the fonts’ appearance.

The above logo is set with Koning Display ExtraBold. The alternate single-story g is from Stylistic Set 2, and the alternate single-story a from Stylistic Set 1.

Stylistic Set 14 in each of the Koning Display fonts substitutes much lighter punctuation into selected text.

Similar forms from the past

Koning is not based on any specific historical models, but some of its characters are still reminiscent of earlier works from the history of lettering and typography. For instance, many of Koning’s strokes are wedge-shaped in a way that is similar to styles practiced by sculptors in Renaissance Florence. Florentine inscriptions have inspired many typeface designers: Hermann Zapf made sketches his Optima typeface on a 1950 visit to the church of Santa Croce in that city. And in the 1990s, Paul Shaw and Garrett Boge made a trio of typefaces that were more literally based on Florentine works (these were Beata, Donatello, and Ghiberti).

Capital A and X from Fette Venetia, the Vienna-based Brendler foundry’s version of Florentine Bold, by the American Type Founders Co., 1898.

The most “Florentine” letters in Koning are the A, E, F, G, K, L, N, Q, T, and Z. These shapes have a long typographic history; the first typographic interpretation of Florentine inscriptions dates back to the 1890s when the American Type Founders Company in the United States introduced their Florentine types. As you can see above, these also featured some letters with asymmetrical counters, although their contours were straighter than Koning’s, which are curved.

Comparison of Koning Display UltraLight with Venetia, the Vienna-based Brendler foundry’s version of Florentine Old Style, by the American Type Founders Co., 1896.

Koning is less extravagant than typefaces in the direct Florentine tradition and more lively than mid-20th-century contrasted sans serifs like Optima. Nevertheless, conjuring up the Renaissance is a good way to connote class and elegance. Koning would be an excellent selection for use in designs for the fashion industry and even for beauty products.

Control your spacing

Even though many applications let you switch kerning off, or replace it with an in-application algorithm called “optical” kerning, those options are bad ideas. They replace our excellent spacing and kerning with very unaesthetic results. There are a few do’s and don’ts that you, the user, must control for best results.

Applications often turn the standard ligatures and contextual alternates OpenType features on by default, while they have the discretionary ligatures feature off.

Optionally activate ligatures. In some situations, it is better not to use them. Give it a thought.

Optional discretionary ligatures. Use these more prominent things with restraint.

Koning Display’s ligatures are space-saving, but if you find ligatures too distracting, switch the ligatures feature in your app off.

In the first line above, the standard ligatures and discretionary ligatures features are both applied. The bottom line has no ligatures.

Koning Display’s fonts have substitutions in the contextual alternates feature ensuring that text stays compactly spaced, even without ligatures. For instance, the fonts have three different f-variants, which each make room for the various possible shapes that could come after that letter.

Signage arrows

Text arrows

Activate by choosing oldstyle figures or stylistic set 4.

Three shapes for dots

By applying stylistic sets, considerable changes can be made to the typeface’s appearance. For example, Koning Display’s dots are rectangular by default. But each font has two kinds of alternate dots to choose from (with matching punctuation and diacritics to boot). By dots, we mean the marks on top of i and j. With diacritics, we mean accents like ċ and ö. Punctuation includes the colon, comma, period, etc.

Stylistic set 14 replaces a font’s diacritics and punctuation marks with hairline versions of those forms. We call this Koning’s “hipster” style!

Stylistic set 15 replaces just the dots on i and j (and ligatures with those in them) with hairline forms.

Stylistic set 16 replaces a font’s diacritics, i and j dots and punctuation marks with diamond shapes. We call these “royal dots.” Koning is a royal typeface, after all.

Standard fractions

Cap-height fractions

Access shorter fractions via the case feature. In InDesign, do this by selecting a text and pressing the All Caps button.

Koning Display as variable fonts

Customers licensing all upright fonts also receive the range packaged in a single variable font. This is also true for the italics. The variable fonts are not sold separately for now.

Koning Display’s variable fonts each include a weight axis. This technology offers several advantages. Even though Koning Display already has ten weights, installing a variable font allows you to choose the exact letterform weight you need. If you find our pre-defined Bold a hair too light, and our ExtraBold a bit too dark, you will be in luck with this bit of tech. The file size of one or two variable fonts is much smaller than 10 or 20 individual font files. Using variable fonts in web design allows you to specify more font styles on a page without having to burden your visitors with larger download amounts. Furthermore, the axis can be used in websites to create animations and creative user interactions. And of course, the pleasure of being an early adopter of cutting-edge technology is another good reason to license these fonts.

Ornaments and catchwords

Koning Display’s design includes several ornaments for playful and professional use. These ornaments are part of the character sets of each font, and their stroke thicknesses have been adjusted in each weight so that they harmonize well with the alphanumeric glyphs.

Ornaments from the Koning Display UltraLight weight designed by Martina Flor during an internship in 2011–12.

Martina also developed a concept for catchwords, seen here in Koning Display Regular.

More Koning to come!

Koning Display, as it is now, is the family’s first release. We are working on expansions, support for additional languages and our customers’ needs.

We hope that you have enjoyed this explanation of some of Koning Display’s design and technical features. For an item by item list, have a look at the typeface’s package overview page. On the styles page, you can input your own text and see for yourself how it looks in each of the 20 styles.

Webfonts

Wed, 15 Jan 2020 13:00:00 +0100

The LucasFonts webfont license

You receive WOFF2 font files to host on your own server.
The license is perpetual with a one-time payment.
The license cost depends on the number of monthly page views of the website you use the fonts on.
Our family rebate applies when you license more styles from the same typeface (super-)family.

Please refer to the full text of the EULA for legally binding information.

How to use webfonts

Static fonts

Upload the WOFF2 files to your web server. Set up the @font-face rules in your CSS to point to the font files as shown below.

Using a single font

If you use just one style, you can use a short version of the @font-face rule. You can choose any family name you like, but make sure not to use the name of any font installed locally on your computer. Otherwise the browser may use that font instead of the requested webfont.

@font-face {
    font-family: 'MyWebFont';
    src: url('/webfonts/TheSansMonoWeb-SCdW4.woff2') format('woff2');
}

You can then request the font in your usual CSS rules:

h2 {
    font-family: 'MyWebFont', monospace;
    font-weight: normal;
}

If you apply the webfont to any element for which the browser uses a bold or italic font style by default, such as <h1>-<h6>, <strong>, or <em>, make sure to reset the weight or style to normal. Otherwise the browser may render the font as fake bold or italic.

Style-linking multiple fonts

You can group multiple fonts under the same family name. In this case, you should fill in the correct, unique combination of font properties for each webfont. These are usually font-style (normal or italic) and font-weight (100 to 900).

This example adds an italic font to the normal font style:

@font-face {
    font-family: 'MyWebFont';
    font-style: normal;
    font-weight: 400;
    src: url('/webfonts/TheSansMonoWeb-SCdW4.woff2') format('woff2');
}

@font-face {
    font-family: 'MyWebFont';
    font-style: italic;
    font-weight: 400;
    src: url('/webfonts/TheSansMonoWeb-SCdW4i.woff2') format('woff2');
}

Variable fonts

Variable fonts contain multiple styles of a typeface family in one file.

@font-face {
    font-family: 'TheSansMonoWebVar';
    font-stretch: 80% 100%;
    font-weight: 200 900;
    src: url('/webfonts/TheSansMonoV.woff2') format('woff2-variations'),
         url('/webfonts/TheSansMonoV.woff2') format('woff2');
}

The ‘font-stretch’ and ‘font-weight’ properties provide a hint to browsers as to what range of variations is provided by this font.

You can then request a specific instance in your CSS:

h2 {
    font-family: 'TheSansMonoWebVar';
    font-stretch: 85%;
    font-weight: 800;

    /* legacy low-level code: */
    font-variation-settings: 'wdth' 85, 'wght' 800;
}

This would produce a slightly narrow, extra bold variation of the typeface like this:

Hello world

Variable fonts with static fallback fonts

The exact syntax for providing variable fonts, and making sure they are loaded by supported browsers, is undergoing changes as work on the CSS fonts module level 4 draft web standard is progressing, but this is what we currently settled on for our own site:

/* First, define the variable font with its own family name */

@font-face {
    font-family: 'TheSansMonoWebVar';
    font-stretch: 80% 100%;
    font-weight: 200 900;
    src: url('/webfonts/TheSansMonoV.woff2') format('woff2-variations'),
         url('/webfonts/TheSansMonoV.woff2') format('woff2');
}

@font-face {
    font-family: 'TheSansMonoWebVar';
    font-stretch: 80% 100%;
    font-style: italic;
    font-weight: 200 900;
    src: url('/webfonts/TheSansMonoV-Italic.woff2') format('woff2-variations'),
         url('/webfonts/TheSansMonoV-Italic.woff2') format('woff2');
}


/* Then define static fallback fonts */

@font-face {
    font-family: 'TheSansMonoWebStatic';
    font-style: normal;
    font-weight: 700;
    src: url('/webfonts/TheSansMonoWeb-SCdW7.woff2') format('woff2');
}

@font-face {
    font-family: 'TheSansMonoWebStatic';
    font-style: italic;
    font-weight: 700;
    src: url('/webfonts/TheSansMonoWeb-SCdW7i.woff2') format('woff2');
}


/* Assign the static fonts first,
   then override with an '@supports' statement */

h2 {
    font-family: 'TheSansMonoWebStatic', 'Consolas', 'Menlo', monospace;
    font-weight: 700;
}

@supports (font-variation-settings: 'wght' 700) {
    h2 {
        font-family: 'TheSansMonoWebVar', 'TheSansMonoWebStatic',
                     'Consolas', 'Menlo', monospace;
        font-stretch: 90%;
        font-weight: 700;

        /* legacy low-level code: */
        font-variation-settings: 'wdth' 90, 'wght' 700;
    }
}

Carlsberg Font Extensions

Fri, 22 Nov 2019 16:00:00 +0100

Some of our most fruitful partnerships are with design agencies. In 2014, for instance, we assisted Kontrapunkt in Copenhagen in their making of a branding typeface for the Danish brewing company Carlsberg. You can read all about that in our Carlsberg Slab case study. A few years later, we got to develop fonts for Carlsberg again – this time, Taxi Studio in Bristol was redesigning the brand.

Taxi Studio worked with Tom Lane in Liverpool to redesign Carlsberg’s logo. Lane also drew a Bold sans serif that harmonized with it. This font included English and Danish characters. Taxi Studio brought LucasFonts on board to expand that into a family of fonts with two more weights (Light and Regular). We also extended the fonts’ character sets to support all European languages (not just those used in Western Europe, but also Central and Eastern European ones, plus Greek and languages written with Cyrillic characters), even developing Arabic extensions for this sans serif. On top of that, we mastered the font files as well, adding the necessary kerning, hinting, and OpenType technology.

The assignment specified that the fonts should also work well when electronically condensed to just 80% of its normal width. Packaging designers do this to fit all the small print on cans, for instance. Some languages like Finnish or Polish have longer word lengths on average, and the ingredients list has to fit on a can, even if that means not being typographically ideal.

Text at 100% and 80% width (Light, Regular and Bold).

We delivered the fonts to Taxi Studio in 2018, and Carlsberg began rolling out work designed with them in 2019. This is how Taxi Studio summarized our contributions to the project:

The final part of the versatile brand toolkit is a bespoke brand typeface. Developed in partnership with type foundry LucasFonts, using a character set designed by Tom Lane, it perfectly complements the re-crafted logotype. Combined with the full complement of new Carlsberg assets and a strong, coherent brand language, this new typeface will help ensure consistency of application across the global portfolio for decades to come.

The default versions of the Cyrillic letters shown above, as they appear in the Ny Carlsberg Display Light font.

As is customary for almost all typefaces LucasFonts develops that support Cyrillic, the Carlsberg Display fonts include language-specific versions for specific letters. For instance, 15 lowercase letters can appear differently in Bulgaria. The two lines above show the default Cyrillic variants for those letters. Below, you can see our Bulgarian variants of them. For more information about the Cyrillic alphabet used in Bulgaria, have a look at this article on European Cyrillics from Luc(as) de Groot and Sonja Knecht.

Alternate Cyrillic letterforms for the Bulgarian language.

ArrowFont 2.0

Mon, 14 Oct 2019 17:18:00 +0200

Luc(as) de Groot produced his first commercial variable font in 1992, before having the Internet or PDF files. This was an arrow font for a signage company in London. By moving the sliders for weight and angle, 18 different arrows could be fine-tuned so that they would be a match for any typeface.

He prepared two non-editable documents with embedded images, which are reproduced below. The first one explained how to install the font. The second file told designers how to use the font. The files – reproduced below – could be opened with SimpleText, the default text application on pre-OSX Macs (the successor of SimpleText, named TextEdit, can still open these documents, but refuses to display the embedded images).

The shape of the new 1E9E LATIN CAPITAL LETTER SHARP S

Luc(as) de Groot, Deutßchkenner — Fri, 03 May 2019 18:05:00 +0200

What does the lowercase German double‑s shape look like again? It exists in countless variations, let’s first find out why, before I focus on the new capital letter.

Around 500 years ago, the ligature of a long ſ and a short s was used in many Latin-script languages. Italian writing masters like Arrighi, Tagliente and Palatino used this ligature in various styles:

Arrighi, Tagliente, Palatino, five centuries ago.

This perfectly evolved shape is found in many fonts today.

Also around 500 years ago, blackletter was fashionable, following architectural styles. In blackletter, this character often looked like a combination of a long “s” and a “z”.

Blackletter eszetts: one Textura style, one Schwabacher, and a cool “z”. From a German calendar, 1512.

Congress with ſs. US Bill of Rights, ratified 1791.

ſs in the word Maaßstab. Andrée’s Weltaltas, 1880.

About 250 years ago, the combination of a long and short “s” was abundantly used in English. German texts printed Latin-script types around 150 years ago commonly featured it, too. The ß is still used in German texts today.

Is it an SS or an SZ? (part 1)

In Holland, I was taught that the ß in blackletter is a combination of a long and a short “s”, glued together and cleaned up a bit.

The right part of the small “s” looks very much like the blackletter “z” (ʒ), so the resulting cleaned-up shape looks like a long “ſ” and a “ʒ” combined. This is where some naming confusion originated.

The top could be ſs. The bottom could be ſʒ or a cleaned-up version of ſs.

This text was written at a period when Latin types often did not have an ß in them. Translated into English, it reads: After a short vowel ſſ or ſs is used, after a long vowel ſʒ (ß). In Latin type normally ss is used for both occasions. From „Buch der Schrift“, Vienna 1880.

To answer the question “was it SS or SZ in typesetting?”, one should ask: “was it blackletter or Latin, was it according to the rules of Adelung or Heyse? When was it, and where was it?” The following table explains the complications, and shows once more that the ʒ-shape only appeared in blackletter:

*Blackletter typesetting (Fraktursatz)*
	Adelung rules Waſʒerſchloſʒ Straſʒeneinfluſʒ	Heyse rules Waſſerſchloſs Straſʒeneinfluſs
*Latin typesetting (Antiquasatz)*
19th century Wasserschloss Strasseneinfluss	20th/21st century Adelung rules Wasserschloß Straßeneinfluß	21st century Heyse rules Wasserschloss Straßeneinfluss

Around 140 years ago, from 1879 onwards, the official rule to translate blackletter typesetting into latin typesetting (Prussia, Bavaria) was:

In Latin type, s was used for ſ and s, ss was used for ſſ, and ſs was used for ß (or ſʒ).

Is it an SS or an SZ? (part 2)

Ss or Sz? The German word for fun (Spaß, pronounced with a long vowel) comes from the Italian Spasso. It would be wrong to write it with a “z”. Anyway, historically, the name EsZett is less correct than sharp s. The glyph name for ß is “germandbls”: German double s, and the Unicode name for the capital version is Latin Capital Letter Sharp S, which is long, but very correct.

Other European languages use a z-form to differentiate the pronunciation of s or c.

The German neighbors: in Holland a double vowel is used to make a sound longer. In France, the grave makes it short, the acute long.

Compared with some other European languages, German is not very efficient with the s-sounds.

In German, the s is pronounced softly, like the English z, and the German z is pronounced as “ts”. The combination ss (ß) is pronounced as the English “s”. That is why it is called sharp s in Germany.

In order to transcribe the pronunciation of this German word to a Dutch tongue, four letters must be exchanged

Similar to the long ſ (at the beginning and in the middle) and the short s (at the end of syllables), Greek also has two different shapes for the lowercase s, a middle and a final-s. Both lowercase variants share the same capital form.

Several shapes already exist in Unicode for alternative pronunciations of S and Z:

So, there would have been various alternative solutions to the German capitalization problem, but no, now we need the new glyph from the last entry in the list below, the one that is missing in most fonts:

The formal development of a capital ß

Around 100 years ago, some large German foundries already added capital versions of ß to their fonts. New fonts lead to new sales, so this might have had economic reasons as well. But it did not catch on.

Three different attempts at a capital ß from type specimens printed by the Schelter & Giesecke foundry in 1912 and 1921. The middle part shows a combination of an almost full S-shape combined with a narrower Z.

Around 60 years ago, serious efforts were made to design a convincing shape for the character, and many forms we now use today were already proposed back then. But the capital ß did not catch on.

Image from the Papier und Druck magazine, issue 10/1956, p. 101

Around six years ago, a political party, fond of capitals, asked for the capital sharp S to be included.

This is the shape I proposed.

The feedback was: “I find it very hard to read, please don’t be offended, I built my own proposal…”

Form suggested by our client.

That looked just like the shape of the lowercase ß in Helvetica :-) LOL! It is not strange that a new glyph cannot be read easily at first. It has to be learned.

The final form we compromised on.

They accepted a version with a more rounded top, but I think my original proposal is better: the diagonal is more prominent and it has more authority. On top of that they used too-tight spacing in their campaign. No wonder they lost votes!

The compromise capital ß in-use on campaign graphics.

How wide should the capital ß be?

Around seven years ago, Christian Thalmann (@CatharsisFonts) made a good manual that described how to build a capital ß. A few surfers commented that his suggestion was too wide. I do not agree: wide is fine, but the counter could be pinched a bit more, to reduce the area of the big inner gap.

The new glyph combines a vertical stroke with a narrowed S/Z shape, and therefore must be visibly wider than other characters with two vertical strokes (like BDGHNPRU), but not as wide as M and W, which each have four “verticals”.

Around five years ago, Ralf Herrmann published an excellent English-language text describing how to design a capital ß. There’s a German version, too. Despite its quality, I do not think that the classification of shapes by city name is appropriate today.

Stroke endings

Analysis of classical capitals reveals that all vertical stroke endings have serifs on both sides of the stroke, and only R and J are often bare-legged exceptions. Thus, ideally the left vertical stroke should have two serifs at the bottom: one left, one right.

Constructing the glyph

By combining elements from U, Z and S, a serif version could look like this.

But that doesn’t satisfy everyone.

The missing Serif

Because of room restraints, several serif fonts have only one serif on the left side of the stem, and no serif on the right. Compared with fully serifed capitals, this looks awkward. But since the whole glyph is new and strange, this is not that tragic.

Duden rules

Duden is the German standard for language rules. Since the writing reform of 1996, the lowercase character ß is only used when the preceding vowel is to be pronounced with a long sound.

In all-caps writing, ß must be replaced with SS. An exception is made for persons’ names in official documents. In that case, the lowercase form remains.

Since June 29, 2017 (officially), a new optional capital version of the letter was added to the German alphabet: ẞ, with Unicode code-point 1E9E. It is left up to the user to decide if they want to use it instead of SS or not.

Germany, Austria, Switzerland

Even though there are many strong German dialects that I have trouble understanding, Austria and Switzerland also use the German language. Austria seems to follow German rules, and they consistently name the glyph scharfes S, or sharp s. Only in some areas of Germany it is called Eszett, inspired by the shape in blackletter typefaces. In Holland we call it ringel‑S.

In Switzerland however, since around 90 years ago, the ß glyph has been abolished altogether from the German language: they always write ss instead. Even though this might cause confusion for one or two words, in practice the intended meaning can be guessed from context. English probably has more homographs; is rock music or stone? Is a bat an animal or a wooden stick? Take the fall in the fall, drop a drop of fluid and be right to turn right where you saw the saw and left the left half. Take the lead with lead metal type, not your type?

Since the latest reform of German writing rules in 1996, the use of ß has diminished, but it is not likely that it will ever be given up completely. Plenty of Germans hate the new capital glyph, but now that it is here, we better adopt it.

Implementation in fonts

It might be tempting to put “SS” into the 1E9E slot. According to Duden rules, this is still grammatically correct. However, text set in capitals often looks better with plenty of spacing, and when you put a fixed SS into the slot, the spacing will be wrong, sooner or later.

Even though the official optional adoption of the capital ẞ happened in June 2017, it was already added to Unicode in April 2008, along with a visual example. If you don’t like the new glyph, just don’t add it.

An application is NOT supposed to force the user to use the new glyph in all-caps typesetting. InDesign has implemented it correctly. When changing the lowercase ß to small caps or ALL CAPS, the results are ss and SS. These can only be selected as a unity, but react correctly when extra spacing is added. Thank you Adobe!

Therefore it is not a good idea to add the following substitution ß > ẞ to the [case] feature. Character casing must be handled by the application, not by the font. If you implement a small-cap version of the glyph in your font, please do NOT add it to the [smcp] feature code, that would change the lowercase ß into the small-cap glyph, unless you are a dictator willing to force a non-existing directive to type users. But DO add it to the [c2sc] code, to change the capital letter to the small-cap variant.

Analysis of the 1E9E glyphs in 270 fonts/families

Page of

/media/GermanCapitalSharpS-v143AnalysisOnly.pdf

Above, I’ve embedded a PDF comparing the capital eszetts in 270 different designs. This selection was not made according to any particular criteria. Instead, the pages show all of the fonts containing a glyph at the Unicode position 1E9E that I could collect within a few days, back in October 2018. Most of the fonts are available as part of Adobe’s CreativeCloud subscription (on MyFonts, only around 5% of fonts contained the new glyph). The families in the PDF are sorted by shape.

New capital eszetts for my Calibri typeface

In 2003, I designed Calibri for Microsoft.

In 2010, Microsoft added a capital sharp S: not nice and definitely too narrow.

For Calibri Light in 2012, I designed and tested three versions of this character:

This is the version we chose:

Since then, Calibri has had different versions of this letter in the different weights.

The Microsoft versions have some problems. When I pointed them out, they asked me to supply new drawings, but these have to be on the same width.

I prepared five variants for Regular and Bold, and a questionnaire for Berlin Typostammtisch attendees to choose their favorite version.

Here are the voting results: the winning shape is already available in the Light weight. That this version fits well with Calibri doesn’t mean other shapes won’t fit other sans serif fonts.

That’s it!

The goal of this publication is to prevent carelessly designed future versions of this new character. Please spread the word.

TheMix Arabic

Huda Smitshuijzen AbiFarès — Sun, 17 Mar 2019 10:00:00 +0100

Balancing Handwritten and Geometrically Constructed Letterforms

The Design Concept

Mediamatic’s t‑shirt featuring their proposed Arabic version of the iconic “I amsterdam” logo – this time set in TheMix Arabic.

The idea of matching a western designer with an interest in mixing Latin styles with an Arab calligrapher with the same interest in mixing Arabic calligraphic styles, both proficient with lettering yet interested in more simplified contemporary design, seemed like the perfect solution at the time. This choice and team also fitted the idea of developing the Arabic version of the hybrid family member of the Thesis font family – TheMix. For me, TheMix embodied some of the subtle experimental approaches to type design (specially indicative of the typographic design trends of the 90s). I always felt that kind of approach was also necessary for Arabic type design, especially knowing how easy it would be to develop such experiments with a script that is inherently rich with variety and flexibility. TheMix was also the best font to start with since it carried serifs on some letters and not others, and it had some cursive qualities and roman/ humanist proportions and strokes, though it is almost a monolinear sans serif. Both these latter qualities made it more easily compatible with the Arabic lettering tradition. It was also the best font to start from, since it is the one that would eventually be a nice match for both the serif and sans serif fonts of the Thesis family. And so the concept of a fresh and contemporary- looking Arabic typeface was born.

TheMix Arabic in-use for the El-Hema project in the Netherlands, 2007. Logo design by Tarek Atrissi in collaboration with Huda Smitshuijzen AbiFares

The Design Process

Once the choice was set on the font to develop and the team members had been selected, the two designers were introduced and a face-to-face meeting between them was arranged. Luc(as) flew to Cairo, in November 2005, where he stayed for about five days and met and worked with Mouneer at his studio. Other than providing a good opportunity to work together, Luc(as)’s trip to Cairo was a true eye-opening experience. For the first time in his life, he came into contact with the variety of lettering in the Arab urban environment. He photographed and observed the vernacular visual culture of one of the most culturally significant Arab cities of all, Cairo. In addition, meeting Mouneer has made Luc(as) realize that there were far more Arabic lettering styles that he could use in his design than the familiar Ottoman Naskh styles that Western designers (and Dutch designers in particular) are most familiar with seeing and associating with as the “authentic Arabic.” With Mouneer’s encouragement, Luc(as)’s trip gave him the confidence to attempt this fresh approach and to create an authentic Arabic match for his Latin font. Three days of sketching and working sessions with Mouneer laid the foundations for the later work on the design of TheMix Arabic typeface.

TheMix Arabic is one of the most successful contemporary Arabic fonts. Since its release, it has been used by several cultural institutions in the Arab World, including the Sharjah Art Foundation.

Interpolation and Curve Technicalities

Jens Kutílek — Tue, 20 Nov 2018 11:00:00 +0100

Luc(as) regrets that Font War I, as he called it – PostScript against TrueType – has led to OpenType fonts in both formats, but separate: you have to choose one or the other, and can not combine the curve types whichever are best suited for a specific segment of a letterform. He gave examples of common curve configurations that are better represented in one or the other format. For example, TrueType curves have just one off-curve point per segment, which is an advantage for very shallow curves, where PostScript curves would need to place two off-curve points on the grid in a small restricted area.¹ In my opinion, as long as most type designers see TrueType conversion as an afterthought, as simple font post-processing, this will not be seen as a pressing issue.

TrueType segments mixed with PostScript segments.

Luc(as) has been using Multiple Master technology to the extreme for all his type families. His largest project in progress is an extension of the Floris family which had 4 axes and 2⁴ = 16 masters in MM technology – the maximum number that can be used in FontLab Studio 5. Now, as a variable font, it gained more axes (the ascender/descender length axis has been split into two separate ones, and a contrast axis has been added), but fortunately OpenType Variations don’t require to double the number of masters for each new axis. Otherwise, 64 masters would have been necessary, many of which would contain identical glyphs. Now we can omit many glyphs, e.g. the descender length axis masters don’t need to store glyphs without descenders at all.

Just one of the combinations of 5 design axes.

So for the LucasFonts library it is relatively easy to convert the existing fonts to the new format. Luc(as)’s team has been busy doing so over the last weeks using FontLab VI, but mainly for this presentation, because Luc(as) is not yet decided about the business model for variable fonts.

Gerry Leonidas said in his opening talk that it was hard to imagine more than three dimensions. Variable font design spaces can be built with 1 to 65535 axes, so it would be nice to find a way to help our imagination a bit. Luckily, Luc(as) has been thinking about how to visualise higher dimensions since he constructed 3-dimensional drawings with pencil and paper in school. In a happy coincidence, he recently met programmer Andrey Kuzmin, who built a browser-based font design space visualisation tool for him that currently works with up to 15 dimensions. You can find the code on GitHub, or just drag your variable fonts on the live test site fvar.unsoundscapes.com.

3D and beyond.

The next part of the talk was centered around an extension of the Calibri family. Luc(as) found a lot of Calibri on his travels where the fonts have been stretched, condensed, put on a circle – “all without variable font technology!” So the need for more Calibri styles was clearly there, and indeed Microsoft approached Luc(as) to create a “pilot for exploring the design possibilities and retrofitting issues in a variable version; no specific product plans”. This project revealed quite a few limitations of the current variable font technology.

Excel is an essential component of the type design process at LucasFonts.

To give just one example of the limitations that Luc(as) and his team discovered: An optical size master for large font sizes should be added. The extreme thin, narrow, wide and black masters are already only usable in large sizes. But if a headline master for the regular weight and width is added, the design differences between the normal 11pt Regular and the 72pt Regular will by definition also be applied to the extreme masters in large sizes, resulting in unwanted changes. Currently the only way to prevent this is to duplicate all 8 extreme masters in the font, and then duplicate them another time, because the same issue applies to the 6pt optical size. This will bring the desired result, but the font will have a much larger file size. Of course, file size savings are one of the big selling propositions of variable fonts.

Another thing is that the Large Regular master is nothing but an interpolation of the existing variants: A little lighter and a little narrower than the 11pt Regular. So there should be no need to add this data explicitly at all. For this, a kind of virtual axis would be needed. At the time of writing, there are already discussions going on about extensions to the OpenType specification to address these issues.

Not a collection of boat planks, but Calibri UltraExtended Air curve endings: “These still look VERY bad!”

The issues around PostScript and TrueType curves surfaced again in the Calibri project. The masters were designed in PostScript outlines, then converted to TrueType, and all curves had to be tweaked manually to accommodate the extremely wide interpolation range, and are still not perfect.

As Luc(as) began to explain that pornography has been a critical factor for most successful technologies in history, Jürgen Siebert intervened to stop him, but that may just have been because Luc(as) was well beyond his allocated time slot by now. The first released variable font from LucasFonts is a reworking of his classic porno font “MoveMe MM”, which you can download for free.

You can watch the whole presentation here:

As Chris Lilley from the audience noted, SVG contours can actually use both curve types next to each other, but SVG in OpenType is a relatively new addition that is not widely supported and has other drawbacks, e.g. it can not be hinted, which is not a big issue for color fonts, its main intended purpose. ↩

Der ABC-Macher

Tue, 08 May 2018 11:00:00 +0200

Sabine is the quarterly, German language magazine published by the design department of the University of Applied Sciences in Potsdam

The following article is written in German as it was originally published in issue No.4, 2010 of Sabine, the quarterly, high gloss magazine by the design department of the FHP (Fachhochschule Potsdam, Germany). Luc(as) de Groot teaches type design at the FHP. It appears with kind permission of the editor in chief. Please write to sabine@fh-potsdam.de to receive a free copy.

Eigentlich müsste ihn jeder in Deutschland kennen, flimmert seine Arbeit doch täglich durch die ARD. Von A bis Z nutzen Werbekampagnen, Wegeleitsysteme und Verpackungen die Arbeit von Luc(as) de Groot. Er entwarf für Le Monde (Floris), den Spiegel (Spiegel), die TAZ (Taz) und einige Zeitungen mehr: Luc(as) de Groot ist Schriftdesigner. Seine immens ausgebaute Schriftfamilie Thesis wurde zum Meilenstein dessen, was an Systematik und Perfektion erreichbar ist. 2000 gründete er die Typefoundry »LucasFonts« und hat an der FH Potsdam seit 1997 eine Professur für Schriftentwicklung.

Es hat sich eingeregnet, als wir in dem Schöneberger Hinterhof ankommen, in welchem Luc(as) de Groot sein Büroanwesen hat. Während andere Hausrücken Berlins bei solchem Wetter nur noch grauer werden, sieht dieser Hofgarten jetzt noch paradiesischer aus. Das Büro von LucasFonts liegt zu ebener Erde und ist gerammelt voll mit Tischen, Bildschirmen – wir hätten uns den Spaß machen sollen, sie zu zählen – und Buchstaben aller Größe und Art. Es ist eine begehbare Schatzschatulle – vorausgesetzt natürlich, dass man Buchstaben mag!

Luc(as) in his workshop

Luc(as) de Groot liebt Buchstaben. Ihnen widmet er Zeit, seine Ruhe und Aufmerksamkeit. Geboren ist Luc(as) nahe der holländischen Nordseeküste, da, wo die Zwiebeln blühen, in Noordwijkerhout bei den Feldern aus Tulpen, Hyazinthen und Narzissen. Dort machte er Abitur, ging zum Studieren dann nach Den Haag. Maler wollte er werden, als er sich an der Kunstakademie bewirbt. Noch in der Schulzeit hatte er sieben Ausgaben der Schulzeitung herausgebracht – alle wohlgemerkt in einem Jahr! Wenn man das Wort Freak anerkennend benutzen darf, ja, dann war Luc(as) schon als Kind ein Freak. Sich wenig um die Schule gekümmert zu haben, können wohl sehr viele von sich behaupten. Luc(as) aber verbrachte die Zeit in einer selbstgebauten Dunkelkammer und bastelte sich ins bunte Leben: Schmuck und kleine Geräte und Fotos sowieso.

An der Akademie dann legt man ihm beim Sichten der stattlichen Bewerbungsmappe voller Filmplakate und Zeichnungen ein Studium der Grafik nah. Und wiewohl es nicht das ist, was Luc(as) de Groot vor Augen hatte, geht er in seinem Studium auf: von allem macht er viel; vertieft sich in Illustration. Das Diplom besteht aus fächerumfassenden Prüfungen in Fotografie, Illustration, Schriftgestaltung, Typografie, Verpackungs- und Corporate Design. Zur Diplomschau 1989, die an der Akademie eine Woche lang dauert, kommen zahlreiche Designbüros – Luc(as) kriegt Aufmerksamkeit vom Studio Dumbar aus Rotterdam. Im letzten Jahr des Studiums geht er als Praktikant in das Den Haager Designbüro Studio Tint, bald darauf nach Amsterdam zu der großen Corporate-Design-Agentur BRS Premsela Vonk, die heute unter Edenspiekermann firmiert. Er bleibt dort vier Jahre und wird auf jene Jobs angesetzt, die mit Logos und Schrift zu tun haben. Er wird verantwortlich für den Einkauf von Schriften und hat bald eine erhebliche Datenbank angelegt. Das war von 1989 bis ’93.

Die Arbeit als Gestalter zu der Zeit ist bedingt von 13-Zoll-Monitoren, 300-dpi-Druckern und keiner guten Software – ganz zu schweigen von Datenträgern, die unkompliziert noch keine Datenmassen fassen können. Wenn Luc(as) Schriften macht, geschieht die Arbeit gänzlich anders als heute, nämlich analog: In Groß werden viele Reinzeichnungen angefertigt, bei Linotype werden die Buchstaben auf rotem Film sauber geschnitten und schließlich produziert eine Maschine über zwei bis drei Jahre setzbare Schrift. Schriften entdeckt hat Luc(as) irgendwie immer schon: Als Kind – wenn er Buchstaben in den Spuren täglichen Lebens sah, als Schüler – wenn er die Überschriften seiner Schulzeitung malte und später auch professionell – als Freelancer oder angestellt. Richtig los ging es damit in Berlin.

Interpolation Theory

Luc(as) de Groot — Tue, 08 May 2018 10:30:00 +0200

About interpolation

When producing large type families with multiple stroke weights, a certain degree of automation is not only agreeable (as a way to avoid tedious work), it may even be necessary (for making it feasible at all to generate such a huge number of fonts). Interpolation is a common method for doing this: to generate intermediate weights between two basic values, after which, of course, the automatically produced fonts are fine-tuned by hand.

Type designers are often inclined to establish intermediate weights by drawing, as it were, a straight line between the boldest and lightest versions of a family and then choose the intermediate weights somewhere along that graph.

Interpolation theory

As early as 1987, when developing intermediate versions of an existing typeface during an internship, I realized that the optically correct in-between weights are on a hollow curve that produces values which are lower than those on the straight line of the “average values”. In other words: if the verticals of the Regular weight have a value of 40 units and those of the Bold weight 70, then the SemiBold verticals should not be 55 units wide but slightly less, in order to give the optical impression of being exactly “in the middle”.

My tests resulted in a formula and a graph that precisely define the optimum value for any possible intermediate weight.

Anisotropic Topology-dependent Interpolation Theory

The 1987 Interpolation Theory has its limitations. It is one-dimensional. Yet the world has more dimensions; it is the same with type. On Earth the options for moving vertically are rather limited, while one can walk endlessly when moving forward or backward. Type behaves similarly. Therefore, the fine-tuning of the Interpolation Theory led to an anisotropic version, i.e.: a system that works differently in the “x” and in the “y” directions. In this case it means that the stroke weights grow slower on the vertical axis than on the horizontal one.

Limited growth

In order to explore this phenomenon I made two proof weights: an extremely bold one and a very light one. Now what happens if what interpolates between these extremes? It turns out that at a certain point the horizontals cannot get any thicker, because then the letter will disappear. However, there’s much more leeway in the vertical strokes. Here, too, the optically optimum proportions cannot be calculated by simple interpolation. When the proportion between verticals and horizontals is 1:1 in the light typeface and 3:1 in the bold one, it is not self-evident that in the intermediate weight, 2:1 is the proportion that looks best. Here, too, linear interpolation won’t do for calculating the in-between values. A slightly lower contrast will work better.

Topology of single letters

Moreover, the possibilities for growth of the horizontals depends on the topology of the single letters: when there is only one horizontal stroke, as in “L”, it has more room to expand than strokes that must share the same vertical space with 1, 2 or 3 other strokes. Each of these four topologies needs its own interpolation curve. Therefore, the new version of the Interpolation Formula is not only anisotropic, but also topology-dependent.

When a letter has only one horizontal stroke (“L”), that stroke can expand almost up to the glyph’s full height in increasing weights. With two strokes (“F” or “C”), less than half the height is available for each stroke, etc. One of the most difficult glyphs in this respect is the Euro sign, as it is among the few glyphs in which four horizontal strokes must share the vertical space available.

The interpolation theory in use

I will now describe seven more or less complicated real-life cases, with the numbers that I as designer need to see, as inspiration.

Weight Example 1

In the following example, there are three masters: Hair 34, Regular and UltraBlack. The table shows the thickness of the vertical n-strokes and the interpolation perthousands going twice from 0–1000, corresponding to the axis going from 0–1000. So in this case there was no mapping curve in the FontLab 5 file, instead I used the percentages to get a good-looking interpolation range. (Yes I use intermediate masters in FontLab 5, the first axis goes from Hair 34 to Regular, Regular exists twice, the second axis goes from Regular to UltraBlack.)

I think the gray values are calculated according to the formula, for the whole range, but since the weights had to be compatible with an earlier version of the font, I had to adjust the curve.

To do that I always set out the values in Adobe Illustrator and use a Bezier curve to make it look nice and smooth. Of course it would be awesome to get that functionality in FontLab, to start with a Bezier curve that represents my interpolation formula, with the possibility to edit the graph like any Bezier curve, and even insert extra points, like in the following screenshot from Illustrator:

Weight Example 2

The red line is the Bezier curve going exactly through the positions that are calculated according to my formula, depicted at the bottom in red. Below the weight names are the (unrounded) stroke weights of the “n”, and below that, the per-thousands values on the axis. If I feel the need to modify the curve, e.g. to make the Regular a bit darker, I would play with the red Bezier curve, adjust the heights of the vertical black lines accordingly to find the stem weights, and then calculate the new interpolation perthousands.

Weight Example 3

Some curve adjustment is often necessary, as I will illustrate with the following even more complex graph. This Taz example is from a huge weight range with two intermediate masters.

In this table, the intermediate masters are not shown. They do not correspond to any of the known instances. The first intermediate master is somewhere around ExtraLight, the second intermediate master is close to SemiBold. And that is fine, because all I want to know are the desired stem weights, so that I can find the correct interpolation values.

Because the UltraBlack in the three widths is unlikely to have the same color, and the hairline with four font units cannot have the same color in the three widths by definition (the extended Hairline has less lines per centimeter so it appears much lighter than the condensed hairline), I needed to adjust the curves quite a bit to make sure the Regular weights in the three widths would fit together. That was decided by making prints and discuss it with several trained eyes. I have also made a Font Density Calculator to help with these decisions. One can also say the curves are different because I wanted to keep the same amount of weights for all three widths, even though they have different scopes and densities. The basic principle of the formula is still in all curves.

In variable fonts we cannot have different weight interpolation curves for different positions on the width axis, which is disappointing, but we found a workaround:

Weight Example 4

According to my interpolation formula, the curves for ExtraCondensed and ExtraExtended of the Calibri Variable would have to be different from the curve of the Regular width:

But that is not possible, so we simply interpolated new intermediate Masters for Condensed and Extended so they would all be at 27.1% of the whole range, and thus did not correspond anymore to the actual Condensed Regular and Extended Regular. But that is hidden from the user, and that the curves are slightly different from the actual formula is impossible to notice.

Weight Example 5, practical implementation

In order to avoid having to handle my complicated formulas all the time, I made Excel sheets for all weight ranges from 3 to 20 weights, where the formulas are built-in, showing the interpolation curve in a graph, plus a formula that calculates the density of all the fonts, automatically represented by percentage and gray-value. I love Excel 😊

Width

The widths interpolation curve is also to be calculated according to my interpolation curve, in this case I defined the normal width to be 100% in User Space.

Optical Size

For the Optical Size a nice curve is less important, Jens made this one and the result looks good, but of course I would also like to use some formula here 😊 In this case there is a master at 6pt, a master at 11 pt (default) and a master at 36 point, and the normalized values are positive and negative percentages, which makes sense here, but would not make sense for a weight axis with an intermediate weight.

Taz Wide & Extended

Sonja Knecht — Tue, 08 May 2018 10:15:00 +0200

Taz Family

Die Anfänge: vom Auftrag bis zum ersten Einsatz

Die Geschichte der Taz beginnt 1998: Luc(as) de Groot entwirft eine Headline-Schrift für Die Tageszeitung. Visuell sollte die neue Schrift an die (zuvor verwendete) Futura Bold Condensed anschließen. Weitere Anhaltspunkte waren der deutsche Text, also viele Großbuchstaben, sowie kleine Ober- und Unterlängen für möglichst sparsamen Zeilenabstand im Zeitungssatz. Und der Wunsch, mit der neuen Schrift eine starke, vertrauenserweckende visuelle Identität zu entwickeln.

Das gelingt bestens: der Tageszeitung wie der Schrift Taz.

Zunächst lag das Schriftprojekt wegen Reorganisationen bei der Tageszeitung einige Jahre still. Am 7. November 2001 schließlich kam die erste „taz“ mit der Taz als Headline-Schrift auf den Markt. Aus dieser „Ur-Taz“ ging die ganze Taz-Familie hervor.

First issue of Taz provided with Taz headline font

Seit der Erstauflage erweitert Lucas de Groot die Taz stetig und baut sie zur „Super Family“ aus. Jüngste Mitglieder: Taz Wide und Taz Extended. Dieser Prozess und die beiden Neuerungen sind beste Beispiele für Lucas’ Anspruch, eine große Palette sinnvoll abgestufter Gewichte und Breiten zur Verfügung zu stellen (siehe Thesis TheSans, TheSerif, TheAntiqua). Das macht die Taz-Schnitte ideal für kombinierten Einsatz im Editorial Design und in komplexen Corporate-Design-Projekten.

Apropos: Einige Kunden von LucasFonts haben die Taz ausgewählt für die Abbildung von Text auf kleinen Displays (von elektronisch gesteuerten Geräten) – was eine sehr hochwertige technische Bearbeitung der Fonts erfordert. Das heißt: Von den Taz-Schnitten ist eine stetig wachsende Zahl bildschirmoptimiert („gehintet“). Die gesamte Familie wird ständig überprüft, abgeglichen und weiterbearbeitet, wie alle Schriften von LucasFonts.

Noch unentdeckt: Taz Headline Hairline

Eine Besonderheit ist dabei die Hairline-Serie der Taz Headline: Fonts unterschiedlicher Größe können kombiniert werden in gleicher Strichstärke (z.B. haben eine Hair 04 von 500 pt und eine Hair 06 von 333 pt beide eine Strichstärke von 2pt in den Vertikalen) – sieht super und sehr stylish aus. Seltsam, dass noch kein Magazin davon Gebrauch gemacht hat (soweit wir wissen). LucasFonts liefert zu dieser innovativen Gestaltungsidee Tabellen und Anleitungen im gedruckten Katalog: hier bestellen.

Ein Versuch, den Ausbau der Taz zu beschreiben:

Die TazText für Fließtexte (anfänglich „TazzerText“) ist angelegt in einer Weite von 110% zur Ur-Taz für Headlines. Die Taz Condensed mit ihrer Weite von 80% zur Ausgangsschrift kam – mitsamt Hairlines – 2010 auf den Markt.

Taz widths

2011 erweiterte LucasFonts die TazText von 4 auf 18 Schnitte mit Kapitälchen – Kapitälchen allerdings nur für die TazText. Laut Lucas de Groot sehen „Kapitälchen bei einer schmalen Headline-Schrift nicht optimal aus“; für eine breitlaufende Fließtextschrift wie die TazText allerdings passen sie wunderbar als Auszeichnungsschrift, und „brauchen ebenfalls eine gewisse Breite“.

Im Jahr 2012 fügt LucasFonts alle bis dato entwickelten Schnitte und Weiten der Taz zusammen – und ergänzt, was zu ergänzen ist. Im Zuge dessen entstehen 2013/14 die Wide (130%) und die Extended (150%).

Taz heute

Die Taz Familie umfasst heute 128 Fonts in 5 Weiten und 15 Strichstärken. Taz und Taz Condensed bilden diese 15 Strichstärken ab (inklusive Hairlines) plus Kursive, also je 30 Schnitte. Die TazText ist perfekt für Mengensatz durchgetaktet: 9 Schnitte von ExtraLight bis UltraBlack plus fünf Abstufungen des Regular-Schnittes, bezeichnet als „Grades“. Die Benennung dieser Grades der TazText Regular (83, 87, 91, 96, 100 und 106) bezieht sich auf die jeweilige Breite ihrer senkrechten Balken (Anzahl der Font Units).

Die ganze Taz-Familie hat eckige Punkte und Interpunktionszeichen. Alternativ stehen runde Formen zur Verfügung, für eine etwas weichere Erscheinung. Bei der Anwendung im Zeitungssatz allerdings stellte sich schnell heraus, dass diese weichere Variante für harte Fakten und dramatische Nachrichten weniger geeignet ist …

Taz specimen

Taz Wide and Extended

Die neuen Breiten

Die neue Taz Wide und Taz Extended haben je 10 Gewichte, also 20 Schnitte mit 812 Zeichen, einschließlich Vietnamesisch.

Die Taz Wide, klar und elegant, bietet bereits eine großzügig angelegte Breite und spart dafür Platz in der Vertikalen.

Die Extended mit ihrem kraftvollem Ausdruck ist eine der breitesten Schriften auf dem Markt. Sie bietet sich an für plakative Kunst, für Werbung, und setzt ein klares Statement im Editorial Design. In ihren leichteren Schnitten hat sie durchaus etwas Architektonisches: ein Nachfolger für die Eurostile?

Die ersten Tests für die Taz Extended „machten wir bereits 2008, danach blieb sie erst mal liegen,“, so Edgar Walthert, der bei LucasFonts in Berlin hauptsächtlich an der Taz arbeitet. In seinen Notizbüchern findet er Skizzen und Anmerkungen zu den diversen Ausbaustufen: „Die Taz Extended hatte zunächst eine Breite von 140% gegenüber der normalen Taz. Damit war Lucas noch nicht zufrieden und so machten wir sie weiter und weiter … Jetzt ist sie gute 150% breiter. Dadurch war der Unterschied zur TazText so groß, dass sich die Wide als Zwischenschritt geradezu aufdrängte.“

Notes by Edgar Walthert

Luc(as) de Groot and Edgar Walthert working on Taz

Taz features

Taz figures overview

Taz glyph set

Die Taz deckt mit Latin 1–10 alle westlichen Sprachen ab. Griechisch und Kyrillisch stehen bereits in einigen Schnitten zur Verfügung (daran arbeitet bei LucasFonts auch Aleksandra Samulenkowa zusammen mit Lucas).

Bilder aus einem langen Prozess: Korrekturen von Lucas de Groot an diversen Zwischenschritten. Unten zu sehen ist eine steil anteigende Interpolationskurve, die den jeweiligen Zuwachs von Schnitt zu Schnitt anzeigt – und dass dieser eben nicht stetig in den gleichen Schritten verläuft.

Taz interpolation curves

Lucas de Groot hat schon immer viel ausprobiert und versucht, mathematische gestalterische Regeln zu finden. Er hat eine Interpolationstheorie mit entsprechenden Formeln zum Berechnen des Ansteigens von Interpolationskurven entwickelt. Im Bild sehen wir die Interpolationskurven der Taz-Familie übereinander gelegt. Nach vielen Tests musste Lucas zum Beispiel für die Taz Condensed (siehe Bild) aber auch von seiner Formel abweichen: Am Ende zählt beim Gestalten nur das Auge.

Taz layers

Taz extremes

Lucas de Groot hat seine Taz gestaltet in einer sehr großen Palette von Schnitten, wobei das ausdrucksstarke Grundgerüst bestehen bleibt. Das gelingt – bei so extrem unterschiedlichen Strichstärken von Hairline bis extrem fett – nicht mit automatisierter Interpolation: „Man würde unschöne und unkontrollierbare Zwischenformen erhalten“, sagt Lucas. Also hat er in jeder Gewichtsreihe zunächst vier „Gestaltungspunkte“ gesetzt – den dünnsten, den fettesten und zwei dazwischen. Die übrigen (Zwischen-)~Gewichte konnten dann zwischen relativ naheliegenden Gewichten sauber interpoliert werden.

Thema Lesbarkeit

Die TazText Regular hält Lucas de Groot für seine am besten lesbare Schrift – und überhaupt für eine der am besten lesbaren Schriften im Mengensatz. Er untersucht die Details und Faktoren zu diesem zentralen Aspekt der Gestaltung mit Schrift seit Jahren und teilt sein Wissen in Vorträgen zum Thema „Lesbarkeit pro Quadratzentimeter“ – sehr zu empfehlen! Eine Übersicht aktueller „Speaking events“ ist zu finden auf der LucasFonts-Homepage.

Taz Mini

Ein besonderes gutes Beispiel für exzellente Lesbarkeit kleiner Schriftgrößen bietet eine Sonderausgabe der Tageszeitung im Miniaturformat: entstanden aus Geldnot, um Druckkosten zu sparen. Sie wurde gesetzt in der Taz Headline in Kombination mit Lucas de Groots AntiquaText als Fließtext-Schrift.

Anwendungsbeispiele: nicht nur Zeitung

Mittlerweile begegnet Lucas de Groot seiner Taz auf Schritt und Tritt: „Einer meiner liebsten Orte in Berlin ist das Bauhaus.“ Warum wohl?

Bauhaus entrance

Bauhaus advertising

Bauhaus box

Im Editorial Design hat die Taz längst die Landesgrenzen überwunden und beweist international ihre Qulitäten. So gestaltet die schottische „Big Pick“ ihre komplette Ausgabe durchgängig mit der Taz und nutzt sie auch als Logo-Schrift.

The Big Pick

Wie vielfältig die Taz auch in ihrer emotionalen Wirkung ist, zeigen Titel und eine beispielhafte Doppelseite des Magazins Squint.

Squint spread

Squint cover

Addicted to Taz

Auch die schweizerische Blick am Abend lässt es mit der Taz so richtig krachen: Von vorne bis hinten setzt sie alles in diversen Schnitten der Taz-Familie. Hier kommt sie in ihrer Vielfältigkeit, Platzeffizienz, uneingeschränkt kombinierbar zur Geltung – und zeigt ihre Eignung auch zum Boulevard. Dass die Blick am Abend politisch-inhaltlich-redaktionell von der Berliner Tageszeitung so weit wie nur irgendetwas entfernt ist, beweist, was für ein weites Feld an Ausdrucksmöglichkeiten die Taz-Familie bereitstellt …

Blick am Abend

Das bringt uns auf eine Idee: Wie wäre es, bisherige Anwendungen, sagen wir der Eurostile, durch Taz Wide und/oder Taz Extended zu ersetzen? Wir sind gespannt, wo sie zum Einsatz kommen!

Ideen, Beispiele und Fundstücke gerne per E-Mail an uns.

Our Clients

Fri, 20 Jul 2018 18:23:32 +0200

Since 1997, FontFabrik has developed a number of custom font solutions for companies around the world. This has included clients in the automotive, consumer electronics, food & beverage, journalism, software, and telecommunications industries – as well as cultural organisations and government ministries. Some of these solutions were developed from or ended up in the LucasFonts retail library.

Some of our current and past clients include:

ARD
Audi
Carlsberg
Commerzbank
Cornelsen
Der Freitag
Der Spiegel
Elsevier
Folha de S.Paulo
Heineken
Junge Welt
Jungle World
Lamborghini
Le Monde
Metro
Microsoft
Ministerie van Verkeer en Waterstraat
Ministerie van Landbouw, Natuurbeheer en Visserij
Miele
Nissan
Panasonic
TAZ, die Tageszeitung
Victoria and Albert Museum
Volkswagen
Volvo
Vorwerk

Agency Partners

We have also established long-term relationships with the following agencies:

Edenspiekermann
Kontrapunkt
MetaDesign
Studio Dumbar
Summa
TAXI Studio

The Thesis Project

Tue, 29 May 2018 18:28:29 +0200

The Thesis superfamily was first published in 1994 as part of the FontFont collection, and became part of the LucasFonts type library in 2000. The family was conceived as a versatile typographic system of ambitious scope. It grew out of a dissatisfaction with the limited range of good typefaces available for corporate identity projects. Thesis aims to fill that gap by providing the user with three compatible styles – TheSans, TheMix and TheSerif – in an optically harmonious range of eight weights, including real italics for each weight.

Thesis pioneered the concept of the all-purpose type system or superfamily which has since become such an important tool for the discerning typographer.

Three widths: TheSans, TheSans SemiCondensed and TheSans Condensed, all presented here in the ExtraBold weight.

The Thesis family has been expanded over the years. TheSans and TheMix are now available in three widths: Normal, Condensed and SemiCondensed. In addition, three ultra-narrow widths for TheSans are available on demand.

Judith Rakers presents the daily in the redesigned Tagesschau studio that went live in April 2017. © NDR/Thorsten Jander. The smaller line of text is set in TheSerif, with the rest of the text in TheSans.

TheSans offers several sub-families for specialized uses:

TheSans Mono A monospaced series for computer coding and similar uses.
TheSans Hair A carefully balanced series of seven hairline weights for ultralight magazine and advertising headlines.
TheSans Typewriter A set of four typewriter-like fonts.
TheSans Arabic The Arabic-speaking version of TheSans.

The Victoria & Albert Museum has been using a custom version of TheSans since 2002. Since their website’s 2016 redesign, all of its text has been set with TheSans, too.

Languages

Arabic
Central and Eastern European
Cyrillic (including Bulgarian Cyrilic)
Greek
Latin Extended (including Vietnamese)

The Volkswagen Foundations’s ScienceMovies website combined fonts from TheSans and TheSerif.

A campaign celebrating Maastricht University’s 40th Anniversary relied entirely on TheSans, and color!

The LucasFonts Team

Tue, 08 May 2018 12:00:34 +0200

Edit the contents in the separate team page form