Icons for common MIME Types available in Data Registry

[tgeorgeux]

I'm looking to make a list of common MIME types we'll need icons for.

• text/csv
• application/rdf+xml
• text/richtext
• application/rss+xml
• application/sparql-query
• application/json
• application/x-latex

Do we have any need to represent data or video files at this point? Do any of those in the not make sense to include for now? Are there any obvious types missing?

I don't have a good feel for what MIME types will be considered 'common' in this use case, please help me populate this list.

[rd5802]

My Musts:

• excel (xls, xlsx)
• parquet
• txt
• hdf5

[tgeorgeux]

I found a resource that has a TON of mime type icons. It's not perfect in terms of following Material Design Guidelines, but there are a lot of very communicative icons in this set.

https://www.material-theme.com/docs/reference/file-icons/

[tgeorgeux]

I would move away from their color usage, but some of the folder based icons could really make sense for nested/database datasets.

It's also pretty cool that so many mime types are represented here.

[tgeorgeux]

Also, this list isn't all mimetype but many of these could be helpful.

https://github.com/file-icons/DevOpicons/blob/master/charmap.md

And this list is more mimetype focussed: https://github.com/file-icons/icons/blob/master/charmap.md

[SylvainCorlay]

Also you probably want icons that are pixel perfect at the same scales as the other jupyterlab icons.

[dhirschfeld]

VSCode icons might be useful? https://github.com/microsoft/vscode-icons

...maybe not mime-type related though.

[koliphan2]

So I looked around for icons that we might be able to use. Feedback? Data.Registry.Icons.xlsx

[saulshanabrook]

I think the ones we use currently are:

• Folder
• HDF5 File
• HDF5 Group (its like a folder?)
• Data grid
• Linked Data/metadata
• Code Snippet
• Cells & outputs in a notebook (could also be same as folder)

Often a dataset will have multiple of these, so we can set up a priority of them so we just show the first mimetype that matches.

[tgeorgeux]

As a quick catch up here to the work we've been doing in Figma here's an explanation of the current state of work.

We wanted to develop a set of icons based on rules that would allow us to generate future mimetype icons on an as-needed basis with as little overhead as possible. @tonyfast , @koliphan2 , and I worked on an alphabet we could use within the contraints of the Material Design Icon Specifications. The original alphabet we developed is here: Light mode Dark mode The idea here was to make the negative space regognizeable by having high contracts block filled with recognizeable text used consistently throught Rich Text efforts.

We wanted to explore more with this so we made a set of constraints, and went about exploring existing fonts we could use for this. The constraints:

• Look for fonts that have two variants for width: wide letter with skinny letter.
• Focus on Negative Space.
• Readable at 16px and 12px height.
• High contrast.
• Sans Serif, condensed/narrow variant.
• Try to reuse an existing typeface.
• Play with making the first letter larger.
• All caps works well.
  • ‘Big caps, small caps’ (Or wide caps narrow caps)
• Space for direction indicators.
• Space for notifications.
• Plays well with “chunky” shapes.

Using these I went through appropriate fonts on Google Fonts, working with only open source free fonts. The explorations to date:

As shown above we have narrowed the options down to 6 fonts. I'll make individual posts below about the state of each font for further discussion, in the meantime the 'final 6' fonts we're iterating on are: Roboto (Black) Lato (Bold or Black) Anton Ramabhadra Exo 2 (Bold or Extra Bold) Miriam Libre Teko

More to come.

[tgeorgeux]

Here is Roboto Black at sizes 10 and 15. As a reminder, the icons in question are Folder, HDF5, RDF, PDF, HDF5 Group, Data Grid, Linked/Metadata, Code Snippet, Notebook Cell, Notebook Output, CSV, and TSV, shown in both light and dark mode.

[tgeorgeux]

Lato bold size 14.

[tgeorgeux]

Anton, Regular, Size 16 and 10.

[tgeorgeux]

Ramabahdra, Regular, Size 10 & Size 11.

[tgeorgeux]

Miriam Libre, Bold, sizes 10 and 16.

[tgeorgeux]

Teko, Bold Sizes 12 and 16.

[tgeorgeux]

@ellisonbg , @telamonian , @tonyfast ,

Here are the 'final six' font's we're looking at. Please take a look over these (They aren't showing in the correct size, you'll have to click on each one for it to render in the size. There are a couple things to note:

Some of the larger letters overalp finishing the letter with negative space, do you like this look or not?

There's two styles here, one with overlapping letters, one with separate letters. I think the separate letters are more readable, but the overlapping letters are quicker to find while scanning if you're used to them, as they register in your brain as both shapes and letters. Please comment on your preference.

Some fonts that look good in dark mode don't look great in light mode and vice versa.

None of these are final, a little pixel-pushing will be required for each font.

Let me know which you think we should throw out, and why. Thanks!

[tgeorgeux]

Anton isn't particularly legible, specifically the N's look a bit like chunk H's I say we can cross that one out.

[tgeorgeux]

Here are the meeting minutes from our call about the final Icons:

Font Discussion

Link to Issue.

Notes

Issues to discuss

• Going outside the icon area (negative space)
  • Legibility is a concern
  • Needs to be recognizable
• Larger vs smaller fonts
  • In theory, we liked the larger format, in practice the smaller font size makes more sense.
  • Having space around the entire icon is useful for differentiating these icons as icons.
• 'reduced Kerning'
  • The concept is nicer than the application
  • not overly legible.
  • Work OK with ramabhadra.

Fonts

• Roboto
  • Pros
    • Legible
    • Flexible size
  • Cons
    • A bit thin
    • Too wide at larger sizes. (require reduced kerning)
• Lato

  • Pros

  • Cons
    • Ns are too slanty and wide.
    • Ligatures don't work well when kerning reduced (edges too sharp)
• Anton
  • Pros
  • Cons
    • Too chunky
    • Hard to read at smaller sizes.
• Rhamabhadra
  • Pros
    • Look OK with reduced kerning.
  • Cons
    • Not legible enough
• Miriam Libre
  • Pros
    • Very good shape
    • Flexible size
  • Cons
    • Letter change doesn't impact empty space enough to be recognizable.
• Teko
  • Pros
    • Legible
    • Good balance of letters.
    • High visual distinction between letters (Chunky)
    • Distinct visuals compared to common fonts like Roboto
  • Cons
    • x's are lower in this font compared to other fonts we tried.

[tgeorgeux]

Here's a draft of the icons for light mode using the Teko bold size 12.5

[ellisonbg]

Here is 13px Teko with a list of weights (bold is bottom, semi-bold is above that).

I think the semi-bold is worth trying from a legibility perspective. [image: Screen Shot 2019-10-30 at 3.24.23 PM.png]

On Thu, Oct 24, 2019 at 10:02 AM T. George [email protected] wrote:

[image: code] https://user-images.githubusercontent.com/22109376/67508166-54f48c80-f645-11e9-8a7d-31f8a072adde.png [image: csv] https://user-images.githubusercontent.com/22109376/67508167-54f48c80-f645-11e9-9a1e-f57abf038b36.png [image: datagrid] https://user-images.githubusercontent.com/22109376/67508168-558d2300-f645-11e9-8002-23a36b0f9bd1.png [image: folder] https://user-images.githubusercontent.com/22109376/67508169-558d2300-f645-11e9-9427-825158ecba02.png [image: hdf5] https://user-images.githubusercontent.com/22109376/67508170-558d2300-f645-11e9-9e8f-114939b9e296.png [image: hdf5group] https://user-images.githubusercontent.com/22109376/67508171-558d2300-f645-11e9-8903-b0b94aa5e70d.png [image: metadata] https://user-images.githubusercontent.com/22109376/67508172-5625b980-f645-11e9-9942-5f823533db2f.png [image: notebookcell] https://user-images.githubusercontent.com/22109376/67508173-5625b980-f645-11e9-9688-b6e5c3f6e397.png [image: notebookcelloutput] https://user-images.githubusercontent.com/22109376/67508174-5625b980-f645-11e9-87fb-2a899b1fadab.png [image: pdf] https://user-images.githubusercontent.com/22109376/67508175-5625b980-f645-11e9-8133-be013cdb3fc0.png [image: rdf] https://user-images.githubusercontent.com/22109376/67508177-5625b980-f645-11e9-9071-707e36fbceed.png [image: tsv] https://user-images.githubusercontent.com/22109376/67508178-56be5000-f645-11e9-9d3b-fa25b421bbf9.png

Here's a draft of the icons for light mode using the Teko bold size 12.5

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/jupyterlab/jupyterlab-data-explorer/issues/62?email_source=notifications&email_token=AAAGXUES7ZCTLHSU4AIVGVDQQHILNA5CNFSM4IKVOKWKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOECFXQWQ#issuecomment-546011226, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAGXUC24DS5I7KDHKZ2IDLQQHILNANCNFSM4IKVOKWA .

-- Brian E. Granger

Principal Technical Program Manager, AWS AI Platform ([email protected]) On Leave - Professor of Physics and Data Science, Cal Poly @ellisonbg on GitHub

[tgeorgeux]

@ellisonbg that image didn't render on my end.

[ellisonbg]

Trying again...

[telamonian]

👍 for semi-bold and the slight reduction in (though not elimination of) chunkiness

[tgeorgeux]

Ah, thanks.

So we did look at the semibold during our final video call about this, the reasons we went away from semi-bold are mostly due to how the size fits the edge of a pixel when rendered on lower resolution monitors. It's less of a problem on Retina displays as you get 1/2 pixel renders. I've blown up the icons, with my assessment of which fits 'within' the pixels better. Bear in mind, text rendered as text will render differently than text rendered as an image.

Here are the relevant icons. This isn't an exhaustive list, but it's a place to start. For each of these the top is Teko Bold 12.5, and the bottom is Teko Semibold 13, so compare each icon with the one below it, looking for how much of the boundary regions are covering a fraction of a pixel:

[ellisonbg]

But Teko is not monospaced, so all of this will entirely depend on the letters being used. I don't see any way to get px perfect boundaries with a variable width typeface.

On Wed, Oct 30, 2019 at 3:56 PM T. George [email protected] wrote:

Ah, thanks.

So we did look at the semibold during our final video call about this, the reasons we went away from semi-bold are mostly due to how the size fits the edge of a pixel when rendered on lower resolution monitors. It's less of a problem on Retina displays as you get 1/2 pixel renders. I've blown up the icons, with my assessment of which fits 'within' the pixels better. Bear in mind, text rendered as text will render differently than text rendered as an image.

Here are the relevant icons. This isn't an exhaustive list, but it's a place to start. For each of these the top is Teko Bold 12.5, and the bottom is Teko Semibold 13, so compare each icon with the one below it, looking for how much of the boundary regions are covering a fraction of a pixel: [image: Frame 5] https://user-images.githubusercontent.com/22109376/67905084-8d0c3b80-fb2d-11e9-9968-e75ec88e3ef0.png [image: Frame 6] https://user-images.githubusercontent.com/22109376/67905085-8d0c3b80-fb2d-11e9-8e7c-59f311df6f54.png [image: Frame 7] https://user-images.githubusercontent.com/22109376/67905086-8d0c3b80-fb2d-11e9-89f0-419183eaa3e4.png [image: Frame 8] https://user-images.githubusercontent.com/22109376/67905087-8da4d200-fb2d-11e9-829c-9345fab5b10e.png

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/jupyterlab/jupyterlab-data-explorer/issues/62?email_source=notifications&email_token=AAAGXUGYP6VBR6FGA2UTGBLQRIGJDA5CNFSM4IKVOKWKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOECWA7NQ#issuecomment-548147126, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAGXUDQJHEPOFBL43M53ELQRIGJDANCNFSM4IKVOKWA .

-- Brian E. Granger

Principal Technical Program Manager, AWS AI Platform ([email protected]) On Leave - Professor of Physics and Data Science, Cal Poly @ellisonbg on GitHub

[tgeorgeux]

I don't think anybody here was claiming this was a pixel-perfect boundary, let's take a look:

Which of these do you find more legible, tops or bottoms?

[ellisonbg]

I have two monitors - a Retina resolution MacBook Pro and an external monitor that is higher than 1080p, but still lower that Retina. I also tried with my normal and computer glasses on. Overall the semi-bold is more legible. However, with my computer glasses on, the bold is "legible enough". With my normal glasses I am right at 20/20.

On Thu, Oct 31, 2019 at 11:11 AM T. George [email protected] wrote:

I don't think anybody here was claiming this was a pixel-perfect boundary, let's take a look:

[image: csv-trial] https://user-images.githubusercontent.com/22109376/67973522-e330bb80-fbcd-11e9-9683-b497c070e123.png [image: csv] https://user-images.githubusercontent.com/22109376/67973523-e330bb80-fbcd-11e9-98a3-a571e5cbb57c.png

[image: tsv-trial] https://user-images.githubusercontent.com/22109376/67973537-e4fa7f00-fbcd-11e9-9c59-4ab4124f769e.png [image: tsv] https://user-images.githubusercontent.com/22109376/67973539-e4fa7f00-fbcd-11e9-9134-e09df2691cc2.png

[image: notebookcelloutput-trial] https://user-images.githubusercontent.com/22109376/67973531-e461e880-fbcd-11e9-9e51-d7f6ba62f7be.png [image: notebookcelloutput] https://user-images.githubusercontent.com/22109376/67973532-e461e880-fbcd-11e9-8620-3b1780f37499.png

[image: pdf--trial] https://user-images.githubusercontent.com/22109376/67973533-e461e880-fbcd-11e9-830d-09df83093a9b.png [image: pdf] https://user-images.githubusercontent.com/22109376/67973534-e461e880-fbcd-11e9-8571-06120b1b1d7f.png

[image: rdf-trial] https://user-images.githubusercontent.com/22109376/67973535-e461e880-fbcd-11e9-9baf-ac64e1791c99.png [image: rdf] https://user-images.githubusercontent.com/22109376/67973536-e4fa7f00-fbcd-11e9-9a3e-5e4dafb6a133.png

[image: hdf5-trial] https://user-images.githubusercontent.com/22109376/67973524-e330bb80-fbcd-11e9-8992-ea2e51beef88.png [image: hdf5] https://user-images.githubusercontent.com/22109376/67973525-e330bb80-fbcd-11e9-8600-34a1fb840a1f.png

[image: hdf5group-trial] https://user-images.githubusercontent.com/22109376/67973526-e3c95200-fbcd-11e9-87bd-f3bab3db0b59.png [image: hdf5group] https://user-images.githubusercontent.com/22109376/67973527-e3c95200-fbcd-11e9-9e70-5d37cfc7df1f.png

[image: notebookcell-trial] https://user-images.githubusercontent.com/22109376/67973528-e3c95200-fbcd-11e9-893a-2edb5d622cf1.png [image: notebookcell] https://user-images.githubusercontent.com/22109376/67973529-e3c95200-fbcd-11e9-87f7-dc742e418a5f.png

Which of these do you find more legible, tops or bottoms?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/jupyterlab/jupyterlab-data-explorer/issues/62?email_source=notifications&email_token=AAAGXUBKTKMUAVFQUXN4AVDQRMNUNA5CNFSM4IKVOKWKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOECYXVWQ#issuecomment-548502234, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAGXUGY2MFV7NUVMPXVXHLQRMNUNANCNFSM4IKVOKWA .

-- Brian E. Granger

Principal Technical Program Manager, AWS AI Platform ([email protected]) On Leave - Professor of Physics and Data Science, Cal Poly @ellisonbg on GitHub

[ellisonbg]

An aside - I think this typeface at this size works well in the square icon but in the other 2 cases (in the folder icon shape, the NB with the other stuff) it starts to be too cramped.

On Thu, Oct 31, 2019 at 11:22 AM Brian Granger [email protected] wrote:

I have two monitors - a Retina resolution MacBook Pro and an external monitor that is higher than 1080p, but still lower that Retina. I also tried with my normal and computer glasses on. Overall the semi-bold is more legible. However, with my computer glasses on, the bold is "legible enough". With my normal glasses I am right at 20/20.

On Thu, Oct 31, 2019 at 11:11 AM T. George [email protected] wrote:

I don't think anybody here was claiming this was a pixel-perfect boundary, let's take a look:

[image: csv-trial] https://user-images.githubusercontent.com/22109376/67973522-e330bb80-fbcd-11e9-9683-b497c070e123.png [image: csv] https://user-images.githubusercontent.com/22109376/67973523-e330bb80-fbcd-11e9-98a3-a571e5cbb57c.png

[image: tsv-trial] https://user-images.githubusercontent.com/22109376/67973537-e4fa7f00-fbcd-11e9-9c59-4ab4124f769e.png [image: tsv] https://user-images.githubusercontent.com/22109376/67973539-e4fa7f00-fbcd-11e9-9134-e09df2691cc2.png

[image: notebookcelloutput-trial] https://user-images.githubusercontent.com/22109376/67973531-e461e880-fbcd-11e9-9e51-d7f6ba62f7be.png [image: notebookcelloutput] https://user-images.githubusercontent.com/22109376/67973532-e461e880-fbcd-11e9-8620-3b1780f37499.png

[image: pdf--trial] https://user-images.githubusercontent.com/22109376/67973533-e461e880-fbcd-11e9-830d-09df83093a9b.png [image: pdf] https://user-images.githubusercontent.com/22109376/67973534-e461e880-fbcd-11e9-8571-06120b1b1d7f.png

[image: rdf-trial] https://user-images.githubusercontent.com/22109376/67973535-e461e880-fbcd-11e9-9baf-ac64e1791c99.png [image: rdf] https://user-images.githubusercontent.com/22109376/67973536-e4fa7f00-fbcd-11e9-9a3e-5e4dafb6a133.png

[image: hdf5-trial] https://user-images.githubusercontent.com/22109376/67973524-e330bb80-fbcd-11e9-8992-ea2e51beef88.png [image: hdf5] https://user-images.githubusercontent.com/22109376/67973525-e330bb80-fbcd-11e9-8600-34a1fb840a1f.png

[image: hdf5group-trial] https://user-images.githubusercontent.com/22109376/67973526-e3c95200-fbcd-11e9-87bd-f3bab3db0b59.png [image: hdf5group] https://user-images.githubusercontent.com/22109376/67973527-e3c95200-fbcd-11e9-9e70-5d37cfc7df1f.png

[image: notebookcell-trial] https://user-images.githubusercontent.com/22109376/67973528-e3c95200-fbcd-11e9-893a-2edb5d622cf1.png [image: notebookcell] https://user-images.githubusercontent.com/22109376/67973529-e3c95200-fbcd-11e9-87f7-dc742e418a5f.png

Which of these do you find more legible, tops or bottoms?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/jupyterlab/jupyterlab-data-explorer/issues/62?email_source=notifications&email_token=AAAGXUBKTKMUAVFQUXN4AVDQRMNUNA5CNFSM4IKVOKWKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOECYXVWQ#issuecomment-548502234, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAGXUGY2MFV7NUVMPXVXHLQRMNUNANCNFSM4IKVOKWA .

-- Brian E. Granger

Principal Technical Program Manager, AWS AI Platform ([email protected]) On Leave - Professor of Physics and Data Science, Cal Poly @ellisonbg on GitHub

-- Brian E. Granger

Principal Technical Program Manager, AWS AI Platform ([email protected]) On Leave - Professor of Physics and Data Science, Cal Poly @ellisonbg on GitHub

[saulshanabrook]

The bottom is more legible to me. I don't mind mind the folder crampedness.

[tgeorgeux]

Here's a slightly less cramped version of Notebook Cell