Skip to content

Set vertical metrics for better vertical centering in UI elements #273

Description

@arrowtype

Goal: set vertical metrics so that caps are perfectly vertically-centered.

This was done by setting the OS2TypoAscender and HheaAscender to 950, which sets the default "text" box in most apps so that the top is 250 units away from the cap height, which mirrors the value of 250 away from the baseline, set by descenders.

The winAscent value wasn't changed, because it should stay larger to prevent diacritics from being cut off in apps such as MS Word. (This still needs further testing).

https://github.com/arrowtype/recursive/blob/7f44c38836fbce2f368a3322ee005471c802f851/src/01-shell-scripts-for-sources/metrics/set-v_metrics.py

The images below show the result of the changed vertical metrics in the default layout of Recursive in Sketch, on macOS. This uses CoreText, the default text rendering on Mac, so the results will be similarly improved in apps like Keynote, etc.

image

image

image

Activity

  1. arrowtype commented on Dec 16, 2019

    @arrowtype
    OwnerAuthor

    This also has an effect on the web.

    Here are two screenshots from GitHub (type overridden using Type-X). The more-recent version of Recursive, 1.029, has much better vertical centering than 1.027.

    image

  2. added
    fixed in sourcesIssue is resolved in sources and is awaiting new build + release.
    on Dec 16, 2019
  3. arrowtype commented on Dec 20, 2019

    @arrowtype
    OwnerAuthor

    Released Beta 1.029

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    fixed in sourcesIssue is resolved in sources and is awaiting new build + release.

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions