< letters
2024-04-26 00:00:00 UTC

Basic SVG import

paw


Only one small update has been released this week. Basic SVG support has been added. Now you can paste SVG from the clipboard. For example, copy an outline from an Illustrator or Figma and paste it into a typlr.

So far, not everything is working smoothly, for example, extra points may be created. But now they are highlighted in red — this means that two anchor points have the same coordinates.

***

I'll tell you a little bit about how the typlr.app works now.

You don't need to register to try the editor. A guest account is created automatically and linked to the browser by cookies. You can create as many fonts as you want, guest accounts and related fonts are deleted after a month.

email registration


It's super easy to register: just enter your email and click on the magic link in the mail. Or log in via a convenient social network.

glyphs panel

When a new font is created, it contains the minimum set of characters recommended by adobe (AGLFN) — in the future this option will change and you can choose different sets or create them from scratch yourself.

If the editor is opened in the browser for the first time, a text block is created with the default text "Hello World!" — if you are familiar with font editors, you will be familiar with this approach to editing. If you double—click on a letter, it will open for editing.

text tool


If you select the text tool, you can enter text from the keyboard or from the clipboard. And if you pull the right edge, change the width of the text block. So far, the text block does not support line wrapping, but such an opportunity has already been planned. You can move the text cursor to the right-left keys, and by clicking.

In text mode, you can create kerning pairs. The interfaces have not been finalized yet, but they are working on hotkeys in the style of the Glyphs.app. Option + Control (+Shift) + right or left key. Please forgive me for the Windows keys, my hands will get to them soon. To be honest, only a macOS is at hand ((

kerning


The rest of the tools should be familiar to you from the editors. The circle and rectangle draw the corresponding shapes, the hand drags the field of view and zooms. The pen draws the outline, and the dragging tool edits the outline, highlights it, rotates and scales it.

font settings


Font settings can be opened by clicking on the font name at the top left. Or on cmd+I — in the window that opens, you can change the font name and its metrics. The changes will be saved automatically and will be immediately visible in the edit window.

components


There is a panel on the left with all the glyphs. You can also add a new glyph there. There is a small feature with them that I haven't solved yet. If you double-click on the glyph in text mode, this symbol will be inserted where the cursor is, and if in edit mode, the component will be inserted.

The components themselves are still in their infancy. You can move them, but you will not be able to change the scale or rotate them.

glyphs panel


There is a preview panel at the bottom and a properties panel for the edited symbol. Everything is classic there: left side bearing, width, right side bearing, glyph name and unicode in decimal format — in the future it will be in hex and there will be several of them.

On the top right is an indicator that everything is OK and everything is synchronized with the server. And exporting the font to the trutype format.

context menu


The right mouse button opens the context menu, where there are several useful functions: add extremes to the selected contour, flip horizontally, vertically, expand the contour. You can also remove intersections — but this function is still blocked and requires more effort than it seemed.

I also work with standard hotkeys, select everything, copy, cut, paste. Canceling actions works well, but now not all actions are registered as changes, it will get better in the future.

cmd+G — show glyphs panel
cmd+P — show preview panel
cmd+I — show font settings panel
W — flip selected vertical
E — flip selected horizontal
cmd + = — zoom in
cmd + - — zoom out
cmd + 0 — 100% zoom
cmd + K — toggle kerning display
X — reverse selected path
C — close selected path
O — remove overlap

Do not forget, if you find any problems or come up with an improvement, there is a forum on the site.


***

Let's make fonts and editor for them 🖤

That's all for now, write to the mail: agasyanc@gmail.com