1

What is the CSS that must be created to match (exactly) the style given in the text properties in Photoshop ?

Photoshop has four basic text properties:

enter image description here

  1. font-family. The CSS for this is font-family: name;
  2. ?
  3. font-size. The CSS for this is font-family: 0px;
  4. ?

But how can we set the style for the 2 and 3 properties ?

Here is what the options for those properties are:

enter image description here

enter image description here

Francisco Corrales Morales
  • 3,676
  • 1
  • 37
  • 64
  • Possible duplicate of [Convert letter-tracking value set in Photoshop to equivalent letter-spacing in CSS](https://stackoverflow.com/questions/13509752/convert-letter-tracking-value-set-in-photoshop-to-equivalent-letter-spacing-in-c) – davidcondrey Jul 22 '17 at 08:16

1 Answers1

5

You aren't going to match them exactly.

2.) Different combos of font-style, font-weight, and letter-spacing will recreate many of the options.

4.) Aliasing varies across browsers and doesn't have a "standard." That being said, font-smoothing and especially text-shadow will get you pretty close. This answer has some good examples.

Example Fiddle

Community
  • 1
  • 1
Casey Falk
  • 2,617
  • 1
  • 18
  • 29
  • What format does Photoshop follows ? I mean why don't they use standard CSS properties, and use their own ?. I'm gonna keep searching for a table that tells me like: 'for Sharp use this style..., for Crisp use this style... for Condensed use this style....'. – Francisco Corrales Morales Aug 16 '14 at 16:59