Skip to content

keep in mind

Rémy F edited this page Mar 6, 2022 · 2 revisions

Rendering inconsistency

Windows and MacOS font rendering are not consistent with they SVG rendering when glyph paths are overlapping.

OS overlay algorithm preview
SVG(reference) SVG
Linux/Chrome if inverted = XOR Linux
Android/Chrome if inverted = XOR Android
IOS/Safari if inverted = XOR IOS
W11/Chrome XOR W11
MacOS/Safari if inside = XOR MacOS

You can test your own platform using the #debug glyphs

OTF minimum grid

The minimum OTF grid size is 16x16 (which is why picon use a 16x16 grid while being designed for 8x8 rendering)

half-pixel positioning

To stay sharp at 8px, half-positioning (16x16 grid) might be required. For example, a triangle edges will become blurry if it vertex land between 2 pixels.

Solution: the vertex, is placed in the middle of the pixel:

image

Picon keep a 8x8 SVG grid since floating-point coordinate are possible in SVG. This allows most coordinates to stay on 1 digit [0-8] those, saving space.

Icon Orientation

Some icons use the same orientation, while some others don't.

Solution: use the same orientation (top-right bottom-left) for all icons. And remember that some of them will have a smaller icon at they side

composition

International

The following icon might be considered as "upstairs" but not for right-to-left reading countries:

stairs

Solution: Use an arrow

image

Clone this wiki locally