Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

I'm doing front-end dev, so this question comes from that perspective. When I receive a .psd I manually go through each font in the design, click on it, then use the character panel to get the font, color, size, kerning, etc. Sometimes, I get a design that uses several different fonts (4+) with many variations of the same font (size, color, weight, etc.). This is pretty tedious work... Is there anyway that Photoshop can export a list of all the used fonts and their variations? For example, a list like:

Arial bold 16px black
Arial regular 14px black
Arial regular 14px blue
Oswald 32px rgb(13,74,56)
...

Any suggestions for this? Further, if there is a plugin of sorts that will just lay this information over the elements that would be fantastic!

Thanks.

share|improve this question

3 Answers 3

up vote 6 down vote accepted

Sure, you can use the ExtendScript Toolkit to investigate and manipulate Photoshop documents. For more info, check the documentation or search around the various PS scripting forums.

Based on the script in this article, I whipped up the following script. For every text layer in a PSD file, it will print the font, font-size, and fill-color to the javascript console:

function run(){
    var layerSets = app.activeDocument.layerSets;
    dumpLayerSets(layerSets);

    $.writeln("Top-level layers:");
    dumpLayers(app.activeDocument.layers);

}

function dumpLayerSets(layerSets){
    $.writeln("--- Processing...");
    var len = layerSets.length;
    for(var i=0;i<len;i++){
         var layerSet = layerSets[i];
         //$.writeln(layerSet.name);
         dumpLayers(layerSet.artLayers);
    }
}

function dumpLayers(layers){
    var len = layers.length;
    for(var i=0;i<len;i++){
         var layer = layers[i];
         if(layer.kind==undefined){
                continue;
         }
        if(layer.kind == LayerKind.TEXT){
         $.writeln('font: '+ layer.textItem.font +' font-size: ' + layer.textItem.size + ' color: #' + layer.textItem.color.rgb.hexValue);
        }
    }
}
run();

To test, open a document with text layers in Photoshop. Open the ExtendScript Toolkit and link it to your Photoshop instance. Paste the code above into the workspace and hit the run button.

ExtendScript Toolkit screenshot

Based on this file: Text Layered PSD file

I received the following output:

--- Processing...
Top-level layers:
font: MyriadPro-It font-size: 144 pt color: #0000FF
font: MyriadPro-Bold font-size: 144 pt color: #00FF00
font: MyriadPro-Regular font-size: 144 pt color: #FF0000
Result: undefined
share|improve this answer
    
I had no idea you could access Photoshop with JavaScript! Thanks for this, I ran it and it output 17 different font variations - very useful indeed! –  Chris Rockwell Nov 19 '13 at 0:08

the photoshop plugin SpecKing has an option to show/generate all typographic specifications within your photoshop file - could that help? I haven't tried it myself, but it looks useful.

share|improve this answer

Keep in mind that CSS font matching is based on the font family name, not the fullname (e.g. "Myriad Pro Bold") or the PostScript name (e.g. "MyriadPro-Bold"). Chrome/Safari on OSX will match the PostScript name but that's non-standard behavior, it won't work in Firefox and it won't work in any Windows-based browser. For use in CSS you'll need to map the PostScript name to family/weight/style combinations, so instead of MyriadPro-BoldIt:

font-family: Myriad Pro;
font-weight: bold;
font-style:  italic;

etc.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.