Articles Feed | LucasFonts https://lucasfonts.com/ Feed of background articles and fonts in use examples by LucasFonts. /img/lf.png Articles Feed | LucasFonts https://lucasfonts.com/ en DIN compliant fonts <p><a href="https://www.lucasfonts.com/learn/standard-compliant-fonts#deutsche-version">↓ Deutsche Version weiter unten</a></p> <figure class="center"><img src="/media/din-compliant-fonts-LucasFonts.svg" alt="" /><figcaption></figcaption></figure> <p>From 1 November 2024, German institutions and organisations have to comply with the DIN 91379 standard. LucasFonts offers font packages that meet this standard. They are marked with an EU in the package name. Already available in our Shop: <a href="https://lucasfonts.com/fonts/package/thesans-eu5-din-91379">TheSans EU5</a> and <a href="https://lucasfonts.com/fonts/package/thesans-eu4s-din-91379">TheSans EU (e4s)</a>.</p> <figure class="right"> <img src="/media/DIN_pdf-preview-small.png" alt="Preview of DIN PDF" /> <figcaption> <a href="/media/TheSans-EU-Din-91379.pdf">Further information as PDF</a> </figcaption> </figure> <ol> <li>What is the DIN 91379 standard?</li> <li>Who has to fulfil it?</li> <li>How to fulfil it?</li> <li>Overview DIN-91379-compliant font packages</li> </ol> <h2 id="what-is-the-din-91379-standard">1. What is the DIN 91379 standard?</h2> <p>The explanatory name of the regulation is <em>Characters and defined character sequences in Unicode for the electronic processing of names and data exchange in Europe.</em> It is intended to ensure a certain character set of fonts. Put simply, personal names that are sent and processed between different institutions within the European Union should be able to be represented using this character set. This mainly affects people whose names were originally written in other writing systems (e.g. Chinese, Arabic, Tamil, etc.). This is because non-Latin scripts have to be transcribed for practical reasons.</p> <h2 id="who-has-to-fulfil-it">2. Who has to fulfil it?</h2> <p>The standard is primarily aimed at authorities and organisations that operate IT procedures that serve the inter-agency exchange of data or the exchange of data with citizens and businesses.</p> <h2 id="how-to-fulfil-it">3. How to fulfil it?</h2> <p>You need a font with the required character set. We already offer compliant packages: <a href="https://lucasfonts.com/fonts/package/thesans-eu5-din-91379">TheSans EU5</a> and <a href="https://lucasfonts.com/fonts/package/thesans-eu4s-din-91379">TheSans EU (e4s)</a>. Other packages available on request. The representation of the special characters is more carefully realised than with system fonts such as <em>Segoe UI, Aptos</em> etc.</p> <p><a href="https://en.wikipedia.org/wiki/DIN_91379">More information about the standard on Wikipedia.</a></p> <h2 id="span-idoverview-din-packagesoverviewspan-din-91379-compliant-font-packages">4. <span id="#overview-din-packages">Overview</span> DIN-91379-compliant font packages</h2> <p>The DIN 91379 includes characters that must be covered (normative) and optional characters to represent Greek and Cyrillic texts (extended). For good typography, small caps are included in some packages, also DIN-compliant, and there are differences in the standard character set.</p> <table class="alternating"> <tr class="nh"> <th>Package</th> <th>DIN 91379 Normative</th> <th>DIN 91379 Extended</th> <th>Small caps</th> <th>Default figures</th> </tr> <tr> <td>TheSans&nbsp;EU&nbsp;(e4s)</td> <td class="center checkmark y">✓</td> <td class="center checkmark y">✓</td> <td class="center checkmark y">✓</td> <td>Proportional</td> </tr> <tr> <td>TheSans&nbsp;EUe4</td> <td class="center checkmark y">✓</td> <td class="center checkmark y">✓</td> <td class="center checkmark n">✗</td> <td>Proportional</td> </tr> <tr> <td>TheSans&nbsp;EUe5</td> <td class="center checkmark y">✓</td> <td class="center checkmark y">✓</td> <td class="center checkmark n">✗</td> <td>Tabular</td> </tr> <tr> <td>TheSans&nbsp;EU5s</td> <td class="center checkmark y">✓</td> <td class="center checkmark n">✗</td> <td class="center checkmark y">✓</td> <td>Tabular</td> </tr> <tr> <td>TheSans&nbsp;EU5</td> <td class="center checkmark y">✓</td> <td class="center checkmark n">✗</td> <td class="center checkmark n">✗</td> <td>Tabular</td> </tr> </table> <p><br /></p> <figure class="center"><img src="/media/Din-konforme-Fonts.svg" alt="" /><figcaption></figcaption></figure> <h2 id="span-iddeutsche-version-langde-stylehyphens-autodin-konforme-fontsspan"><span id="deutsche-version" lang="de" style="hyphens: auto;">DIN-konforme Fonts</span></h2> <p>Ab dem 1. November 2024 müssen deutsche Institutionen und Organisationen die Norm DIN 91379 erfüllen. LucasFonts bietet Schriftpakete an, die diesem Standard entsprechen. Sie sind durch ein <em>EU</em> im Paketnamen gekennzeichnet. Bereits erhältlich sind <a href="https://lucasfonts.com/fonts/package/thesans-eu5-din-91379">TheSans EU5</a> und <a href="https://lucasfonts.com/fonts/package/thesans-eu4s-din-91379">TheSans EU (e4s)</a>.</p> <figure class="right"> <img src="/media/DIN_pdf-preview-small.png" alt="Preview of DIN PDF" /> <figcaption> <a href="/media/TheSans-EU-Din-91379.pdf">Weitere Informationen als PDF</a> </figcaption> </figure> <ol> <li>Was ist die Norm DIN 91379?</li> <li>Wer muss sie erfüllen?</li> <li>Wie erfüllt man sie?</li> <li>Übersicht DIN-konforme Schriftpakete</li> </ol> <h2 id="was-ist-die-norm-din-91379">1. Was ist die Norm DIN 91379?</h2> <p>Der erklärende Name der Regelung lautet <em>Zeichen und definierte Zeichensequenzen in Unicode für die elektronische Verarbeitung von Namen und den Datenaustausch in Europa.</em> Sie soll einen bestimmten Zeichensatz für Schriftarten sicherstellen. Vereinfacht gesagt sollen Personennamen, die innerhalb der Europäischen Union zwischen verschiedenen Institutionen hin- und hergeschickt und verarbeitet werden, mit diesem Zeichensatz dargestellt werden können. Dies betrifft vor allem Personen, deren Namen ursprünglich in anderen Schriftsystemen geschrieben wurden (z.B. chinesisch, arabisch, tamilisch etc.). Denn nichtlateinische Schriften müssen aus praktischen Gründen transkribiert werden.</p> <h2 id="wer-muss-sie-erfllen">2. Wer muss sie erfüllen?</h2> <p>Die Norm wendet sich vorrangig an Behörden und Organisationen, die IT-Verfahren betreiben, welche dem behördenübergreifenden Datenaustausch oder dem Datenaustausch mit Bürgerinnen und Bürgern und Wirtschaft dienen.</p> <h2 id="wie-erfllt-man-sie">3. Wie erfüllt man sie?</h2> <p>Man benötigt eine Schrift mit dem erforderlichen Zeichensatz. Wir bieten bereits konforme Pakete an: <a href="https://lucasfonts.com/fonts/package/thesans-eu5-din-91379">TheSans EU5</a> und <a href="https://lucasfonts.com/fonts/package/thesans-eu4s-din-91379">TheSans EU (e4s)</a>. Andere Pakete sind auf Nachfrage erhältlich. Die Darstellung der besonderen Zeichen ist sorgfältiger umgesetzt als bei Systemschriften wie beispielsweise <em>Segoe UI, Aptos</em> etc.</p> <p><a href="https://de.wikipedia.org/wiki/DIN_91379">Mehr Informationen zur Norm auf Wikipedia.</a></p> <h2 id="span-iduebersicht-din-paketebersichtspan-din-91379-konforme-schriftpakete">4. <span id="#uebersicht-din-pakete">Übersicht</span> DIN-91379-konforme Schriftpakete</h2> <p>Die DIN 91379 umfasst Zeichen die abgedeckt werden müssen (normativ) und optionale Zeichen um griechische und kyrillische Texte darzustellen (erweitert). Für gute Typografie sind in einigen Paketen Kapitälchen enthalten, auch DIN-konform, und es gibt Unterschiede beim Standardziffernsatz.</p> <table class="alternating"> <tr class="nh"> <th>Paket</th> <th>DIN 91379 normativ</th> <th>DIN 91379 erweitert</th> <th>Kapitälchen</th> <th>Standardziffern</th> </tr> <tr> <td>TheSans&nbsp;EU&nbsp;(e4s)</td> <td class="center checkmark y">✓</td> <td class="center checkmark y">✓</td> <td class="center checkmark y">✓</td> <td>Proportional</td> </tr> <tr> <td>TheSans&nbsp;EUe4</td> <td class="center checkmark y">✓</td> <td class="center checkmark y">✓</td> <td class="center checkmark n">✗</td> <td>Proportional</td> </tr> <tr> <td>TheSans&nbsp;EUe5</td> <td class="center checkmark y">✓</td> <td class="center checkmark y">✓</td> <td class="center checkmark n">✗</td> <td>Tabellenziffern</td> </tr> <tr> <td>TheSans&nbsp;EU5s</td> <td class="center checkmark y">✓</td> <td class="center checkmark n">✗</td> <td class="center checkmark y">✓</td> <td>Tabellenziffern</td> </tr> <tr> <td>TheSans&nbsp;EU5</td> <td class="center checkmark y">✓</td> <td class="center checkmark n">✗</td> <td class="center checkmark n">✗</td> <td>Tabellenziffern</td> </tr> </table> Mon, 09 Dec 2024 00:00:00 +0100 https://lucasfonts.com/learn/standard-compliant-fonts https://lucasfonts.com/learn/standard-compliant-fonts New custom font for Miele <figure class="wide"><img src="/media/01_MieleElements_intro.svg" alt="" /><figcaption></figcaption></figure> <figure class="right"><img src="/media/Red_Dot_Award" alt="" /><figcaption></figcaption></figure> <p>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 <em>Miele,</em> a minimalist design language with complex font technology requirements is in demand. This is exactly what LucasFonts has developed together with the <em>Miele Design Center</em> 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 <em>Miele Elements.</em></p> <h2 id="helvetica--too-generic">Helvetica – too generic?</h2> <p>When Luc(as) de Groot began working with the Miele design team in 2003 to create <em>bitmap fonts</em> 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 <em>Helvetica</em> 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.</p> <figure class="center"><img src="/media/02_MieleElements_intro.svg" alt="" /><figcaption></figcaption></figure> <p><em>Always better</em> - 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: <em>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.</em></p> <figure class="center"><img src="/media/03_MieleElements_intro.svg" alt="" /><figcaption></figcaption></figure> <figure class="center"><img src="/media/05_MieleElements_intro.png" alt="" /><figcaption></figcaption></figure> <h2 id="for-all-communication">For all communication</h2> <p>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 <em>Miele Evolution</em>) 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 <em>Miele Design System.</em></p> <figure class="center"><img src="/media/04_MieleElements_intro.png" alt="" /><figcaption></figcaption></figure> <p>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 <a href="/learn/fonts-for-the-office">Office applications</a>, <em>variable fonts</em> for dynamic environments and a <em>Condensed package</em> for special purposes.</p> <h2 id="building-bridges">Building bridges</h2> <p>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.</p> <figure class="center"><img src="/media/06_MieleElements_intro.svg" alt="" /><figcaption></figcaption></figure> <p>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.</p> <h2 id="clearing-up-inconsistencies">Clearing up inconsistencies</h2> <p>Traditionally, large quality companies such as Miele use <em>neo-grotesque fonts.</em> The new typeface should stay true to the grotesque genre, because high-quality brands need a minimalist design. <em>The more eye-catching the outside, the more short-lived the effect. Coolness doesn’t work that way,</em> says Luc(as) de Groot, who has decades of experience with clients from a large variety of industries.</p> <p>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 <em>TFT displays,</em> the opportunity arose to improve many details through the expertise of Luc(as) de Groot.</p> <h2 id="improved-readability">Improved readability</h2> <p>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 <em>tight-but-not-touching effect</em> 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.</p> <figure class="center"><img src="/media/07_MieleElements_spacing.svg" alt="" /><figcaption>Improved Spacing: contemporary and elegant spacing at the top, too tight 70s fashion at the bottom.</figcaption></figure> <p>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 <em>Futura</em> capitals, on the other hand, exude grandeur and are based on the classic proportions of <em>Capitalis Monumentalis.</em> However, the widely varying widths of the letters create a sense of unrest in the word image.</p> <p>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.</p> <figure class="center"><img src="/media/08_MieleElements_capitals.svg" alt="" /><figcaption>Design approaches of capital letters: Helvetica capital letters with the same width and the classically designed Trajan – Miele Elements is deliberately somewhere in between.</figcaption></figure> <h2 id="readability-per-square-centimetre">Readability per square centimetre</h2> <p>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.</p> <p>One of the golden rules of reading typography is: <em>The eye should glide smoothly across the text</em> without being distracted by unimportant details. It must be possible to grasp the content quickly and effectively.</p> <figure class="center"><img src="/media/09_MieleElements_exclusive.svg" alt="" /><figcaption>Better proportions, better reading flow.</figcaption></figure> <p>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 <em>readability per square centimetre.</em> 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: <em>Helvetica Light,</em> which had previously been used in the Miele user manuals, performed particularly poorly in this regard.</p> <figure class="wide"><img src="/media/10_MieleElements_readability.png" alt="" /><figcaption>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.</figcaption></figure> <h2 id="minimal-corner-rounding">Minimal corner rounding</h2> <p>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.</p> <figure class="center"><img src="/media/11_MieleElements_logo.svg" alt="" /><figcaption>Use of details from the logo.</figcaption></figure> <figure class="center"><img src="/media/12_MieleElements_roundness.png" alt="" /><figcaption>Inspired by Miele product design and lead typefaces: Rounded corners are a subtle but exquisite detail of the font.</figcaption></figure> <p>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 <em>strak process</em> – an important step in product development, especially in automotive and product design.</p> <p>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.</p> <h2 id="modelled-on-lead-type">Modelled on lead type</h2> <p>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.</p> <p>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.</p> <figure class="center"><img src="/media/13_MieleElements_concave-round.svg" alt="" /><figcaption>Tests on the concaveness of the stems and the rounding of the corners.</figcaption></figure> <h2 id="a-very-fine-grid">A very fine grid</h2> <p>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: <em>TrueType fonts</em> 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.</p> <h2 id="many-styles-and-one-variable-font">Many styles and one variable font</h2> <p>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.</p> <p>The middle range of weights, i.e. everything around the <em>Regular,</em> is a perfect fit for long and short copy text.</p> <p>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.</p> <figure class="center"><img src="/media/14_MieleElements_variable.svg" alt="" /><figcaption></figcaption></figure> <figure class="center"><img src="/media/15_MieleElements_specimen.svg" alt="" /><figcaption></figcaption></figure> <figure class="center"><img src="/media/16_MieleElements_variable.png" alt="" /><figcaption>Fine-tuned for weight: The variable fonts have 3 masters to enable good interpolation results.</figcaption></figure> <figure class="center"><img src="/media/17_MieleElements_variable.svg" alt="" /><figcaption>The use of variable fonts is perfect for data-efficient use and for animations.</figcaption></figure> <h2 id="figures">Figures</h2> <p>For differentiated typography, the family is equipped with different figure styles, a must for a modern font. The default are <em>proportional lining figures,</em> 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, <em>tabular figures</em> 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.</p> <p>There are also <em>oldstyle figures,</em> 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. <em>Superscript, subscript</em> and <em>fractional figures</em> are also a mandatory part of Miele’s digital typecase.</p> <figure class="center"><img src="/media/001_MieleElements_figures.svg" alt="" /><figcaption></figcaption></figure> <h2 id="clearly-slanted">Clearly slanted</h2> <p>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 <em>oblique.</em> If the slant angle is too small, the visual difference to the upright is insufficient.</p> <p>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.</p> <figure class="center"><img src="/media/18_MieleElements_cursive.png" alt="" /><figcaption>Clearly distinguishable: The italic uses a different type of construction than the upright. This is particularly evident with a, e, f and g.</figcaption></figure> <p>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.</p> <p>The tops of the small caps are at the same height as the oldstyle figures.</p> <figure class="center"><img src="/media/19_MieleElements_small-caps.svg" alt="" /><figcaption>Product names that stand out: Small caps with jumping numerals enliven the word image and promote legibility.</figcaption></figure> <h2 id="multilingual">Multilingual</h2> <p>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.</p> <p>LucasFonts has also integrated <em>global fonts</em> into Miele Elements, to provide support for languages such as <em>CJK</em> and Arabic.</p> <figure class="center"><img src="/media/20_MieleElements_specimen.svg" alt="" /><figcaption>Miele Elements covers a large range of languages.</figcaption></figure> <figure class="center"><img src="/media/21_MieleElements_language.svg" alt="" /><figcaption>Several glyphs automatically change their form, depending on the language and context, to meet the expectations of the respective readership.</figcaption></figure> <h2 id="font-formats">Font formats</h2> <p>Miele Elements is used in many different environments. In addition to the interfaces and apps, especially <em>Windows Office</em> environments and browser-based web applications, it was therefore decided to produce the fonts exclusively as TrueType with <em>manual hinting.</em> 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.</p> <p>The <em>PostScript-based OpenType fonts</em> commonly used in the design sector would not have been sufficient for this. Their display quality in Windows environments and in the familiar <em>Adobe</em> 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.</p> <p>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.</p> <h2 id="more-and-more-icons">More and more icons</h2> <p>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.</p> <p>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.</p> <figure class="center"><img src="/media/22_MieleElements_icons.svg" alt="" /><figcaption>The Miele icon set is huge.</figcaption></figure> <figure class="center"><img src="/media/23_MieleElements_icons-weights.svg" alt="" /><figcaption>The icons can be interpolated to cover different weights – an additional center line version shows more details and is suitable for a larger display.</figcaption></figure> <h2 id="a-dedicated-icon-management-tool">A dedicated icon management tool</h2> <p>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.</p> <p>Each symbol has its own Unicode codepoint from the private use area (known as <em>PUA</em> 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.</p> <figure class="center"><img src="/media/24_MieleElements_icons-pixel.svg" alt="" /><figcaption>Many icons have pixel variants.</figcaption></figure> <figure class="center"><img src="/media/25_MieleElements_intro_icons-bear.svg" alt="" /><figcaption>These in turn are available for different pixel sizes.</figcaption></figure> <figure class="center"><img src="/media/26_MieleElements_intro_icons-details.png" alt="" /><figcaption>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.</figcaption></figure> <h2 id="welcome-miele-elements">Welcome, Miele Elements</h2> <p>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 <a href="https://www.miele.de/">online presence,</a> in outdoor advertising and, of course, at trade fairs. Its design has already been nominated for competitions and won the <a href="https://www.red-dot.org/project/miele-elements-66425">Red Dot Award</a>. 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.</p> <figure class="center"><img src="/media/27_MieleElements_card.png" alt="" /><figcaption></figcaption></figure> <figure class="center"><img src="/media/28_MieleElements_intro_inUse.png" alt="" /><figcaption></figcaption></figure> <figure class="center"><img src="/media/30_MieleElements_intro_inUse.png" alt="" /><figcaption></figcaption></figure> <footer class='article-footer'><p>This article is a translation of “<a href="https://page-online.de/typografie/neuer-customfont-fuer-miele/">Neuer Customfont für Miele</a>” first published in German by PAGE magazine.</p> </footer> Thu, 01 Aug 2024 18:00:00 +0200 https://lucasfonts.com/custom/miele-elements https://lucasfonts.com/custom/miele-elements ARD Logos <p>When Munich-based design agency Luxlotusliner was tasked with redesigning ARD’s logos, Luc(as) de Groot was asked for advice and fine-tuning.</p> <p>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 <a href="/fonts/the-sans/info">TheSans</a> for all of ARD’s logos based on the newly edited A, R and D.</p> <p>Luc(as) also made subtle optical adjustments to the circle and the number 1 in the logo.</p> <p><em>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.</em></p> <figure class="center"><img src="/media/ARD_logo-comparison" alt="" /><figcaption>The old logo (left) and the new version from 2019 (right)</figcaption></figure> <p>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.</p> <p>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.</p> <figure class="wide"><img src="/media/ARD-3-logos-comparison" alt="" /><figcaption> </figcaption></figure> <p>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.</p> <p>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.</p> <p>Many thanks to ARD and Luxlotusliner for the rewarding collaboration!</p> <footer class='article-footer'><p><a href="/gallery/websites-apps/ard">The Sans in use for several ARD websites</a></p> <p><a href="/gallery/identity-packaging/tagesschau">Redesign of the Tagesschau daily news show with TheSans and TheSerif</a></p> </footer> Fri, 10 Dec 2021 17:06:00 +0100 https://lucasfonts.com/custom/ard-logos https://lucasfonts.com/custom/ard-logos Icons for Miele <figure class="wide"><img src="/media/Miele-Picture-FLS5-screenshot.png" alt="" /><figcaption></figcaption></figure> <p>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 <em>Immer Besser</em> brand promise (translates to “forever better” or “better and better”). Walter Isaacson quotes Steve Jobs as saying that Miele appliances are:</p> <blockquote> <p>… 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.</p> </blockquote> <p>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.</p> <p>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.</p> <figure class="right"><img src="/media/Miele-pixel-teddy-bear.gif" alt="" /><figcaption>Miele pixel teddy bear</figcaption></figure> <p>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 <em>Immer Besser</em>, 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.</p> <figure class="center"><img src="/media/Miele_Lamb_Grid_740px.png" alt="" /><figcaption></figcaption></figure> <p>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.</p> <figure class="center"><img src="/media/MielePix25_coffee-cups-filling_animation.gif" alt="" /><figcaption>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. </figcaption></figure> <p>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.</p> <figure class="wide"><img src="/media/MieleGlobeConstructionScreenshot.png" alt="" /><figcaption>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.</figcaption></figure> <p>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.</p> <p>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.</p> <figure class="center"><img src="/media/MieleWolleConstructionScreenshot.png" alt="" /><figcaption></figcaption></figure> <p>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.</p> <figure class="center"><img src="/media/Miele-Symbols_Number-of-Glyphs.svg" alt="" /><figcaption></figcaption></figure> <p>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: <em>Immer Besser</em>.</p> Fri, 15 Oct 2021 13:57:00 +0200 https://lucasfonts.com/custom/icons-for-miele https://lucasfonts.com/custom/icons-for-miele Trial Fonts <figure class="center"><img src="/media/trial-fonts.svg" alt="" /><figcaption></figcaption></figure> <p>Register a free user account and subscribe to our newsletter to access the trial fonts. You will find <a href="/store/trial_fonts">download links for all available trial font packages</a> in your account.</p> <p>When a family has trial fonts, there is also a “Get Trial Fonts” link <a href="https://www.lucasfonts.com/fonts/spiegel-sans">on the family page</a>.</p> <h2 id="the-lucasfonts-trial-font-license">The LucasFonts trial font license</h2> <ul> <li>You receive OTF, TTF, and WOFF2 file (if each format is available).</li> <li>Before downloading the fonts, you must subscribe to our newsletter.</li> <li>A free user account is required in order to download trial fonts.</li> <li>Fonts are provided for the purpose of deciding whether you want to purchase a commercial license.</li> <li>The fonts can not be used in published content.</li> <li>Students can use the trial fonts for non-commercial projects that are part of their studies.</li> </ul> <p>The legally binding <a href="/store/trial_font_licence">full license text</a> can be viewed in your account and is also included in the downloads.</p> <h2 id="what-is-the-difference-between-trial-fonts-and-the-full-fonts">What is the difference between trial fonts and the full fonts?</h2> <h3 id="styles">Styles</h3> <p>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.</p> <h3 id="character-set">Character set</h3> <p>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 <a href="/fonts/package_details/spiegel-sans-complete">package details page</a> and may differ among the various packages that we offer.</p> <h3 id="opentype-layout-features">OpenType layout features</h3> <p>The trial fonts only contain kerning, but no other layout features. All available layout features are shown on each package’s respective <a href="/fonts/package_details/spiegel-sans-complete">package details page</a>.</p> <footer class='article-footer'><p>If you have any questions, or would like to see more trial fonts, please <a href="/contact">contact us</a>.</p> </footer> Wed, 27 Jan 2021 14:15:00 +0100 https://lucasfonts.com/learn/trial-fonts https://lucasfonts.com/learn/trial-fonts Speaking Events <p>Upcoming and past presentations by Luc(as) and other team members. Some of them have been recorded and can be watched right here.</p> <p><a href="https://lucasfonts.com/learn/speaking_events">View speaking events archive</a></p> Fri, 27 Mar 2020 18:58:00 +0100 https://lucasfonts.com/learn/speaking_events https://lucasfonts.com/learn/speaking_events Karwath+Todisko pixel fonts <figure class="center"><img src="/media/PX01StandardUCanimation-740px.gif" alt="" /><figcaption></figcaption></figure> <p>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.</p> <figure class="wide"><img src="/media/KarwarthTodisko_039_1800px.jpg" alt="" /><figcaption>© Karwath+Todisko, VG Bild-Kunst, Bonn 2018, Photo: Moritz Bernoully</figcaption></figure> <p>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.</p> <figure> <video poster="/img/our-bestsellers.webp" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0"> <source src="https://lucasfonts-com-static.s3.eu-central-1.amazonaws.com/video/karwath-todisko-hlr-lichtenberg.webm" type="video/webm; codecs=&quot;vp9&quot;" /> <source src="https://lucasfonts-com-static.s3.eu-central-1.amazonaws.com/video/karwath-todisko-hlr-lichtenberg.mp4" type="video/mp4; codecs=&quot;avc1.42E01E&quot;" /> <img src="/img/our-bestsellers.webp" /> </video> <figcaption>© Karwath+Todisko, Video: Moritz Bernoully</figcaption> </figure> <p>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.</p> <figure class="wide"><img src="/media/HLR_LICHTENBERG1_photo-M_Bernoully-02" alt="" /><figcaption>© Karwath+Todisko, VG Bild-Kunst, Bonn 2018, Photo: Moritz Bernoully</figcaption></figure> <p>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.</p> <figure class="wide"><img src="/media/HLR_LICHTENBERG1_Pixel-Font-Variants_simplified.svg" alt="" /><figcaption>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.</figcaption></figure> <figure class="wide"><img src="/media/HLR_LICHTENBERG1_Pixel-Font.svg" alt="" /><figcaption>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.</figcaption></figure> <figure class="center"><img src="/media/HLR_LICHTENBERG1_photo-C-Voelker.jpg" alt="" /><figcaption>© Karwath+Todisko, VG Bild-Kunst, Bonn 2018, Photo: Claus Völker.</figcaption></figure> <p>The finished installation is named HLR LICHTENBERG1. The abbreviation “HLR” stands for the German word <em>Hochleistungsrechner</em>, meaning a supercomputer. The piece went up in January 2018 at the Technische Universität Darmstadt, Campus Lichtwiese.</p> <footer class='article-footer'><p>For more information, you can read a German-language write-up about the installation on the <a href="https://www.tu-darmstadt.de/universitaet/aktuelles_meldungen/archiv_2/2018/2018quartal1/neuesausdertueinzelansichtbreitespalte_196544.de.jsp">Technical University’s website</a>. The project is also presented on the <a href="https://www.todisko.de/hlr-lichtenberg1-in-situ/">Karwath+Todisko website</a> as well.</p> </footer> Fri, 28 Feb 2020 16:17:00 +0100 https://lucasfonts.com/custom/art-bitmap https://lucasfonts.com/custom/art-bitmap Mastering the Pen Tool in Adobe Illustrator <h2 id="prepare">Prepare</h2> <p>Learn to work with two hands, one to move the mouse, one to press the Spacebar, Shift, Tab, Alt/Option and Command/Control keys.</p> <p>Activate “Snap to point” from the “View” menu.</p> <p>With Cmd/Ctrl-U, pink intelligent guidelines appear that can help with aligning the next point. Often this is annoying. Memorize the shortcut.</p> <p>Use Cmd/Ctrl-Y to switch between Preview and Outline mode. Basic knowledge.</p> <p>Go to Preferences &gt; Selection &amp; 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.</p> <p>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.</p> <p>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.</p> <p>Put photos or scans in a separate layer and lock it.</p> <p>All paths are drawn with on-curve Anchor points. Curved segments have additional off-curve Handles that control the curvature.</p> <p>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.</p> <p>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.</p> <h2 id="start-straight-lines-first">Start, Straight lines first</h2> <p>At first, the Pen Tool has a small asterisk (*) next to it, to symbolize the birth of a new path.</p> <p>Click on the canvas to set a point, click once more to create a straight line.</p> <p>Press and hold the Shift key to constrain the placement of the next point to 45 degrees angles in relation to the previous point.</p> <p>You are now creating an open path with two endpoints.</p> <p>In the active path, click on a previously set point to remove that point from the path. The Pen cursor shows a minus (-).</p> <p>Click in between two points on the path to insert an extra point. The Pen cursor shows a plus (+).</p> <h2 id="curved-segments">Curved segments</h2> <p>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.</p> <p>As usual, first choose the Direct Selection Tool (A), and then the Pen Tool (P).</p> <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.</p> <p>Click-Drag again to finish the first curved segment and start the next.</p> <p>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.</p> <p>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.</p> <h2 id="the-power-of-the-optionalt-key">The power of the Option/Alt key</h2> <p>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.</p> <p>Press the Alt/Option key to quickly access the Anchor Point Tool (Shift+C). It looks like an upside-down V.</p> <p>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</p> <p>Alt/Option-click-Drag on a corner point in a selected path to drag out handles of equal length.</p> <p>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.</p> <p>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).</p> <p>(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.)</p> <h2 id="alternating-straight-and-curved-segments">Alternating straight and curved segments</h2> <p>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.</p> <p>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.</p> <h2 id="closing-paths">Closing paths</h2> <p>In font production, paths are closed, in Illustrator they don’t have to be.</p> <p>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.</p> <p>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.</p> <p>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.</p> <p>To open a closed path, click on it with the Scissors Tool (C)</p> <h2 id="be-in-commandcontrol">Be in Command/Control</h2> <p>Press Cmd/Ctrl to temporarily switch to the Direct Selection Tool, to move any point on the path you are drawing.</p> <p>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.</p> <p>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)</p> <p>To start a new path, press Cmd/Ctrl and click in an empty area to deactivate the previous path and then continue drawing.</p> <p>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 &gt; General &gt; Keyboard Increment. I set it to a very small value. With the Shift key pressed, this value is multiplied by 10.</p> <p>Press command near a corner might show controls to add rounded corners.</p> <h2 id="continuing-the-path">Continuing the path</h2> <p>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.</p> <p>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.</p> <footer class='article-footer'><p>Pen Tool description v24, copyright 2020 Luc(as) de Groot</p> </footer> Luc(as) de Groot Fri, 24 Jan 2020 18:17:00 +0100 https://lucasfonts.com/learn/mastering-pen-tool https://lucasfonts.com/learn/mastering-pen-tool Koning Display: technologically-advanced curves <p>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: <span class="nh"><em>Koning Display.</em></span></p> <p>We are grateful that our efforts have been recognized with numerous awards: <a href="https://archive.tdc.org/competitionwriteup/tdc-typeface-design-winners-2018/">TDC Certificate of Typographic Excellence</a> and <a href="https://www.commarts.com/project/25748/koning-family">Award of Excellence from Communication Arts</a> both in 2018, and Gold from <a href="https://www.german-design-award.com/en/the-winners/gallery/detail/27126-koning.html">German Design Awards</a> in 2020.</p> <figure class="wide"><img src="/media/koning-styles.svg" alt="" /><figcaption>The wide range of weights and styles shipping as part of the Koning Display family can be seen in this sample above.</figcaption></figure> <p>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.</p> <figure class="center"><img src="/media/koning-v-interpolation.gif" alt="" /><figcaption>This animation shows how Luc(as) can control the contrast in the interpolated weight without changing the design of the masters.</figcaption></figure> <h2 id="the-look-of-a-koning">The look of a Koning</h2> <p>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 <a href="/fonts/floris">Floris</a> and <a href="/fonts/spiegel-sans">Spiegel Sans</a> 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 <em>is for</em>, but Koning is not like that. We are eager for our customers to tell us themselves.</p> <figure class="center"><img src="/media/koning-shop-signage.jpg" alt="" /><figcaption></figcaption></figure> <p>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 <em>display</em> 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.</p> <p>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.</p> <h2 id="spacing-and-opentype-features">Spacing and OpenType features</h2> <p>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 <em>apostrophe</em> and the <em>A</em> is reduced when these follow an <em>L;</em> the kerning between a <em>period</em> and an <em>ordinal</em> is reduced when they are preceded by the numeral <em>7.</em></p> <figure class="center"><img src="/media/kerning-triplets.svg" alt="" /><figcaption></figcaption></figure> <h3 id="language-solutions">Language solutions</h3> <p>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 <em>: ; ! ? « »</em> 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 <em>: ; !</em> and <em>?</em> characters. For Moldavian and Romanian, the cedilla-shaped diacritic is replaced by a form that looks like a comma. In Dutch, a <em>j</em> with an acute appears after the <em>i</em> with an acute.</p> <figure class="center"><img src="/media/language-solutions.svg" alt="" /><figcaption></figcaption></figure> <p>Koning Display’s fonts include 31 different OpenType features, including ligatures, stylistic sets, and case-sensitive alternates. Visit the <a href="https://www.lucasfonts.com/fonts/package_details/koning-display-c4">Koning Display family’s package details page</a> for a complete list of OpenType features, including before and after samples.</p> <h3 id="opentype-features">OpenType features</h3> <p>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.</p> <figure class="center"><img src="/media/koning-bank-logo.svg" alt="" /><figcaption>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.</figcaption></figure> <figure class="center"><img src="/media/Koning-Hipster-Punctuation-update.gif" alt="" /><figcaption>Stylistic Set 14 in each of the Koning Display fonts substitutes much lighter punctuation into selected text.</figcaption></figure> <h2 id="similar-forms-from-the-past">Similar forms from the past</h2> <p>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).</p> <figure class="center"><img src="/media/brendler-fette-venetia.svg" alt="" /><figcaption>Capital A and X from Fette Venetia, the Vienna-based Brendler foundry’s version of Florentine Bold, by the American Type Founders Co., 1898.</figcaption></figure> <p>The most “Florentine” letters in Koning are the <em>A, E, F, G, K, L, N, Q, T,</em> and <em>Z.</em> 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.</p> <figure class="center"><img src="/media/brendler-venetia-caroline.svg" alt="" /><figcaption>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.</figcaption></figure> <p>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.</p> <figure class="wide"><img src="/media/koning-for-cosmetics-packaging.jpg" alt="" /><figcaption></figcaption></figure> <h3 id="control-your-spacing">Control your spacing</h3> <p>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.</p> <figure class="center"><img src="/media/truffle.gif" alt="" /><figcaption></figcaption></figure> <p>Applications often turn the <em>standard ligatures</em> and <em>contextual alternates</em> OpenType features on by default, while they have the <em>discretionary ligatures</em> feature off.</p> <figure class="center"><img src="/media/ligature.svg" alt="" /><figcaption></figcaption></figure> <figure class="center"><img src="/media/all-Ligatures.svg" alt="" /><figcaption>Optionally activate ligatures. In some situations, it is better not to use them. Give it a thought.</figcaption></figure> <figure class="center"><img src="/media/ligature-discretional.svg" alt="" /><figcaption></figcaption></figure> <figure class="center"><img src="/media/all-Discretionary-Ligatures.svg" alt="" /><figcaption>Optional discretionary ligatures. Use these more prominent things with restraint.</figcaption></figure> <p>Koning Display’s ligatures are space-saving, but if you find ligatures too distracting, switch the <em>ligatures</em> feature in your app off.</p> <figure class="center"><img src="/media/koning-display-ligatures-on-off.svg" alt="" /><figcaption>In the first line above, the standard ligatures and discretionary ligatures features are both applied. The bottom line has no ligatures.</figcaption></figure> <p>Koning Display’s fonts have substitutions in the <em>contextual alternates</em> 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.</p> <figure class="center"><img src="/media/fcalt.svg" alt="" /><figcaption></figcaption></figure> <h2 id="signage-arrows">Signage arrows</h2> <figure class="center"><img src="/media/Signage-Arrows.svg" alt="" /><figcaption></figcaption></figure> <figure class="center"><img src="/media/Arrows-in-signage.svg" alt="" /><figcaption></figcaption></figure> <h2 id="text-arrows">Text arrows</h2> <p>Activate by choosing oldstyle figures or stylistic set 4.</p> <figure class="center"><img src="/media/Text-Arrows.svg" alt="" /><figcaption></figcaption></figure> <figure class="center"><img src="/media/Koning-Display-Text-Arrows.svg" alt="" /><figcaption></figcaption></figure> <h2 id="three-shapes-for-dots">Three shapes for dots</h2> <p>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 <em>i</em> and <em>j</em>. With diacritics, we mean accents like <em>ċ</em> and <em>ö</em>. Punctuation includes the colon, comma, period, etc.</p> <p>Stylistic set 14 replaces a font’s diacritics and punctuation marks with hairline versions of those forms. We call this Koning’s “hipster” style!</p> <figure class="center"><img src="/media/hipsterpunctuation.gif" alt="" /><figcaption></figcaption></figure> <p>Stylistic set 15 replaces just the dots on <em>i</em> and <em>j</em> (and ligatures with those in them) with hairline forms.</p> <figure class="center"><img src="/media/fiji.gif" alt="" /><figcaption></figcaption></figure> <p>Stylistic set 16 replaces a font’s diacritics, <em>i</em> and <em>j</em> dots and punctuation marks with diamond shapes. We call these “royal dots.” Koning is a <em>royal</em> typeface, after all.</p> <figure class="center"><img src="/media/koenig.gif" alt="" /><figcaption></figcaption></figure> <h2 id="standard-fractions">Standard fractions</h2> <figure class="center"><img src="/media/Koning-Display-Standard-Larger-Fractions.svg" alt="" /><figcaption></figcaption></figure> <h2 id="cap-height-fractions">Cap-height fractions</h2> <p>Access shorter fractions via the case feature. In InDesign, do this by selecting a text and pressing the All Caps button.</p> <figure class="center"><img src="/media/Koning-Display-Cap-Sized-Fractions.svg" alt="" /><figcaption></figcaption></figure> <h2 id="koning-display-as-variable-fonts">Koning Display as variable fonts</h2> <p>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.</p> <p>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.</p> <h2 id="ornaments-and-catchwords">Ornaments and catchwords</h2> <p>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.</p> <figure class="center"><img src="/media/koning-display-ultralight-ornaments.svg" alt="" /><figcaption>Ornaments from the Koning Display UltraLight weight designed by Martina Flor during an internship in 2011–12.</figcaption></figure> <figure class="center"><img src="/media/Koning-Display-Catchwords.svg" alt="" /><figcaption>Martina also developed a concept for catchwords, seen here in Koning Display Regular.</figcaption></figure> <h2 id="more-koning-to-come">More Koning to come!</h2> <p>Koning Display, as it is now, is the family’s <em>first</em> release. We are working on expansions, support for additional languages and our customers’ needs.</p> <p>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 <a href="/fonts/package_details/koning-display-c4">package overview page</a>. On the <a href="/fonts/koning/normal">styles page</a>, you can input your own text and see for yourself how it looks in each of the 20 styles.</p> <figure class="wide"><img src="/media/kings-of-the-netherlands.svg" alt="" /><figcaption></figcaption></figure> <footer class='article-footer'><p>Luc(as) de Groot is the lead designer of Koning, and he was assisted over the years by (in order of appearance) Jan Fromm, Martina Flor, Philipp Neumeyer, Daria Petrova, Thom Janssen, and Ethan Cohen. Additional font engineering by Jens Kutílek.</p> </footer> Mon, 20 Jan 2020 16:35:00 +0100 https://lucasfonts.com/learn/about-koning https://lucasfonts.com/learn/about-koning Webfonts <h2 id="the-lucasfonts-webfont-license">The LucasFonts webfont license</h2> <ul> <li>You receive WOFF2 font files to host on your own server.</li> <li>The license is perpetual with a one-time payment.</li> <li>The license cost depends on the number of monthly page views of the website you use the fonts on.</li> <li>Our <a href="/faq#family-rebate">family rebate</a> applies when you license more styles from the same typeface (super-)family.</li> </ul> <p>Please refer to the <a href="/fonts/eula/eula-web">full text of the EULA</a> for legally binding information.</p> <h2 id="how-to-use-webfonts">How to use webfonts</h2> <h3 id="static-fonts">Static fonts</h3> <p>Upload the WOFF2 files to your web server. Set up the <code>@font-face</code> rules in your CSS to point to the font files as shown below.</p> <h4 id="using-a-single-font">Using a single font</h4> <p>If you use just one style, you can use a short version of the <code>@font-face</code> 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.</p> <pre class="code-css">@font-face { <span class="property">font-family</span>: <span class="string">'MyWebFont'</span>; <span class="property">src</span>: url(<span class="string">'/webfonts/TheSansMonoWeb-SCdW4.woff2'</span>) format(<span class="string">'woff2'</span>); } </pre> <p>You can then request the font in your usual CSS rules:</p> <pre class="code-css"><span class="element">h2</span> { <span class="property">font-family</span>: <span class="string">'MyWebFont'</span>, <span class="value">monospace</span>; <span class="property">font-weight</span>: <span class="value">normal</span>; } </pre> <p>If you apply the webfont to any element for which the browser uses a bold or italic font style by default, such as <code>&lt;h1&gt;</code>-<code>&lt;h6&gt;</code>, <code>&lt;strong&gt;</code>, or <code>&lt;em&gt;</code>, make sure to reset the weight or style to normal. Otherwise the browser may render the font as fake bold or italic.</p> <h4 id="style-linking-multiple-fonts">Style-linking multiple fonts</h4> <p>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 <code>font-style</code> (<code>normal</code> or <code>italic</code>) and <code>font-weight</code> (<code>100</code> to <code>900</code>).</p> <p>This example adds an italic font to the normal font style:</p> <pre class="code-css">@font-face { <span class="property">font-family</span>: <span class="string">'MyWebFont'</span>; <span class="property">font-style</span>: <span class="value">normal</span>; <span class="property">font-weight</span>: <span class="value">400</span>; <span class="property">src</span>: url(<span class="string">'/webfonts/TheSansMonoWeb-SCdW4.woff2'</span>) format(<span class="string">'woff2'</span>); } @font-face { <span class="property">font-family</span>: <span class="string">'MyWebFont'</span>; <span class="property">font-style</span>: <span class="value">italic</span>; <span class="property">font-weight</span>: <span class="value">400</span>; <span class="property">src</span>: url(<span class="string">'/webfonts/TheSansMonoWeb-SCdW4i.woff2'</span>) format(<span class="string">'woff2'</span>); } </pre> <h3 id="variable-fonts">Variable fonts</h3> <p>Variable fonts contain multiple styles of a typeface family in one file.</p> <pre class="code-css">@font-face { <span class="property">font-family</span>: <span class="string">'TheSansMonoWebVar'</span>; <span class="property">font-stretch</span>: <span class="value">80% 100%</span>; <span class="property">font-weight</span>: <span class="value">200 900</span>; <span class="property">src</span>: url(<span class="string">'/webfonts/TheSansMonoV.woff2'</span>) format(<span class="string">'woff2-variations'</span>), url(<span class="string">'/webfonts/TheSansMonoV.woff2'</span>) format(<span class="string">'woff2'</span>); } </pre> <p>The ‘font-stretch’ and ‘font-weight’ properties provide a hint to browsers as to what range of variations is provided by this font.</p> <p>You can then request a specific instance in your CSS:</p> <pre class="code-css"><span class="element">h2</span> { <span class="property">font-family</span>: <span class="string">'TheSansMonoWebVar'</span>; <span class="property">font-stretch</span>: <span class="value">85%</span>; <span class="property">font-weight</span>: <span class="value">800</span>; <span class="comment">/* legacy low-level code: */</span> <span class="property">font-variation-settings</span>: <span class="string">'wdth'</span> <span class="value">85</span>, <span class="string">'wght'</span> <span class="value">800</span>; } </pre> <p>This would produce a slightly narrow, extra bold variation of the typeface like this:</p> <h2 style="font-family: 'TheSansMonoWebVar'; font-stretch: 85%; font-weight: 800; font-variation-settings: 'wdth' 85, 'wght' 800; background: var(--grey-light);">Hello world</h2> <h3 id="variable-fonts-with-static-fallback-fonts">Variable fonts with static fallback fonts</h3> <p>The exact syntax for providing variable fonts, and making sure they are loaded by supported browsers, is undergoing changes as work on the <a href="https://www.w3.org/TR/css-fonts-4/">CSS fonts module level 4 draft</a> web standard is progressing, but this is what we currently settled on for our own site:</p> <pre class="code-css"><span class="comment">/* First, define the variable font with its own family name */</span> @font-face { <span class="property">font-family</span>: <span class="string">'TheSansMonoWebVar'</span>; <span class="property">font-stretch</span>: <span class="value">80% 100%</span>; <span class="property">font-weight</span>: <span class="value">200 900</span>; <span class="property">src</span>: url(<span class="string">'/webfonts/TheSansMonoV.woff2'</span>) format(<span class="string">'woff2-variations'</span>), url(<span class="string">'/webfonts/TheSansMonoV.woff2'</span>) format(<span class="string">'woff2'</span>); } @font-face { <span class="property">font-family</span>: <span class="string">'TheSansMonoWebVar'</span>; <span class="property">font-stretch</span>: <span class="value">80% 100%</span>; <span class="property">font-style</span>: <span class="value">italic</span>; <span class="property">font-weight</span>: <span class="value">200 900</span>; <span class="property">src</span>: url(<span class="string">'/webfonts/TheSansMonoV-Italic.woff2'</span>) format(<span class="string">'woff2-variations'</span>), url(<span class="string">'/webfonts/TheSansMonoV-Italic.woff2'</span>) format(<span class="string">'woff2'</span>); } <span class="comment">/* Then define static fallback fonts */</span> @font-face { <span class="property">font-family</span>: <span class="string">'TheSansMonoWebStatic'</span>; <span class="property">font-style</span>: <span class="value">normal</span>; <span class="property">font-weight</span>: <span class="value">700</span>; <span class="property">src</span>: url(<span class="string">'/webfonts/TheSansMonoWeb-SCdW7.woff2'</span>) format(<span class="string">'woff2'</span>); } @font-face { <span class="property">font-family</span>: <span class="string">'TheSansMonoWebStatic'</span>; <span class="property">font-style</span>: <span class="value">italic</span>; <span class="property">font-weight</span>: <span class="value">700</span>; <span class="property">src</span>: url(<span class="string">'/webfonts/TheSansMonoWeb-SCdW7i.woff2'</span>) format(<span class="string">'woff2'</span>); } <span class="comment">/* Assign the static fonts first, then override with an '@supports' statement */</span> <span class="element">h2</span> { <span class="property">font-family</span>: <span class="string">'TheSansMonoWebStatic'</span>, <span class="string">'Consolas'</span>, <span class="string">'Menlo'</span>, <span class="value">monospace</span>; <span class="property">font-weight</span>: <span class="value">700</span>; } @supports (<span class="property">font-variation-settings</span>: <span class="string">'wght'</span> <span class="value">700</span>) { <span class="element">h2</span> { <span class="property">font-family</span>: <span class="string">'TheSansMonoWebVar'</span>, <span class="string">'TheSansMonoWebStatic'</span>, <span class="string">'Consolas'</span>, <span class="string">'Menlo'</span>, <span class="value">monospace</span>; <span class="property">font-stretch</span>: <span class="value">90%</span>; <span class="property">font-weight</span>: <span class="value">700</span>; <span class="comment">/* legacy low-level code: */</span> <span class="property">font-variation-settings</span>: 'wdth' <span class="value">90</span>, 'wght' <span class="value">700</span>; } } </pre> Wed, 15 Jan 2020 13:00:00 +0100 https://lucasfonts.com/learn/webfonts https://lucasfonts.com/learn/webfonts Carlsberg Font Extensions <figure class="wide"><img src="/media/NY-Carlsberg-Display-Six-Lines-1800px.svg" alt="" /><figcaption></figcaption></figure> <p>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 <span class="nh">Carlsberg</span>. You can read all about that in our <a href="/custom/carlsberg-slab"><span class="nh">Carlsberg</span> Slab</a> case study. A few years later, we got to develop fonts for <span class="nh">Carlsberg</span> again – this time, Taxi Studio in Bristol was redesigning the brand.</p> <p>Taxi Studio worked with <a href="http://gingermonkeydesign.com/">Tom Lane</a> in Liverpool to redesign <span class="nh">Carlsberg’s</span> 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.</p> <p>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.</p> <figure class="center border"><img src="/media/NY-Carlsberg-Display-100percent-80percent.svg" alt="" /><figcaption>Text at 100% and 80% width (Light, Regular and Bold).</figcaption></figure> <p>We delivered the fonts to Taxi Studio in 2018, and <span class="nh">Carlsberg</span> began rolling out work designed with them in 2019. This is how Taxi Studio summarized <a href="https://worldbranddesign.com/unifying-carlsbergs-global-markets-with-a-holistic-design-system/">our contributions to the project</a>: <!-- http://www.taxistudio.co.uk/blog/news-flash/27/02/2019/unifying-carlsberg%E2%80%99s-global-markets-with-a-holistic-design-system --></p> <blockquote> <p>The final part of the versatile brand toolkit is a bespoke brand typeface. Developed in partnership with type foundry <span class="nh">LucasFonts,</span> using a character set designed by Tom Lane, it perfectly complements the re-crafted logotype. Combined with the full complement of new <span class="nh">Carlsberg</span> assets and a strong, coherent brand language, this new typeface will help ensure consistency of application across the global portfolio for decades to come.</p> </blockquote> <figure class="center"><img src="https://www.lucasfonts.com/media/NY-Carlsberg-Display-Default-Cyrillic-740px.svg" alt="" /><figcaption>The default versions of the Cyrillic letters shown above, as they appear in the Ny <span class="nh">Carlsberg</span> Display Light font.</figcaption></figure> <p>As is customary for almost all typefaces LucasFonts develops that support Cyrillic, the <span class="nh">Carlsberg</span> 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 <a href="http://txet.de/typofest-bulgaria/">this article on European Cyrillics</a> from Luc(as) de Groot and Sonja Knecht.</p> <figure class="center"><img src="https://www.lucasfonts.com/media/NY-Carlsberg-Display-Bulgarian-Cyrillic-740px.svg" alt="" /><figcaption>Alternate Cyrillic letterforms for the Bulgarian language.</figcaption></figure> Fri, 22 Nov 2019 16:00:00 +0100 https://lucasfonts.com/custom/ny-carlsberg-display https://lucasfonts.com/custom/ny-carlsberg-display ArrowFont 2.0 <figure class="center"><img src="/media/LucasArrowMM1992_ATM.png" alt="" /><figcaption></figcaption></figure> <p>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.</p> <p>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).</p> <figure class="center"><img src="/media/LucasArrowMM1992_Installation.png" alt="" /><figcaption></figcaption></figure> <figure class="center"><img src="/media/LucasArrowMM1992_Usage.png" alt="" /><figcaption></figcaption></figure> Mon, 14 Oct 2019 17:18:00 +0200 https://lucasfonts.com/learn/arrow-font https://lucasfonts.com/learn/arrow-font The shape of the new 1E9E LATIN CAPITAL LETTER SHARP S <p>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.</p> <figure class="center bg"><img src="/media/1E9E-lowercase-eszett-examples.svg" alt="" /><figcaption></figcaption></figure> <p>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:</p> <figure class="center"><img src="/media/Arrighi-Tagliente-Palatino.png" alt="" /><figcaption>Arrighi, Tagliente, Palatino, five centuries ago.</figcaption></figure> <p>This perfectly evolved shape is found in many fonts today.</p> <figure class="center"><img src="/media/Janson-Jenson.svg" alt="" /><figcaption></figcaption></figure> <p>Also around 500 years ago, black­letter was fashionable, following architectural styles. In black­letter, this character often looked like a combination of a long “s” and a “z”.</p> <figure class="center"><img src="/media/Blackletter-1512-calendar.png" alt="" /><figcaption>Black­letter eszetts: one Textura style, one Schwabacher, and a cool “z”. From a German calendar, 1512.</figcaption></figure> <figure class="left"><img src="/media/antique-us-document-bill-of-rights-2.png" alt="" /><figcaption>Congress with ſs. US&nbsp;Bill of Rights, ratified 1791.</figcaption></figure> <figure class="right"><img src="/media/Andrees_Weltatlas1880Legende_Cropped.png" alt="" /><figcaption>ſs in the word Maaßstab. Andrée’s Weltaltas, 1880.</figcaption></figure> <p>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.</p> <h2 id="is-it-an-ss-or-an-sz-part-1">Is it an SS or an SZ? (part 1)</h2> <style> figure.transition { position: relative; } figure.transition img + img { left: 0; position: absolute; top: 0; } .top { animation-name: fade; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-duration: 3s; animation-direction: alternate; } @keyframes fade { 0% { opacity: 1; } 25% { opacity: 1; } 75% { opacity: 0; } 100% { opacity: 0; } } </style> <figure class="center bg transition"> <img class="bottom" src="/media/How-I-was-taught-in-the-Netherlands-1.svg" /> <img class="top" src="/media/How-I-was-taught-in-the-Netherlands-2.svg" /> </figure> <p>In Holland, I was taught that the ß in black­letter is a combination of a long and a short “s”, glued together and cleaned up a bit.</p> <p>The right part of the small “s” looks very much like the black­letter “z” (ʒ), so the resulting cleaned-up shape looks like a long “ſ” and a “ʒ” combined. This is where some naming confusion originated.</p> <figure class="left"><img src="/media/unclarity-in-historic-eszett-samples.png" alt="" /><figcaption>The top could be ſs. The bottom could be ſʒ or a cleaned-up version of ſs.</figcaption></figure> <figure class="center"><img src="/media/eszett-rules-scan-from-historic-text.png" alt="" /><figcaption>This text was written at a period when Latin types often did not have an ß in them. Trans­lated 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.</figcaption></figure> <p>To answer the question “was it SS or SZ in typesetting?”, one should ask: “was it black­letter 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 black­letter:</p> <table style="background-color: #FFF9F1;"> <tr><td colspan="3"><strong>Blackletter typesetting (<em>Fraktursatz</em>)</strong></td></tr> <tr><td></td><td><em>Adelung rules</em><br /><strong>Waſʒerſchloſʒ<br />Straſʒeneinfluſʒ</strong></td><td><em>Heyse rules</em><br /><strong>Waſſerſchloſs<br />Straſʒeneinfluſs</strong></td></tr> <tr><td colspan="3"><strong>Latin typesetting (<em>Antiquasatz</em>)</strong></td></tr> <tr><td>19th century<br /><br /><strong>Wasserschloss<br />Strasseneinfluss</strong></td><td>20th/21st century<br /><em>Adelung rules</em><br /><strong>Wasserschloß<br />Straßeneinfluß</strong></td><td>21st century<br /><em>Heyse rules</em><br /><strong>Wasserschloss<br />Straßeneinfluss</strong></td> </tr></table> <p><br /></p> <p>Around 140 years ago, from 1879 onwards, the official rule to translate blackletter typesetting into latin typesetting (Prussia, Bavaria) was:</p> <figure class="center"><img src="/media/BavarianPrussian1879rules.png" alt="" /><figcaption>In Latin type, s was used for ſ and s, ss was used for ſſ, and ſs was used for ß (or ſʒ).</figcaption></figure> <h2 id="is-it-an-ss-or-an-sz-part-2">Is it an SS or an SZ? (part 2)</h2> <p>Ss or Sz? The German word for fun (<em>Spaß</em>, pronounced with a long vowel) comes from the Italian <em>Spasso</em>. It would be wrong to write it with a “z”. Anyway, historically, the name <em>EsZett</em> 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.</p> <figure class="center"><img src="/media/Spasso-Spaß.png" alt="" /><figcaption></figcaption></figure> <figure class="right"><img src="/media/The-origin-of-the-cedilla-margin.svg" alt="" /><figcaption> Other European languages use a z-form to differentiate the pronunciation of s or c.</figcaption></figure> <p>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.</p> <figure class="center"><img src="/media/BAS-IS-DE-BAAS.png" alt="" /><figcaption></figcaption></figure> <p>Compared with some other European languages, German is not very efficient with the s-sounds.</p> <figure class="center"><img src="/media/sch-ss-ß-s-z-table.png" alt="" /><figcaption></figcaption></figure> <p>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.</p> <figure class="center"><img src="/media/Saltzsoße-Zaltszose.png" alt="" /><figcaption>In order to transcribe the pronunciation of this German word to a Dutch tongue, four letters must be exchanged</figcaption></figure> <p>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.</p> <figure class="center"><img src="/media/Greek-2-s-shapes.png" alt="" /><figcaption></figcaption></figure> <p>Several shapes already exist in Unicode for alternative pronunciations of S and Z:</p> <figure class="center"><img src="/media/Unicode-s-z-phonetic.png" alt="" /><figcaption></figcaption></figure> <p>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:</p> <figure class="center"><img src="/media/STRASSE-alternative-solutions.png" alt="" /><figcaption></figcaption></figure> <h2 id="the-formal-development-of-a-capitalnbsp">The formal development of a capital ß</h2> <p>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.</p> <figure class="center"><img src="/media/SandG_cap-eszetts_1921-1912-1921.png" alt="" /><figcaption>Three different attempts at a capital&nbsp;ß from type specimens printed by the Schelter &amp; Giesecke foundry in 1912 and 1921. The middle part shows a combination of an almost full S-shape combined with a narrower&nbsp;Z.</figcaption></figure> <p>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.</p> <figure class="center"><img src="/media/Suggestions-for-cap-eszett-1956.png" alt="" /><figcaption>Image from the Papier und Druck magazine, issue 10/1956, p. 101</figcaption></figure> <p>Around six years ago, a political party, fond of capitals, asked for the capital sharp S to be included.</p> <figure class="left"><img src="/media/TheSansSPD-cap-eszett-v1.png" alt="" /><figcaption>This is the shape I proposed.</figcaption></figure> <p>The feedback was: “I find it very hard to read, please don’t be offended, I built my own proposal…”</p> <figure class="right"><img src="/media/TheSansSPD-cap-eszett-suggestion.png" alt="" /><figcaption>Form suggested by our client.</figcaption></figure> <p>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.</p> <figure class="left"><img src="/media/TheSansSPD-cap-eszett-v2.png" alt="" /><figcaption>The final form we compromised on.</figcaption></figure> <p>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!</p> <figure class="center"><img src="/media/TheSans-in-use-with-Versal-Eszett-SPD-Posters.png" alt="" /><figcaption>The compromise capital&nbsp;ß in-use on campaign graphics.</figcaption></figure> <h2 id="how-wide-should-the-capitalnbsp-be">How wide should the capital ß be?</h2> <figure class="right"><img src="/media/Christian-Thalmann-capital-eszett-drawing-guide.png" alt="" /><figcaption></figcaption></figure> <p>Around seven years ago, Christian Thalmann (@CatharsisFonts) <a href="https://twitter.com/catharsisfonts/status/881098780933861376">made a good manual</a> 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.</p> <p>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”.</p> <p>Around five years ago, Ralf Herrmann published an excellent <a href="https://typography.guru/journal/capital-sharp-s-designs/">English-language text</a> describing how to design a capital ß. There’s a <a href="https://typografie.info/download/versaleszett.pdf">German version</a>, too. Despite its quality, I do not think that the classification of shapes by city name is appropriate today.</p> <h2 id="stroke-endings">Stroke endings</h2> <figure class="center bg"><img src="/media/Seriffed-Capital-Letters.svg" alt="" /><figcaption></figcaption></figure> <p>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.</p> <h2 id="constructing-the-glyph">Constructing the glyph</h2> <p>By combining elements from U, Z and S, a serif version could look like this.</p> <figure class="center bg"><img src="/media/Sources-of-the-Capital-Eszett-Serifs.svg" alt="" /><figcaption></figcaption></figure> <p>But that doesn’t satisfy everyone.</p> <h2 id="the-missing-serif">The missing Serif</h2> <figure class="center bg"><img src="/media/Missing-interior-serif.svg" alt="" /><figcaption></figcaption></figure> <p>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.</p> <h2 id="duden-rules">Duden rules</h2> <p>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.</p> <p>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.</p> <p>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.</p> <h2 id="germany-austria-switzerland">Germany, Austria, Switzerland</h2> <p>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 <em>scharfes S</em>, or sharp s. Only in some areas of Germany it is called Eszett, inspired by the shape in black­letter typefaces. In Holland we call it <em>ringel‑S</em>.</p> <p>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 <em>rock</em> music or stone? Is a <em>bat</em> an animal or a wooden stick? Take the <em>fall</em> in the <em>fall</em>, <em>drop</em> a <em>drop</em> of fluid and be <em>right</em> to turn <em>right</em> where you <em>saw</em> the <em>saw</em> and <em>left</em> the <em>left</em> half. Take the <em>lead</em> with <em>lead</em> metal <em>type</em>, not your <em>type</em>?</p> <p>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.</p> <h2 id="implementation-in-fonts">Implementation in fonts</h2> <p>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.</p> <p>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.</p> <p>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 <span class="sc">ss</span> and SS. These can only be selected as a unity, but react correctly when extra spacing is added. Thank you Adobe!</p> <p>Therefore it is not a good idea to add the following substitution ß &gt; ẞ 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.</p> <h2 id="analysis-of-the-1e9e-glyphs-in-270-fontsfamilies">Analysis of the 1E9E glyphs in 270 fonts/families</h2> <div class="pdfviewer"> <div> <button id="prev_page" onclick="movePage(-1)">prev</button> <button id="next_page" onclick="movePage(1)">next</button> <p>Page <input class="num" id="current_page" size="2" value="1" onchange="goToPage()" /> of <span id="total_pages"></span></p> </div> <script src="/js/pdf.js"></script> <div class="pdf" id="the-svg">/media/GermanCapitalSharpS-v143AnalysisOnly.pdf </div> <script src="/js/pdf_controls.js"></script> </div> <p><br /> 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.</p> <h2 id="new-capital-eszetts-for-my-calibri-typeface">New capital eszetts for my Calibri typeface</h2> <p>In 2003, I designed Calibri for Microsoft.</p> <figure class="center bg"><img src="/media/Calibri-lowercase-eszett.svg" alt="" /><figcaption></figcaption></figure> <p>In 2010, Microsoft added a capital sharp S: not nice and definitely too narrow.</p> <figure class="center bg"><img src="/media/Calibri-RBBI-capital-eszett.svg" alt="" /><figcaption></figcaption></figure> <p>For Calibri Light in 2012, I designed and tested three versions of this character:</p> <figure class="center bg"><img src="/media/Calibri-Light-Capital-Eszett-Trials.svg" alt="" /><figcaption></figcaption></figure> <p>This is the version we chose:</p> <figure class="center bg"><img src="/media/Calibri-LLI-capital-eszett.svg" alt="" /><figcaption></figcaption></figure> <p>Since then, Calibri has had different versions of this letter in the different weights.</p> <figure class="center bg"><img src="/media/Calibri-2018-capital-eszetts.svg" alt="" /><figcaption></figcaption></figure> <p>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.</p> <figure class="center bg"><img src="/media/Calibri-capital-eszett-marked-up.svg" alt="" /><figcaption></figcaption></figure> <p>I prepared five variants for Regular and Bold, and a questionnaire for Berlin Typostammtisch attendees to choose their favorite version.</p> <figure class="center bg"><img src="/media/Calibri-new-capital-eszett-options.svg" alt="" /><figcaption></figcaption></figure> <p>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.</p> <figure class="center bg"><img src="/media/Calibri-Typostammtisch-Voting-Results.svg" alt="" /><figcaption></figcaption></figure> <p>That’s it!</p> <p>The goal of this publication is to prevent carelessly designed future versions of this new character. Please spread the word.</p> <footer class='article-footer'><p>Transcribed version of a lecture Luc(as) held at a Typostammtisch event dedicated to the capital sharp S, on October 25, 2018 in Berlin, inside the LucasFonts studio</p> <p>You can read more about this event in German <a href="https://typostammtisch.berlin/2018/11/nachbericht-79-typostammtisch-1e9e-ein-jahr-danach/">on the Berlin Typostammtisch website</a>. Check them out for <a href="https://typostammtisch.berlin/">news about future events</a>, too.</p> </footer> Luc(as) de Groot, Deutßchkenner Fri, 03 May 2019 18:05:00 +0200 https://lucasfonts.com/learn/1E9E https://lucasfonts.com/learn/1E9E TheMix Arabic <h3 id="balancing-handwritten-and-geometrically-constructed-letterforms">Balancing Handwritten and Geometrically Constructed Letterforms</h3> <h4 id="the-design-concept">The Design Concept</h4> <figure class="right"><img src="/media/diana_iamsterdam.jpg" alt="" /><figcaption>Mediamatic’s t&#8209;shirt featuring their proposed Arabic version of the iconic “I amsterdam” logo&nbsp;– this time set in TheMix Arabic.</figcaption></figure> <p>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 – <a href="/fonts/the-mix">TheMix</a>. 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.</p> <figure class="center"><img src="/media/TheMix_Arabic_logo" alt="" /><figcaption>TheMix Arabic in-use for the El-Hema project in the Netherlands, 2007. Logo design by Tarek Atrissi in collaboration with Huda Smitshuijzen AbiFares</figcaption></figure> <h4 id="the-design-process">The Design Process</h4> <p>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.</p> <p>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.</p> <footer class='article-footer'><p>Learn more about TheMix Arabic in <a href="http://www.khattbooks.com/shop/typographic-matchmaking/">Typographic Matchmaking</a>, available from KhattBooks.</p> </footer> Huda Smitshuijzen AbiFarès Sun, 17 Mar 2019 10:00:00 +0100 https://lucasfonts.com/learn/the-mix-arabic-khtt https://lucasfonts.com/learn/the-mix-arabic-khtt Interpolation and Curve Technicalities <p>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.<sup id="fnref:svg"><a href="#fn:svg" class="footnote" rel="footnote" role="doc-noteref">1</a></sup> 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.</p> <figure class="center"><img src="/media/typolabs-2018-interpolation.png" alt="" /><figcaption>TrueType segments mixed with PostScript segments.</figcaption></figure> <p>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.</p> <figure class="center"><img src="/media/typolabs-2018-floris.png" alt="" /><figcaption>Just one of the combinations of 5 design axes.</figcaption></figure> <p>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.</p> <p>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 <a href="https://github.com/w0rm/elm-font-dimensions">GitHub</a>, or just drag your variable fonts on the live test site <a href="http://fvar.unsoundscapes.com/">fvar.unsoundscapes.com</a>.</p> <figure class="center"><img src="/media/typolabs-2018-designspace.png" alt="" /><figcaption>3D and beyond.</figcaption></figure> <p>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.</p> <figure class="center"><img src="/media/typolabs-2018-excel.png" alt="" /><figcaption>Excel is an essential component of the type design process at LucasFonts.</figcaption></figure> <p>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.</p> <p>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.</p> <figure class="center"><img src="/media/typolabs-2018-calibri.png" alt="" /><figcaption>Not a collection of boat planks, but Calibri UltraExtended Air curve endings: “These still look VERY bad!”</figcaption></figure> <p>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.</p> <p>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 <a href="/porno/">download for free</a>.</p> <p>You can watch the whole presentation here:</p> <div class="video"><iframe src="https://www.youtube-nocookie.com/embed/I75Efo7whrs" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe></div> <div class="footnotes" role="doc-endnotes"> <ol> <li id="fn:svg"> <p>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. <a href="#fnref:svg" class="reversefootnote" role="doc-backlink">&#8617;</a></p> </li> </ol> </div> <footer class='article-footer'><p>This article should have been originally published in April 2018 on the TypoLabs blog, but this was averted by the demise of the Typo conferences.</p> </footer> Jens Kutílek Tue, 20 Nov 2018 11:00:00 +0100 https://lucasfonts.com/learn/interpolation-curve-technicalities https://lucasfonts.com/learn/interpolation-curve-technicalities Der ABC-Macher <figure class="right"><img src="/media/sabine-cover-large.jpg" alt="" /><figcaption>Sabine is the quarterly, German language magazine published by the design department of the University of Applied Sciences in Potsdam</figcaption></figure> <p><em>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 (Fach­hochschule 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.</em></p> <p>Eigentlich müsste ihn jeder in Deutschland kennen, flimmert seine Arbeit doch täglich durch die ARD. Von A bis Z nutzen Werbe­kampagnen, Wege­leitsysteme und Ver­packungen die Arbeit von Luc(as) de Groot. Er entwarf für Le Monde (<a href="/fonts/floris">Floris</a>), den Spiegel (<a href="/fonts/spiegel-sans">Spiegel</a>), die TAZ (<a href="/fonts/taz">Taz</a>) und einige Zeitungen mehr: Luc(as) de Groot ist Schriftdesigner. Seine immens ausgebaute Schrift­familie <a href="/about/thesis">Thesis</a> wurde zum Meilen­stein dessen, was an Systematik und Perfektion erreichbar ist. 2000 gründete er die Type­foundry »LucasFonts« und hat an der <a href="https://www.fh-potsdam.de/design/">FH Potsdam</a> seit 1997 eine Professur für Schrift­entwicklung.</p> <p>Es hat sich eingeregnet, als wir in dem Schöneberger Hinterhof ankommen, in welchem Luc(as) de Groot sein Büro­anwesen hat. Während andere Haus­rücken Berlins bei solchem Wetter nur noch grauer werden, sieht dieser Hof­garten jetzt noch paradiesischer aus. Das Büro von LucasFonts liegt zu ebener Erde und ist gerammelt voll mit Tischen, Bild­schirmen – wir hätten uns den Spaß machen sollen, sie zu zählen – und Buch­staben aller Größe und Art. Es ist eine begehbare Schatz­schatulle – vorausgesetzt natürlich, dass man Buch­staben mag!</p> <figure class="right"><img src="/media/lucas-in-workshop.jpg" alt="" /><figcaption>Luc(as) in his workshop</figcaption></figure> <p>Luc(as) de Groot liebt Buch­staben. Ihnen widmet er Zeit, seine Ruhe und Aufmerksam­keit. Geboren ist Luc(as) nahe der holländischen Nordsee­kü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 Kunst­akademie bewirbt. Noch in der Schul­zeit hatte er sieben Aus­gaben der Schul­zeitung heraus­gebracht – alle wohl­gemerkt 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 selbst­gebauten Dunkel­kammer und bastelte sich ins bunte Leben: Schmuck und kleine Geräte und Fotos sowieso.</p> <p>An der Akademie dann legt man ihm beim Sichten der stattlichen Bewerbung­smappe voller Fil­mplakate 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ächer­umfassenden Prüfungen in Fotografie, Illustration, Schrift­gestaltung, Typo­grafie, Verpackungs- und Corporate Design. Zur Diplom­schau 1989, die an der Akademie eine Woche lang dauert, kommen zahlreiche Design­büros – Luc(as) kriegt Aufmerksam­keit vom Studio Dumbar aus Rotterdam. Im letzten Jahr des Studiums geht er als Praktikant in das Den Haager Design­bü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 verantwort­lich für den Einkauf von Schriften und hat bald eine erhebliche Daten­bank angelegt. Das war von 1989 bis ’93.</p> <p>Die Arbeit als Gestalter zu der Zeit ist bedingt von 13-Zoll-Monitoren, 300-dpi-Druckern und keiner guten Sof­tware – ganz zu schweigen von Daten­trägern, die unkompliziert noch keine Daten­massen fassen können. Wenn Luc(as) Schriften macht, geschieht die Arbeit gänzlich anders als heute, nämlich analog: In Groß werden viele Rein­zeichnungen angefertigt, bei Linotype werden die Buch­staben 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 Über­schriften seiner Schul­zeitung malte und später auch professionell – als Freelancer oder angestellt. Richtig los ging es damit in Berlin.</p> Tue, 08 May 2018 11:00:00 +0200 https://lucasfonts.com/learn/der-abc-macher https://lucasfonts.com/learn/der-abc-macher Interpolation Theory <figure class="center"><img src="/media/extra-Interpol.gif" alt="" /><figcaption></figcaption></figure> <h3 id="about-interpolation">About interpolation</h3> <p>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.</p> <p>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.</p> <h3 id="interpolation-theory">Interpolation theory</h3> <p>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”.</p> <p>My tests resulted in a formula and a graph that precisely define the optimum value for any possible intermediate weight.</p> <figure class="center"><img src="/media/1-InterCurve.jpg" alt="" /><figcaption></figcaption></figure> <figure class="center"><img src="/media/2-InterForm.jpg" alt="" /><figcaption></figcaption></figure> <h2 id="anisotropic-topology-dependent-interpolation-theory">Anisotropic Topology-dependent Inter­polation Theory</h2> <p>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.</p> <figure class="center"><img src="/media/3-interpol-sketch.jpg" alt="" /><figcaption></figcaption></figure> <h3 id="limited-growth">Limited growth</h3> <p>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.</p> <h3 id="topology-of-single-letters">Topology of single letters</h3> <p>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.</p> <figure class="center"><img src="/media/4-Anisotrop-sketch.jpg" alt="" /><figcaption></figcaption></figure> <p>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.</p> <h3 id="the-interpolation-theory-in-use">The interpolation theory in use</h3> <p>I will now describe seven more or less complicated real-life cases, with the numbers that I as designer need to see, as inspiration.</p> <h4 id="weight-example-1">Weight Example 1</h4> <p>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.)</p> <figure class="center border"><img src="/media/interpolation-theory_in-use-weight-example-1.png" alt="" /><figcaption></figcaption></figure> <p>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.</p> <p>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:</p> <h4 id="weight-example-2">Weight Example 2</h4> <figure class="center"><img src="/media/interpolation-theory_in-use-weight-example-2.png" alt="" /><figcaption></figcaption></figure> <p>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.</p> <h4 id="weight-example-3">Weight Example 3</h4> <p>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.</p> <p>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.</p> <p>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.</p> <figure class="center"><img src="/media/interpolation-theory_in-use-weight-example-3.png" alt="" /><figcaption></figcaption></figure> <p>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:</p> <h4 id="weight-example-4">Weight Example 4</h4> <p>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:</p> <figure class="wide"><img src="/media/interpolation-theory_in-use-weight-example-wide-4.png" alt="" /><figcaption></figcaption></figure> <p>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.</p> <h4 id="weight-example-5-practical-implementation">Weight Example 5, practical implementation</h4> <p>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 😊</p> <figure class="wide"><img src="/media/interpolation-theory_in-use-weight-example-wide-5.png" alt="" /><figcaption></figcaption></figure> <h5 id="width">Width</h5> <p>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.</p> <figure class="center border"><img src="/media/interpolation-theory_in-use-weight-example-6.png" alt="" /><figcaption></figcaption></figure> <h5 id="optical-size">Optical Size</h5> <p>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.</p> <figure class="wide"><img src="/media/interpolation-theory_in-use-weight-example-wide-7.png" alt="" /><figcaption></figcaption></figure> Luc(as) de Groot Tue, 08 May 2018 10:30:00 +0200 https://lucasfonts.com/learn/interpolation-theory https://lucasfonts.com/learn/interpolation-theory Taz Wide & Extended <figure class="right"><img src="/media/taz-family.png" alt="" /><figcaption>Taz Family</figcaption></figure> <h2 id="die-anfnge-vom-auftrag-bis-zum-ersten-einsatz">Die Anfänge: vom Auftrag bis zum ersten Einsatz</h2> <p>Die Geschichte der Taz beginnt 1998: Luc(as) de Groot entwirft eine Headline-Schrift für Die Tages­zeitung. Visuell sollte die neue Schrift an die (zuvor verwendete) Futura Bold Condensed anschließen. Weitere Anhalts­punkte waren der deutsche Text, also viele Groß­buchstaben, sowie kleine Ober- und Unter­längen für möglichst sparsamen Zeilen­abstand im Zeitungs­satz. Und der Wunsch, mit der neuen Schrift eine starke, vertrauens­erweckende visuelle Identität zu entwickeln.</p> <p>Das gelingt bestens: der <em>Tages­zeitung</em> wie der Schrift Taz.</p> <p>Zunächst lag das Schrift­projekt wegen Re­organisationen bei der Tages­zeitung 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.</p> <figure class="center"><img src="/media/taz-schroeder-large.jpg" alt="" /><figcaption>First issue of Taz provided with Taz headline font</figcaption></figure> <p>Seit der Erst­auflage erweitert Lucas de Groot die Taz stetig und baut sie zur „Super Family“ aus. Jüngste Mit­glieder: 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.</p> <p>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 bildschirm­optimiert („gehintet“). Die gesamte Familie wird ständig überprüft, abgeglichen und weiter­bearbeitet, wie alle Schriften von LucasFonts.</p> <h2 id="noch-unentdeckt-taz-headline-hairline">Noch unentdeckt: Taz Headline Hairline</h2> <p>Eine Besonderheit ist dabei die Hairline-Serie der Taz Headline: Fonts unter­schiedlicher 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: <a href="/get_a_catalog/">hier bestellen</a>.</p> <p>Ein Versuch, den Ausbau der Taz zu beschreiben:</p> <p>Die TazText für Fließ­texte (anfänglich „TazzerText“) ist angelegt in einer Weite von 110% zur Ur-Taz für Head­lines. Die Taz Condensed mit ihrer Weite von 80% zur Ausgangs­schrift kam – mitsamt Hairlines – 2010 auf den Markt.</p> <figure class="center"><img src="/media/TazSlanted_02Widths.png" alt="" /><figcaption>Taz widths</figcaption></figure> <p>2011 erweiterte LucasFonts die TazText von 4 auf 18 Schnitte mit Kapitäl­chen – Kapitäl­chen allerdings nur für die TazText. Laut Lucas de Groot sehen „Kapitälchen bei einer schmalen Headline-Schrift nicht optimal aus“; für eine breit­laufende Fließ­text­schrift wie die TazText allerdings passen sie wunderbar als Auszeichnungs­schrift, und „brauchen ebenfalls eine gewisse Breite“.</p> <p>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%).</p> <h2 id="taz-heute">Taz heute</h2> <p>Die Taz Familie umfasst heute 128 Fonts in 5 Weiten und 15 Strich­stärken. Taz und Taz Condensed bilden diese 15 Strich­stärken ab (inklusive Hairlines) plus Kursive, also je 30 Schnitte. Die TazText ist perfekt für Mengen­satz durch­getaktet: 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 senk­rechten Balken (Anzahl der Font Units).</p> <p>Die ganze Taz-Familie hat eckige Punkte und Inter­punktions­zeichen. Alternativ stehen runde Formen zur Verfügung, für eine etwas weichere Erscheinung. Bei der Anwendung im Zeitungs­satz allerdings stellte sich schnell heraus, dass diese weichere Variante für harte Fakten und dramatische Nach­richten weniger geeignet ist …</p> <figure class="center"><img src="/media/TazSlanted_05Specimen.png" alt="" /><figcaption>Taz specimen</figcaption></figure> <figure class="center"><img src="/media/TazSlanted_04WideExtended.png" alt="" /><figcaption>Taz Wide and Extended</figcaption></figure> <h2 id="die-neuen-breiten">Die neuen Breiten</h2> <p>Die neue Taz Wide und Taz Extended haben je 10 Gewichte, also 20 Schnitte mit 812 Zeichen, ein­schließ­lich Vietnamesisch.</p> <p>Die Taz Wide, klar und elegant, bietet bereits eine großzügig angelegte Breite und spart dafür Platz in der Vertikalen.</p> <p>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 Nach­folger für die Eurostile?</p> <p>Die ersten Tests für die Taz Extended „machten wir bereits 2008, danach blieb sie erst mal liegen,“, so <a href="http://ewalthert.com/">Edgar Walthert</a>, der bei LucasFonts in Berlin haupt­sächtlich an der Taz arbeitet. In seinen Notiz­büchern findet er Skizzen und Anmerkungen zu den diversen Ausbau­stufen: „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 Unter­schied zur TazText so groß, dass sich die Wide als Zwischen­schritt geradezu aufdrängte.“</p> <figure class="center"><img src="/media/TazSlanted_12Notebooks.jpg" alt="" /><figcaption>Notes by Edgar Walthert</figcaption></figure> <figure class="center"><img src="/media/Bonusbild_Lucas_de_Groot+Edgar_Walthert.jpg" alt="" /><figcaption>Luc(as) de Groot and Edgar Walthert working on Taz</figcaption></figure> <figure class="center"><img src="/media/TazSlanted_06Features.png" alt="" /><figcaption>Taz features</figcaption></figure> <figure class="center"><img src="/media/TazSlanted_06Figures.png" alt="" /><figcaption>Taz figures overview</figcaption></figure> <figure class="center"><img src="/media/TazSlanted_07Glyphset.png" alt="" /><figcaption>Taz glyph set</figcaption></figure> <p>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).</p> <figure class="center"><img src="/media/TazSlanted_15Korrekturen01.jpg" alt="" /><figcaption></figcaption></figure> <figure class="center"><img src="/media/TazSlanted_15Korrekturen02.jpg" alt="" /><figcaption></figcaption></figure> <figure class="center"><img src="/media/TazSlanted_15Korrekturen03.jpg" alt="" /><figcaption></figcaption></figure> <figure class="center"><img src="/media/TazSlanted_15Korrekturen04.jpg" alt="" /><figcaption></figcaption></figure> <p>Bilder aus einem langen Prozess: Korrekturen von Lucas de Groot an diversen Zwischen­schritten. Unten zu sehen ist eine steil anteigende Inter­polations­kurve, die den jeweiligen Zuwachs von Schnitt zu Schnitt anzeigt – und dass dieser eben nicht stetig in den gleichen Schritten verläuft.</p> <figure class="center"><img src="/media/TazInterpolationskurve2011bTransp.png" alt="" /><figcaption>Taz interpolation curves</figcaption></figure> <p>Lucas de Groot hat schon immer viel aus­probiert und ver­sucht, mathematische gestalter­ische Regeln zu finden. Er hat eine <a href="/learn/interpolation-theory/">Inter­polations­theorie</a> mit entsprechenden Formeln zum Berechnen des Ansteigens von Inter­polations­kurven entwickelt. Im Bild sehen wir die Inter­polations­kurven der Taz-Familie über­einander 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.</p> <figure class="center"><img src="/media/TazSlanted_08Layers.png" alt="" /><figcaption>Taz layers</figcaption></figure> <figure class="center"><img src="/media/TazSlanted_09Extremes.png" alt="" /><figcaption>Taz extremes</figcaption></figure> <p>Lucas de Groot hat seine Taz gestaltet in einer sehr großen Palette von Schnitten, wobei das ausdrucks­starke Grund­gerüst bestehen bleibt. Das gelingt – bei so extrem unter­schiedlichen Strich­stärken von Hairline bis extrem fett – nicht mit automatisierter Inter­polation: „Man würde unschöne und unkontrollier­bare Zwischen­formen erhalten“, sagt Lucas. Also hat er in jeder Gewichts­reihe zunächst vier „Gestaltungs­punkte“ gesetzt – den dünnsten, den fettesten und zwei dazwischen. Die übrigen (Zwischen-)~Gewichte konnten dann zwischen relativ naheliegenden Gewichten sauber inter­poliert werden.</p> <h2 id="thema-lesbarkeit">Thema Lesbarkeit</h2> <p>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 Mengen­satz. Er unter­sucht 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 Quadrat­zentimeter“ – sehr zu empfehlen! Eine Über­sicht aktueller <a href="/about/speaking-events/">„Speaking events“</a> ist zu finden auf der LucasFonts-Homepage.</p> <figure class="center"><img src="/media/Taz_inUse_dieTazklein.jpg" alt="" /><figcaption>Taz Mini</figcaption></figure> <p>Ein besonderes gutes Beispiel für exzellente Lesbar­keit kleiner Schrift­größen bietet eine Sonder­ausgabe der Tages­zeitung im Miniatur­format: entstanden aus Geld­not, um Druck­kosten zu sparen. Sie wurde gesetzt in der Taz Headline in Kombination mit Lucas de Groots AntiquaText als Fließ­text-Schrift.</p> <h2 id="anwendungsbeispiele-nicht-nur-zeitung">Anwendungsbeispiele: nicht nur Zeitung</h2> <p>Mittlerweile begegnet Lucas de Groot seiner Taz auf Schritt und Tritt: „Einer meiner liebsten Orte in Berlin ist das Bauhaus.“ Warum wohl?</p> <figure class="center"><img src="/media/TazSlanted_14InUse-BauhausEingang.jpg" alt="" /><figcaption>Bauhaus entrance</figcaption></figure> <figure class="center"><img src="/media/TazSlanted_14InUse-BauhausAufsteller.JPG" alt="" /><figcaption>Bauhaus advertising</figcaption></figure> <figure class="center"><img src="/media/TazSlanted_14InUse-BauhausPaket.JPG" alt="" /><figcaption>Bauhaus box</figcaption></figure> <p>Im Editorial Design hat die Taz längst die Landes­grenzen ü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.</p> <figure class="center"><img src="/media/TazSlanted_13InUse-BigIssue.jpg" alt="The Big Pick" /><figcaption>The Big Pick</figcaption></figure> <p>Wie vielfältig die Taz auch in ihrer emotionalen Wirkung ist, zeigen Titel und eine beispiel­hafte Doppel­seite des Magazins Squint.</p> <figure class="center"><img src="/media/TazSlanted_16_inUse_Squint-spread.jpg" alt="" /><figcaption>Squint spread</figcaption></figure> <figure class="center"><img src="/media/TazSlanted_16_inUse_Squint.jpg" alt="" /><figcaption>Squint cover</figcaption></figure> <h2 id="addicted-to-taz">Addicted to Taz</h2> <p>Auch die schweizerische <em>Blick am Abend</em> 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ältig­keit, Platz­effizienz, uneingeschränkt kombinier­bar zur Geltung – und zeigt ihre Eignung auch zum Boulevard. Dass die <em>Blick am Abend</em> politisch-inhaltlich-redaktionell von der Berliner <em>Tages­zeitung</em> so weit wie nur irgend­etwas entfernt ist, beweist, was für ein weites Feld an Ausdruck­smöglichkeiten die Taz-Familie bereitstellt …</p> <figure class="center"><img src="/media/TazSlanted_10BlickAmAbend.jpg" alt="" /><figcaption>Blick am Abend</figcaption></figure> <p>Das bringt uns auf eine Idee: Wie wäre es, bisherige Anwendungen, sagen wir der Eurostile, durch <a href="/fonts/taz/wide/">Taz Wide</a> und/oder <a href="/fonts/taz/extended/">Taz Extended</a> zu ersetzen? Wir sind gespannt, wo sie zum Einsatz kommen!</p> <p>Ideen, Beispiele und Fundstücke gerne per E-Mail an <a href="/contact">uns</a>.</p> <footer class='article-footer'><p>This article was originally published in November 2014 on <a href="http://www.slanted.de">Slanted</a>, a German blog dedicated to graphic design and typo­graphy.</p> </footer> Sonja Knecht Tue, 08 May 2018 10:15:00 +0200 https://lucasfonts.com/learn/taz-wide-extended https://lucasfonts.com/learn/taz-wide-extended Our Clients <p>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 &amp; 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.</p> <p>Some of our current and past clients include:</p> <ul> <li>ARD</li> <li>Audi</li> <li>Carlsberg</li> <li>Commerzbank</li> <li>Cornelsen</li> <li>Der Freitag</li> <li>Der Spiegel</li> <li>Elsevier</li> <li>Folha de S.Paulo</li> <li>Heineken</li> <li>Junge Welt</li> <li>Jungle World</li> <li>Lamborghini</li> <li>Le Monde</li> <li>Metro</li> <li>Microsoft</li> <li>Ministerie van Verkeer en Waterstraat</li> <li>Ministerie van Landbouw, Natuurbeheer en Visserij</li> <li>Miele</li> <li>Nissan</li> <li>Panasonic</li> <li>TAZ, die Tageszeitung</li> <li>Victoria and Albert Museum</li> <li>Volkswagen</li> <li>Volvo</li> <li>Vorwerk</li> </ul> <h2 id="agency-partners">Agency Partners</h2> <p>We have also established long-term relationships with the following agencies:</p> <ul> <li>Edenspiekermann</li> <li>Kontrapunkt</li> <li>MetaDesign</li> <li>Studio Dumbar</li> <li>Summa</li> <li>TAXI Studio</li> </ul> Fri, 20 Jul 2018 18:23:32 +0200 https://lucasfonts.com/custom/clients https://lucasfonts.com/custom/clients The Thesis Project <figure class="right"><img src="/media/Thesis-Poster.svg" alt="" /><figcaption></figcaption></figure> <p>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 – <a href="/fonts/the-sans">TheSans</a>, <a href="/fonts/the-mix">TheMix</a> and <a href="/fonts/the-serif">TheSerif</a> – in an optically harmonious range of eight weights, including real italics for each weight.</p> <p>Thesis pioneered the concept of the all-purpose type system or <em>superfamily</em> which has since become such an important tool for the discerning typographer.</p> <figure class="right"><img src="/media/TheSans_Three-Widths_Sample.svg" alt="" /><figcaption>Three widths: TheSans, TheSans SemiCondensed and TheSans Condensed, all presented here in the ExtraBold weight.</figcaption></figure> <p>The Thesis family has been expanded over the years. <a href="/fonts/the-sans">TheSans</a> and <a href="/fonts/the-mix">TheMix</a> are now available in three widths: Normal, Condensed and SemiCondensed. In addition, three ultra-narrow widths for TheSans are available on demand.</p> <figure class="center"><img src="/media/Tagesschau-Rakers-144751.jpeg" alt="" /><figcaption>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.</figcaption></figure> <h2 id="thesans-offers-several-sub-families-for-specialized-uses">TheSans offers several sub-families for specialized uses:</h2> <ul> <li><a href="/fonts/the-sans-mono">TheSans Mono</a> A monospaced series for computer coding and similar uses.</li> <li><a href="/fonts/the-sans/normal#hair">TheSans Hair</a> A carefully balanced series of seven hairline weights for ultralight magazine and advertising headlines.</li> <li><a href="/fonts/the-sans-typewriter">TheSans Typewriter</a> A set of four typewriter-like fonts.</li> <li><a href="/fonts/package_details/thesansarabic-j4/the-sans/normal">TheSans Arabic</a> The Arabic-speaking version of TheSans.</li> </ul> <figure class="center"><img src="/media/VandA-Screenshot-March2019-for-Thesis-Page.png" alt="" /><figcaption>The Victoria &amp; 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.</figcaption></figure> <h2 id="languages">Languages</h2> <ul> <li>Arabic</li> <li>Central and Eastern European</li> <li>Cyrillic (including Bulgarian Cyrilic)</li> <li>Greek</li> <li>Latin Extended (including Vietnamese)</li> </ul> <figure class="center"><img src="/media/Science-Movies-Screenshot-February-2019_for-Thesis-Page.png" alt="" /><figcaption>The Volkswagen Foundations’s ScienceMovies website combined fonts from TheSans and TheSerif.</figcaption></figure> <figure class="center"><img src="/media/Uni-Maastricht-Zuiderlicht-2.jpg" alt="" /><figcaption>A campaign celebrating Maastricht University’s 40th Anniversary relied entirely on TheSans, and color!</figcaption></figure> Tue, 29 May 2018 18:28:29 +0200 https://lucasfonts.com/about/thesis https://lucasfonts.com/about/thesis