google / fonts

Font files available from Google Fonts, and a public issue tracker for all things Google Fonts
https://fonts.google.com
18.25k stars 2.62k forks source link

Big list of improvement suggestions for the Google Fonts web UI and a conceptual revamp idea #1317

Open thevangelist opened 7 years ago

thevangelist commented 7 years ago

I was told on Twitter to post my suggestions here.

Backstory

I love to use Google fonts, but somehow I find the UI lacking some of the features I'd like to see. I am a big fan of randomizing stuff, and ending up to a satisfiable solution by this way.

I have been brainstorming and PoCcing a version of my own of an everything-but-the-kitchensink web app, that a user could use to randomize and generate typeface design combinations with ease for various usage scenarios. In short - a single site that could help you to tweak and adjust the font parameters in way, that you wouldn't need to resort to Adobe products or so. Including the layout designs.

WIPPY prototypes

I

*Typographer v1: https://lepovirta.github.io/Typographer/

screen shot 2017-11-11 at 11 13 59 am

This was my initial version made with KO.js. It's 3% finished and using a fixed list of GF fonts.

II

screen shot 2017-11-11 at 11 14 19 am

This is my second version made with React.js. It's about 3% finished as well - it's using GF API.

Later thoughts

Those two prototypes were left pretty much unfinished - As I realized how much work from a single person it'd take to add "all" the possible typeface parameters and layout combinations. On the other hand I have successfully generated working typeface combinations with them - I use them still today. I usually go to GF site or II version of my Typographer to find great typeface combinations -- rarely to Adobe Typekit or any other site.

I've gotten interested in type again and I have found some interesting projects that are trying to solve the same idea in some manner, for example: http://kyleamathews.github.io/typography.js/ & http://fontjoy.com/ & http://www.modularscale.com/ & http://paletton.com/#uid=602050kgar486z0bKumkOnforkB ... all of these projects are basically aiming towards a unified goal: A single page that could combine all possible things affecting typeface selection

The core idea

My own projects and these two newfound projects are a great inspiration for me, and I wanted to contribute designing and giving ideas to GF page. As you probably have a larger developer / designer crew to implement possibly some of my ideas.

So here it goes, some ideas for tweaking Typefaces for layout design (TL;DR;)

As a graphic designer I wish to...

Outro

The ideas are in no particular order. The main conceptual idea is to create a responsive web-application, that gathers fonts from multiple sources (if possible) and then allows users to trial out different typefaces and their combinations by A) randomization B) designer selection C) AI help D) community upvoted. This would become a sort of a social media for typeface selection , containing lots of user-generated content, such as "try this layout designed by user12342" - allowing the current user to adjust all possible parameters of the layout.

In a way the idea may be far off - or too vast. But I guess by understanding the actual typeface designer needs, the main features could be prioritized on backlog and bad ideas filtered out.

In order to get inspired more, just look at how print media works. There are no limitations of the web there, and thus the design is usually far out. But as the history has proven, there's always going to be technological advancements in design, that lead to a new potential. Consider for example box-shadows in web - they were used a LOT when possible - and now the designs with them are subtle, instead of "show off" style. Web shall provide even more layout options for traditional design styles (consider CSS Grid for example), and we as designers should have an easy pipeline for generating typeface combinations and take advantage of them.

Type, along with color and general layout will remain as one of the focal points in all designs in the future as well!

The design of the page itself could continue from the current point of Google Fonts, as some of those features are pretty easily added to the current version.

Hopefully you got inspired!

Contact me via Twitter or so if you wish to ask elaborating questions or so: https://twitter.com/esajuhana

davelab6 commented 6 years ago

@thevangelist thanks for posting all these ideas! I've included links to your apps in our TRIVIA file (https://github.com/google/fonts/commit/4c3e95c802f8f12b78869ff50d552014de63f9c1) and I'm filing this into the Directory milestone so that next time we review contributed ideas for the directory we'll take a closer look at all these great ideas :)

thevangelist commented 6 years ago

No problem @davelab6!