PLANET QUARK

by Quark users for Quark users

Category: QuarkXPress 2018

OpenType features in HTML5 (ligatures etc.)

April 4, 2018April 5, 2018Digital Publishing, QuarkXPress 2018, TypographyNo Comments

Can you use OpenType features in HTML5?

Yes, most modern browsers support OpenType features such as ligatures:

https://caniuse.com/#search=ligatures

Does QuarkXPress allow you to use OpenType features in HTML5?

Yes, starting with QuarkXPress 2018, OpenType features such as ligatures can also be used in live text in Digital layouts. Before QX2018 this was restricted.

If you haven’t tried it, QuarkXPress can create pixel perfect Digital layouts that you can export as HTML5 and create a flip-book style HTML5 Publication. Either static or with rich interactivity. You can also easily convert Print layouts to Digital layouts.

It’s easy to apple OpenType in Digital layouts:

  1. Create a Digital layout via “File > New > Project” (Command+N) and choose “Digital”.
    (Alternatively you can convert a Print layout to a Digital layout.)
  2. In Preferences make sure that you enabled “OpenType support for Digital”.
  3. Use a font that has OpenType features such as ligatures.
  4. Export as HTML5 (or ePub or native app)
Preference to enable OpenType support for HTML5
Preference to enable OpenType support for HTML5

Example

In QuarkXPress create a text box and use a font that offers OpenType features. This example uses the Vollkorn font, a free typeface: http://vollkorn-typeface.com/

 

This is how it looks like in QuarkXPress 2018.

Top of the table: On the left side the ligature feature has been applied in QuarkXPress, on the right side it hasn’t.

Lower part of the table: See other features like kerning applied or Oldstyle numbers and real fractions.

iPhone layout in QuarkXPress 2018

 

When you export, this is how it will look like (here: Safari 11.1):

Exported layout in browser

 

(Please note in above screenshot that you can select the individual letters of the ligature!)

Of course this will work in other browsers too, like Chrome or Firefox, on Android, iOS, MacOS and Windows.

Live Example

If you want to see the live example in your own browser, please click here:

http://www.quarkforums.com/resources/2018/Ligatures

Does it work in your browser? Let me know please.

Bottom line

Now that all modern browser and QuarkXPress support OpenType functionality in HTML5, you can use rich typography both in Print and HTML5 publications. Use it in Web Apps (HTML5 Publications), ePubs or native apps (that use HTML5 for content).

Nice side effect: If you plan to replicate your print layout as a digital layout and you have used OpenType features, then your HTML5 Publication will look the same as the print layout and stays live text (searchable, no image).

Matthias Guenther

Both an engineer and a layout artist, Matthias bridges the gap between technology and people.

Before joining Quark, Matthias pioneered print, Web, and multimedia products for multiple German publishing companies. Since 1997 he has played a central role in shaping Quark’s desktop and enterprise software.
Starting 2003 Matthias has focused on Quark’s interactive and digital publishing solutions. He is an active participant in design and publishing communities and represents Quark in the Ghent PDF Workgroup.

Since February 2014 Matthias heads Quark’s Desktop Publishing business unit and is therefore responsible for QuarkXPress.

https://twitter.com/HamburQ

QuarkXPress is first to create a single PDF compliant to PDF/A AND PDF/X-4

March 2, 2018March 28, 2018How-to, QuarkXPress 2018No Comments

When creating PDF often two requirements seem to clash:

  1. The PDF needs to be printed (so ideally PDF/X-4)
  2. The PDF needs to be accessible (tagged) and to be archived (so PDF/A)

Why not create two PDF files (one /A and one /X)?

Sure, you could. It’s asking for trouble though, as you archive something that you didn’t print. And you would have to always keep two files.

Why not create a single PDF that complies to both standards?

That is ideal.

And QuarkXPress 2018 is the first graphic app for creative pro’s to create a SINGLE PDF that complies to both standards, PDF/A-2u and PDF/X-4, at the same time. So you can print them and archive them and they are accessible.

QuarkXPress 2018 offers an output setting that create one PDF complying to both PDF/X-4 and PDF/A.
Matthias Guenther

Both an engineer and a layout artist, Matthias bridges the gap between technology and people.

Before joining Quark, Matthias pioneered print, Web, and multimedia products for multiple German publishing companies. Since 1997 he has played a central role in shaping Quark’s desktop and enterprise software.
Starting 2003 Matthias has focused on Quark’s interactive and digital publishing solutions. He is an active participant in design and publishing communities and represents Quark in the Ghent PDF Workgroup.

Since February 2014 Matthias heads Quark’s Desktop Publishing business unit and is therefore responsible for QuarkXPress.

https://twitter.com/HamburQ

Webinar showing major features of QuarkXPress 2018

March 1, 2018March 3, 2018QuarkXPress 2018, Video TutorialNo Comments

Quark today announced the upcoming Version 2018, the next major version of QuarkXPress.

In this 39 min long webinar, I am showing the highlights of QuarkXPress 2018, like Color Fonts, JavaScript based on V8, Hyphenation Strictness, the new PDF Engine, PDF/A export, creating tagged PDF, unlimited Android Single App creation and more:

https://youtu.be/y7nj6qyTGLw

QuarkXPress 2018 Webinar (39 minutes)

QuarkXPress 2018 will be officially released on May 16, 2018.

 

Matthias Guenther

Both an engineer and a layout artist, Matthias bridges the gap between technology and people.

Before joining Quark, Matthias pioneered print, Web, and multimedia products for multiple German publishing companies. Since 1997 he has played a central role in shaping Quark’s desktop and enterprise software.
Starting 2003 Matthias has focused on Quark’s interactive and digital publishing solutions. He is an active participant in design and publishing communities and represents Quark in the Ghent PDF Workgroup.

Since February 2014 Matthias heads Quark’s Desktop Publishing business unit and is therefore responsible for QuarkXPress.

https://twitter.com/HamburQ

Color Fonts – the next big thing in typography

February 24, 2018March 23, 2018Font, QuarkXPress 2018, TypographyNo Comments

Since the introduction of OpenType fonts, there hasn’t been a big change in typography. Until color fonts emerged. Their birth probably was in 2010 when Apple added colorful emoji, which we all have been using since on our mobile.

However – due to the lack of color fonts – designers have always been using colorful fonts; mostly by taking an existing font and converting it to boxes and then changing its shape, its outline, adding colors or blends. So they weren’t fonts anymore but looked like type.

“Stroke text” is another use case where designers add a colorful border to live text, often also even dashed or stripped. And working around the issue that kerning and overlapping suddenly needed to be adjusted.

If you want to read more color fonts (or chromatic type) – which are not new; the first production types appeared in the 1840 – then read  more about it here: https://ilovetypography.com/2017/04/03/the-evolution-of-chromatic-fonts/

Color fonts save time!

“For designers, Color Fonts are gold!

Think of the time you had to spend in the past taking a plain font shape and then running it through lots of filters and other steps to get a chiseled look; brush strokes, wood, etc.

Now you just type!”

– Kurt Lang, JKL Studios, when pre-release testing color fonts in QuarkXPress 2018

Color fonts represent a key evolution in typography. They add rich graphic features into font files. And as they behave like standard fonts, once design applications support them, they are easy to use and easily accessible for millions of creatives.

And they are fun!

Color fonts can impact any type of text, can contain multiple colors, shades, textures, blends and transparency. And even animations (ok, now that’s hard to print ;-)

Are there different formats for color fonts?

Yes. There are four different formats and some formats support both vector and bitmap:

Color Font formatBitmap?Vector?Format?
Apple SBIX✔Proprietary
Google CBDT✔Proprietary
Microsoft COLR✔Based on OpenType
W3C SVG
(OpenType SVG)
✔✔Based on OpenType

All modern browsers support some format of color fonts, but not all. For example, Google’s CBDT is only available in Chrome on Android.

Which creative pro applications for print design support Color Fonts?

Full support in Illustrator CC 2018, Photoshop CC 2018 and QuarkXPress 2018

Photoshop CC 2017 was the first application to support bitmap color fonts. With the release Photoshop CC 2018 also vector color fonts are supported.

Illustrator CC 2018 is the first version of Illustrator to support color fonts, both vector and bitmap.

And QuarkXPress 2018 is the first version of QuarkXPress to fully supports color fonts, both bitmap and vector; in the formats SVG, SBIX and COLR.

Experimental support in InDesign

InDesign CC 2018 added experimental color font support, Adobe calls it a “technology preview feature”. According to a blog entry from Adobe there seems to be output issues with Color Fonts in InDesign: https://helpx.adobe.com/indesign/kb/ot-svg-color-fonts.html

Color Font format support by application

ApplicationOpenType SVG VECTOROpenType SVG BITMAPApple SBIXMicrosoft COLR
(last updated March 14, 2018)
Adobe Illustrator CC 2018✅ – YES✅ – YES✅ – YES❌ – No
Adobe InDesign CC 2018💤 Experimental💤 Experimental💤 Experimental❌ – No
Adobe Photoshop CC 2018✅ – YES✅ – YES✅ – YES❌ – No
Affinity Designer 1.6❌ – No❌ – No❌ – No❌ – No
Affinity Photo 1.6❌ – No❌ – No❌ – No❌ – No
Pixelmator 3.7❌ – No✅ – YES✅ – YES❌ – No
QuarkXPress 2018✅ – YES✅ – YES✅ – YES✅ – YES

Can I use them in Print and Web?

Yes. In digital publishing (browsers, apps), color fonts have been around for a while. We all use them (e.g. emoticons).

In Print – if the application fully supports it – color fonts can be used too, colors are RGB and can be color managed using ICC-based color management. Similar to how an RGB image is color managed.

Where can I get some color fonts?

Here are some 100+ sample color fonts to download:

The Typodermic Color Font Experiment

Please read their license agreement first.

More fonts can be found here:

https://creativemarket.com/blog/color-fonts

Enjoy!

More background info

  • http://colorfonts.wtf/
  • https://msdn.microsoft.com/en-us/library/windows/desktop/mt765165(v=vs.85).aspx
  • https://helpx.adobe.com/typekit/using/ot-svg-color-fonts.html
  • https://pixelambacht.nl/2014/multicolor-fonts/
  • https://blog.fontlab.com/font-tech/color-fonts/color-font-format-proposals/

The article “Color Fonts – the next big thing in typography” appeared first on planetquark.com

 

Matthias Guenther

Both an engineer and a layout artist, Matthias bridges the gap between technology and people.

Before joining Quark, Matthias pioneered print, Web, and multimedia products for multiple German publishing companies. Since 1997 he has played a central role in shaping Quark’s desktop and enterprise software.
Starting 2003 Matthias has focused on Quark’s interactive and digital publishing solutions. He is an active participant in design and publishing communities and represents Quark in the Ghent PDF Workgroup.

Since February 2014 Matthias heads Quark’s Desktop Publishing business unit and is therefore responsible for QuarkXPress.

https://twitter.com/HamburQ

Categories

Sponsored

Recent News

  • See which OpenType features (like ligatures) or kerning are supported by modern browsers (Chrome, Edge, Firefox, Safari) and how to easily add them to your HTML5 Publication. Test a live example.
  • QuarkXPress 2018 is first graphic application for creative pro's to create a single PDF file, which is compliant to both, PDF/A and PDF/X-4.
  • Quark announced today the upcoming availability of QuarkXPress 2018, the next new full version of Quark’s graphic design and page layout software. Coming on May 16, 2018!
  • See the highlights of QuarkXPress 2018 in this webinar, like Color Fonts, JavaScript based on V8, Hyphenation Strictness, the new PDF Engine, PDF/A export, creating tagged PDF, unlimited Android Single App creation and more. QuarkXPress 2018 will be released May 16, 2018.
  • Color fonts are the next big thing in typography. See some examples how to use them and read about the different format available like OpenType SVG. Also learn whether Affinity Designer, Affinity Photo, Illustrator, InDesign, Pixelmator and QuarkXPress support them.
  • One of the best summaries about font usage, font management and how to solve font issues on MacOS is this article by Kurt Lang. It is a must-read for everyone.
  • IDML template example
    An independent view on why QuarkXPress' "InDesign Import" (IDML Import) feature is important and what it means for the industry.

How to quickly convert PDF to editable objects:

Most popular posts this week

  • How to discover the UDID of an iPad without having iTunes 58.83 views per day
  • 132 ppi? 72 dpi? 144? 264 ppi? What image resolution should you use for the new iPad with Retina display? 16.50 views per day
  • Use Adobe Reader as Presentation Tool 15.50 views per day
  • The Correct Use of Apostrophes in Dates 15.00 views per day
  • See Everything Your Mac Printed 14.50 views per day
  • How to open older QuarkXPress Documents 12.83 views per day
  • Fantastic Color Guide for Printing Uncoated CMYK 10.33 views per day

Tags

Apple App Studio AVE Publishing Business models color Digital Publishing eBooks El Capitan ePub exporting Flash Font html HTML5 HTML5 Publications IDML images integration iPad iphone layout long docs macOS OS X PDF printing QID QuarkXPress QuarkXPress 7 QuarkXPress 8 QuarkXPress 9 QuarkXPress 10 QuarkXPress 2015 QuarkXPress 2016 QuarkXPress 2017 QuarkXPress 2018 QuarkXPress Document Converter Read Review Self Publishing tables text Tip Typography Video Tutorial
Proudly powered by WordPress | Theme: Doo by ThemeVS.
This website uses cookies to improve your experience on our website. By continuing to browse this site you are agreeing to our use of cookies. You can disable cookies in your browser settings at any time.Accept CookiePrivacy Policy