Some time ago we introduced a new feature of PSD to HTML converter service: extraction of all text styles from Photoshop text layers. Let us to explain conversion of Photoshop text layers into CSS in more details.
Fonts
Which text layers in the Photoshop design will be converted into CSS text? PSD to CSS online service will convert into selectable text only those layers which use web safe fonts. Here is a list of fonts that are considered to be web safe:
- Arial
- Arial Black
- Helvetica
- Comic Sans MS
- Courier New
- Georgia
- Impact
- Lucida Console
- Lucida Sans Unicode
- Palatino Linotype
- Tahoma
- Times New Roman
- Trebuchet MS
- Verdana
- Symbol
- MS Sans Serif
- MS Serif
Text layers which use these fonts will be converted into HTML text that uses appropriate CSS styles. Otherwise, text will be converted into an image with the layer’s text set as an alternative text (‘alt’ attribute).
Using non standard web font is perfect for logos, headings, etc. However it is not recommended to use them for the main content text. First, image loading takes much more time then text loading. Second, text as images is not good for SEO. Third, your users will not be able to select, copy the text, etc.
“Point Text” vs “Paragraph Text”
There are 2 ways of text writing in Photoshop: “Point Text” and “Paragraph Text”. To switch between them you should right click on the layer in the Layers Panel and choose “Convert to Point Text” or “Convert to Paragraph Text” option. You should avoid using “Point Text” for multiline texts. For multiline text you should use “Paragraph Text” option. It will give you much more better result.
Using Layer Efects
If you use Layer Effects to get additional image effects then, as for any use of layer effects, you should convert such a layer into Smart Object or rasterize it. Otherwise, you will get text without any effects.
Following these rules you will easily create a web site from the Photoshop design template.
