Highlighted

How do I set the font family to "sans-serif"?

Community Beginner ,
Apr 01, 2020

Copy link to clipboard

Copied

I'm trying to migrate my workflow from Inkscape to Illustrator, and I'm getting stuck on this simple task. 

 

For context, I'm trying to create SVG files for consumption on the web. Given that SVGs are vector formats, and that the web is prolific, I assume this is easy to do in Illustrator.

 

In Inkscape, if I want to create text, I can choose "sans-serif" as the font family, as a safe, platform-independent way of specifying that I want text in a san-serif font, without specifying a specific font (a specific font which may not be available on the machine rendering the SVG file). SVG files with this font style seem to render well everywhere, and the SVG is semantically sensible. For example, the viewer can select, copy & paste text, etc., and the text is rendered using the platform-specific font rendering engine, so font hinting, pixel alignment, etc. is consistent with other elements that the viewer is seeing on the page (none of which is true if I export the text as paths).

 

My question is simply: how do I do this in Illustrator?

 

Given that Inkscape is a free, open-source vector graphics editor, and Illustrator is an incredibly expensive, professional vector graphics editor, I have to assume that this simple objective is easily achieved in Illustrator if I was a little bit more familiar with it, but the answer has eluded me in my research so far. 

 

To summarize my requirements clearly:

 

  1. I want to create an SVG file in Illustrator. SVG is the vector graphics format for the web, and Illustrator seems to be a premium vector graphics editor for professionals.
  2. I want the SVG file to contain text in the form of a `text` element. Because it's text. Anything else (e.g. path elements) for text is semantically incorrect and comes at the cost of all sorts of things such as accessibility, ability to copy and paste, loss of sub-pixel rendering, font-hinting, etc. 
  3. I want the text to be sans-serif, and I want it to render as such on any compliant SVG renderer (e.g. browser). So I do not want to use proprietary or platform-specific fonts such as Arial or Helvetica. Ideally, I want this done by somehow styling the text as "font-family: sans-serif", but I will settle for other solutions if they exist.
  4. I do not want to use another post-processing tool (e.g. a text editor) to perform destructive mutations to the SVG code file every time I make changes to the original vector image.
  5. I do not want to embed a font into the SVG file if such an option exists. I want a clean and compact SVG file for web download.

 

Topics

Bug, Draw and design, Feature request, How to, Import and export, Type

Views

225

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

How do I set the font family to "sans-serif"?

Community Beginner ,
Apr 01, 2020

Copy link to clipboard

Copied

I'm trying to migrate my workflow from Inkscape to Illustrator, and I'm getting stuck on this simple task. 

 

For context, I'm trying to create SVG files for consumption on the web. Given that SVGs are vector formats, and that the web is prolific, I assume this is easy to do in Illustrator.

 

In Inkscape, if I want to create text, I can choose "sans-serif" as the font family, as a safe, platform-independent way of specifying that I want text in a san-serif font, without specifying a specific font (a specific font which may not be available on the machine rendering the SVG file). SVG files with this font style seem to render well everywhere, and the SVG is semantically sensible. For example, the viewer can select, copy & paste text, etc., and the text is rendered using the platform-specific font rendering engine, so font hinting, pixel alignment, etc. is consistent with other elements that the viewer is seeing on the page (none of which is true if I export the text as paths).

 

My question is simply: how do I do this in Illustrator?

 

Given that Inkscape is a free, open-source vector graphics editor, and Illustrator is an incredibly expensive, professional vector graphics editor, I have to assume that this simple objective is easily achieved in Illustrator if I was a little bit more familiar with it, but the answer has eluded me in my research so far. 

 

To summarize my requirements clearly:

 

  1. I want to create an SVG file in Illustrator. SVG is the vector graphics format for the web, and Illustrator seems to be a premium vector graphics editor for professionals.
  2. I want the SVG file to contain text in the form of a `text` element. Because it's text. Anything else (e.g. path elements) for text is semantically incorrect and comes at the cost of all sorts of things such as accessibility, ability to copy and paste, loss of sub-pixel rendering, font-hinting, etc. 
  3. I want the text to be sans-serif, and I want it to render as such on any compliant SVG renderer (e.g. browser). So I do not want to use proprietary or platform-specific fonts such as Arial or Helvetica. Ideally, I want this done by somehow styling the text as "font-family: sans-serif", but I will settle for other solutions if they exist.
  4. I do not want to use another post-processing tool (e.g. a text editor) to perform destructive mutations to the SVG code file every time I make changes to the original vector image.
  5. I do not want to embed a font into the SVG file if such an option exists. I want a clean and compact SVG file for web download.

 

Topics

Bug, Draw and design, Feature request, How to, Import and export, Type

Views

226

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Most Valuable Participant ,
Apr 01, 2020

Copy link to clipboard

Copied

All your questions can simply be answered with a big ugly Noooooooooooooooo. Adobe may have originated the SVG format, but Illustrator is just terrible at producing usable files. Stick to your guns, i.e. keep using Inkscape for producing web-compliant SVGs. Only create the basic artwork in AI and then import it into IS.

 

Mylenium

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Apr 01, 2020

Copy link to clipboard

Copied

With those requirements, why not continue using InkScape? Producing compliant SVG files is what it was designed for. It's not what Illustrator was designed for by a long shot.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Apr 01, 2020

Copy link to clipboard

Copied

Illustrator is not an SVG editor.

It can only export SVG (amongst a number of other file formats that don't support this kind of font specification)

 

I would suggest you post a feature request: http://illustrator.uservoice.com 

And maybe the engineers want to make it possible.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Community Beginner ,
Apr 01, 2020

Copy link to clipboard

Copied

Ok, it's disappointing that there's no way to do this. I've created a feature request here:

 

https://illustrator.uservoice.com/forums/333657-illustrator-feature-requests/suggestions/40076050-ad...

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Resources
Add a group