Church-of-Crice / cationarytail

4 stars 8 forks source link

Create the dialog font (italics and some special characters & diacritics for expression) #28

Open jonathandavidlewis opened 5 days ago

jonathandavidlewis commented 5 days ago

italics and some special characters & diacritics for expression

Fonts directory: https://github.com/Church-of-Crice/cationarytail/tree/main/project/ui/fonts Fonts directory upload: https://github.com/Church-of-Crice/cationarytail/upload/main/project/ui/fonts

jonathandavidlewis commented 5 days ago

@mia-riezebos Can you add what you know about the dimensions of the font (specifications)? min / max height etc. into the description of the task? This will help others plan around spacing like words and lines in a dialog box.

mia-riezebos commented 5 days ago

@jonathandavidlewis Dialog font will be the smallest font (not counting outline/stroke) of all the fonts.

The x-height of the dialog font is 3px (lowercase o is 3x3 px), the ascender is 2px (uppercase letters will mostly be 5px tall), and the descender will be another 2px (the lowercase g, p, q, etc. will extend 2px below the bottom of say a lowercase o)}

At least this is what I had in mind so far.

jonathandavidlewis commented 5 days ago

@mia-riezebos is there a chance that this will be hard to read? Are you confident there will not be an accessibility issue, particularly for people who have any reading difficulty such as dyslexia or low vision?

Something like this would be challenging, for example: image

While this seems easier to read. I think it's 5px x-height? image

I don't make fonts, so looking for your expertise here.

jonathandavidlewis commented 5 days ago

The latest version of the font design:

image

mia-riezebos commented 5 days ago

image

mia-riezebos commented 5 days ago

While this seems easier to read. I think it's 5px x-height? image

I don't make fonts, so looking for your expertise here.

@jonathandavidlewis looks like a 4px x-height, but specifically the lowercase e has a descender that i dont really like.

jonathandavidlewis commented 5 days ago

@mia-riezebos No worries, we got your design.

mia-riezebos commented 5 days ago

To elaborate some concepts

Any part of a glyph that extends beyond the x-height (specifically in lowercase letters, since capital letters reside within the cap-height), is either an ascender or descender, depending on whether it extends up or down, respectively Ascenders_and_descenders Typically, ascenders extend either to the exact cap height or slightly above. Descenders typically extend down slightly less than ascenders extend up. This introduces a tiny bit more visual weight to the negative space between lines, making it more legible.