32
When you open the TTF webfont in use on Google websites, you get some metadata and a link to this URL:
https://www.google.com/fonts/license/productsans
It says:
Google offers
many fonts on open source terms. This is not one of them. Please see
www.google.com/fonts.
31
Arimo (see samples above and below) is identical to Liberation Sans (suggested by Yisela) and available from Google Fonts.
The following font stack includes Arimo and suppresses the substitution of Arial for Helvetica on Windows machines and WebKit browsers, but otherwise puts the most Helvetica-Neue-like fonts first:
"Helvetica Neue", HelveticaNeue, "...
22
I've been wondering that myself.
First, "500" doesn't seem to indicate how many colors there are, but the weird numbering system they use. 500 is the base, 400 is lighter than the base, 600 is darker. That's pretty similar to how font-weights are numbered (info) so maybe that has something to do with it.
I've found that some of the numbers less than 500 ...
22
That's the thing about Helvetica, there isn't really anything quite like it. We are talking about one of the (if not the) most beautiful font in existence.
You could settle for Open Sans or Source Sans Pro but it won't be the same. But you probably already know that as there are only 121 fonts to choose from.
19
It's not in Google fonts (I think), but the .ttf can easily be converted for @font-face. I find Liberation Sans really beautiful. Plus it renders REALLY well in most browsers, and it's free for personal and commercial use:
http://www.dafont.com/liberation-sans.font
16
I just tried the "Roboto" font and it seems OK:
16
It's completely fine to use them. Google Fonts are all open source, so you can use them for whatever you like.
However, they are mostly screen fonts. In other words, they're mostly designed to look decent on a display. They have big lower-case letters, wide spacing between characters, no fine strokes that wouldn't render on screen and so on. Most are sans-...
15
I'd probably call these type of illustrations 'vector illustrations', because they look like, at least regarding the original source files, they could be scaled up easily. If I were looking for them, to use on for example on a website, I might also search for the term "flat".
You can use different programs to make them, if you are looking for a free ...
14
Decide where your light source is, and stick to that. As you look closer at all icons in the example, they have their light source at 315°—top left. All shadows and shading obey that light source.
In your icon, the dark left page suggests the light coming from 270°—left, yet the shading on the green and red pages suggest a light source ...
13
I'm going to leave this here because it is new information on the topic.
https://www.youtube.com/watch?t=73&v=xYkz0Ueg0L4
Published on May 28, 2015
A little rusty on your color theory? Material design makes color easy. Find out more about color and material design at www.google.com/design.
ETA:
The primary colors, (the 500) are colors that Google ...
12
The first thing to say, is that I want to be honest and I'm affiliate to the software I present bellow (I'm the software designer/programmer of this font identification engine) and I'm really proud about it :)
It's not an online service but a software application that runs on your Mac or Windows PC:
http://www.findmyfont.com
It takes as input a Text image ...
9
I think you were on the right track with your watermarking option, but you left too much of the original image in tact. Here are two images I tried that Google was unable to find:
Checkerboard
Reverse image search results
Mosaic
Reverse image search results
Another example
Reverse image search results
The first image returns a lot of "checkered flag" ...
9
Google may use a different system but a large number of such services (tineye included) use perceptual hashes where the overall hash is close enough to be a match, rather than exact.
A whitepaper showed up a few years back which detailed the process. I haven't been able to find a link to it, but the basic system relies on a action chain to generate the ...
9
The below was done in Illustrator but could be done in Photoshop.
First create your object. For the demonstration I am using a linear gradient. You can mess around with a gradient mesh for more complex shapes. I set the right side to have the color and the left to 0% opacity.
Select your gradient and go to Effect - Texture - Grain
Mess around with the ...
8
This method works flawlessly for me.
Upload your images/icons to Google Drive
Open it with CloudConvert
Choose export format : vector / emf.
Make sure that you have the checkbox to save the converted file to your Google Drive
Click on button Start conversion.
Open emf file with Google Drawing
Copy/paste SVG icon into your Slides.
you can modify the ...
7
This is a good question the GUI has no indication on what that means. However your hunch that its size in compressed KB does seem to be quite close. I would tip this is the correct answer.
How do i reach this conclusion? Well if I unpack 2 fonts and save them and zip the result I get windows to say that the two fonts zipped use up:
119 KB versus Google's ...
7
To get the arch of the R above the crossbar of the T, I imagine. The E and A are lower and rounded, so the R fits into their negative space, but the T pokes to the left.
It's really noticeable. It's irritating my eye quite a bit. The designer(s) did not do a good job with that ligature pair.
answered May 10 '18 at 9:35
Lauren-Clear-Monica-Ipsum
20k7 gold badges57 silver badges96 bronze badges
6
Try this one (although it is not yet complete for all the Google fonts):
http://joelcrawfordsmith.com/closest-font/
6
Perhaps you've already found this resource, but Google has put together an incredibly handy guide to help developers and designers sync up with the new Material vibe.
The whole guide can be found here - http://www.google.com/design/spec/material-design/introduction.html#
Specifically, this page makes all their favorite colors available for download - http:...
6
Some simple google search gave me the Guidelines for using Noto, and in there you find:
For an Arabic website that needs to use an UI font for UI elements, such as buttons and tabs, that have more strict vertical space.
The design of Noto UI fonts are adjusted to be more vertically compact, a refinement made for user interface typography.
5
In all the simple button examples (including other examples in the animation section), the ripple effect compliments the colour of the text or icon - which should follow readability (use a colour contrast checker if in doubt).
In general, this is common sense: if you have a 'dark' button requiring light text, adding light ink will be visible and consistent; ...
answered Nov 24 '14 at 17:33
user56reinstatemonica8
26.1k16 gold badges91 silver badges174 bronze badges
5
Here are two links.. i found these useful to find the fonts..
but you have to select font's image of reasonable size.
http://www.whatfontis.com/
http://www.myfonts.com/WhatTheFont/
I hope this will help you
if you have only images (font's JPGs etc) then first you will need to know the name of that font. And there are 50+% chances to find the font names ...
5
Short answer: Google is much faster than you hosting it yourself.
Long Answer: Putting it on your own server might seem like a good idea to improve load times. After all, the files are closer to your webpage.
But, no. After all, when a user goes to your website, initially they just get some HTML. Here we have references to other files: Images, JS, CSS, and, ...
5
I can't find anything regarding Android shadows on the Google design docs now, but there was apparently once upon a time a list of the values for Adobe Illustrator, but they seem to have taken it down.
There are a lot of resources that list 5 different shadow levels. The Google design docs link to the Polymer docs that say:
Note: The material design ...
5
You need to ensure that the image width relates to the height as the number 16 relates to the number 9.
16 divided by 9 is 1.77777778. That means that your image width must be 1.77777778 times larger than the height.
E.g. an image with the width of 800px should be 450px high.
4
I do not know of any type-pairing sites specifically but I will list some resources I have come across on the subject as well as places you could ask typographers directly about the topic.
Check Smashing Mag as they have done at least a few articles on type-pairing and they link to the resources and web-sites they mention in the articles.
I do not know the ...
4
They are fine for print, as far as freeware fonts go. They aren't designed or programmed for demanding typographic features but they'll get the job done. In fact there are some very well designed examples, within the limited typographic support provided.
I have noticed (mostly comping for web) that they have some strange display quirks in desktop apps. In ...
4
Here is the answer to your question.. check out this video
The 500s are Primary Colors perfect describing the dominant theme in your product and are great for toolbars.
700s are used for Status bars
and 300s are used for Secondary informations
So basically those numbers represent pre-defined shades and tints of Primary colors for specific ...
4
I'd use Merriweather myself. It seems to be the closest of the bunch.
4
You can add css font-variant-ligatures:no-common-ligatures (or font-variant-ligatures:none) to prevent Chrome (and Firefox!) from displaying 'r' that way. IE/Edge don't have the bug.
You could also insert ‌ between every pair 'rt' and 'rf' (the problem shows in it, too) in the source text (it's invisible), to make browsers think that the ...
Only top voted, non community-wiki answers of a minimum length are eligible
