6 Replies Latest reply on Feb 25, 2012 11:38 AM by groove25

    font matcher

    future-architect Level 1

      What is the font that is used on the page, https://www.adobe.com/account.html?  also, are there any good font-matcher tools?

        • 1. Re: font matcher
          groove25 Level 4

          No need for matching fonts, in this case—it's an embedded web font, not an image. The font being rendered for the headings is "myriad-pro-1".


          You can figure this out by looking at the CSS, or even easier by using a handy Firefox extension called Font Finder. Just select the text, then right-click for the contextual menu and choose "Analyze selection".






          Font Finder will show you the full specs for the selected text, including the font stack as well as the specific typeface being rendered.


          If this font had been an image, you could download the image or take a screenshot of it and then upload the results to a site like "What the Font?" or Identifont. These have been around for a long time... but they're not always that accurate, unfortunately. Perhaps someone else can recommend another alternative for identifying fonts from images?

          • 2. Re: font matcher
            future-architect Level 1

            perfect! thanks!

            • 3. Re: font matcher
              future-architect Level 1


              my font seems to be coming out like this... seems a little more bold.  not sure why.  i have the following charactersitics listed for the font-type:

              font-family: "myriad-pro-1",myriad-pro-2,Helvetica,Arial,sans-serif;

                  font-size: 18px;

                  color: #333333;

                  color: rgb(51, 51, 51);

                  background-color: transparent;

                  line-height: 1.17em (21px);

                  vertical-align: baseline;

                  letter-spacing: normal;

                  word-spacing: 0px;

                  font-weight: 300;

                  font-style: normal;

                  font-variant: normal;

                  text-transform: none;

                  text-decoration: none;

                  text-align: start;

                  text-indent: 0px;

              • 4. Re: font matcher
                groove25 Level 4

                I suspect that what you're seeing is either Helvetica or Arial, the third and fourth options in your font stack.


                The font used on the Adobe page is a version of Myriad Pro that's been saved in a web font format and given a name that doesn't correspond with the conventional font name. Looking at that page more closely, it actually appears that they might be using Myriad Pro Light. If you have the Adobe Creative Suite on your computer, then you likely have this font installed; otherwise, you probably don't.


                You might try modifying your font-family and font-weight declarations as follows:


                     font-family: "Myriad Pro", Helvetica, Arial, sans-serif;

                     font-weight: 100;


                Alternatively, you could try "MyriadPro-Light" instead of "Myriad Pro"; this is the PostScript name of the font, which is not quite standard but is recognized by some browsers.


                If you don't see a change, then you either don't have this font installed, or it's not active. (You can change the activation status of a font with a font managment application like Linotype Explorer or Suitcase Fusion.) However, even if it appeared correctly on your computer, only a percentage of your site's visitors—possibly a very small percentage—would see the correct font; they'd have to have the same font installed and active on their computers. This is why Adobe is using an embedded font; it ensures that all site visitors will see the same thing.


                The how's and why's of embedding fonts is another story. It requires a bit of extra CSS, an appropriate font format, and the legal right to publish the font in that particular format.

                • 5. Re: font matcher
                  future-architect Level 1

                  would there be, by any chance, a good tool for determining the color from an image?

                  • 6. Re: font matcher
                    groove25 Level 4

                    I'm not sure what context you're thinking of, but there are many, many options for sampling colors from an image. Try searching for "color picker" or whatever terms are most appropriate.


                    ColorZilla makes an insanely useful plug-in for Firefox (and Chrome): http://www.colorzilla.com/


                    If you're looking to create a palette from an image, you could try these resources:




                    If you're on a Mac, your operating system comes with a Color Picker utility that can sample images:



                    Finally, given that this is a Fireworks forum, I should mention that you can use the Fireworks eyedropper tool to sample colors from an image and save them to your swatches. If you'd like to extract an entire palette from an image, you can do that, too, using the Optimize panel: Choose an indexed color format such as GIF or PNG-8, and select the number of colors. (You may also need to click the Rebuild button.) You can save the results using the Save Palette command from the panel's fly-out menu.




                    Incidentally, this question really deserves a new discussion thread on the forum (as it's completely unrelated to your original question).