Adobe Photoshop has a large list of parameters for a text and font attributes and in order to take them all into account, a coder has to spend much time. However, a coder is an ordinary man, so he can make mistakes. Whereas this fact, Divine Elemente reads off absolutely all text parameters and Photoshop text effects and converts them in HTML / CSS immediately.
Examples of advanced type converted to CSS / HTML text
The basic text parameters and tips for work with them in Divine Elemente are considered in this guide.
Character and Paragraph styles in Adobe Photoshop
So, let’s consider text parameters and PSD text effects and recommendations for custom and safe fonts’ use in your template during PSD text conversion.
Example of Point type and Paragraph type
|Point type||Paragraph type|
|Point type continues in a straight line unless you press the (Return) [Enter] key to insert a line break.||Paragraph type automatically wraps to the next line when the text reaches the boundary of its box.|
|The space occupied by point type continues to expand as more characters are added.||Paragraph type is restricted to the designated rectangle; characters that don’t fit in the rectangle are hidden.|
|Point type is added from the specific spot in the image where the Type tool was clicked.||Paragraph type is added from the top of the bounding box.|
|To add point type, click with a Type tool.||For paragraph type, drag with a Type tool to create a rectangle to fill with the type.|
|Resizing the bounding box around point type scales the type.||Resizing the container rectangle for paragraph type forces the text to reflow within the container; the type maintains its original size and proportion.|
It is recommended to specify a type of a text layer for theme’s text attributes design in Divine Elemente in order to define and set boundaries of the text block at template’s conversion.
Hint: Use of Point type is recommended for such web elements as ‘Logo’, ‘Navigation menu’, texts that will not be changed in CMS.
Hint: Use of Paragraph type is recommended for elements, which contain more than one line of text, and for elements, which boundaries should be set accurately (‘Posts’ > ‘Titles’; ‘Posts’ > ‘Contents’; ‘Posts’ > ‘Comments’, etc.)
Example of Point type and Paragraph type use
What is a Safe font?
There are many thousands of fonts in the world, but in order the fonts (you use at your website) are displayed in the same way for all users with various OS, it’s recommended to apply a list of “Safe fonts”.
The following fonts are considered to be ‘safe’:
Safe fonts examples
What is a Custom font?
Divine Elemente works not only with safe fonts but with modern custom fonts too, that are usually offered be such services as @font-face, HTML5 fonts, Google Fonts, Fontspring, Typekit, Fontslive, etc. Tips for their use can be found in the Custom fonts guide.
It’s recommended to use no more than three fonts on a web page.
Learn more about font stacks
Divine Elemente allows to use the above mentioned methods plus many optional font attributes and parameters of text formatting that are considered below.
Example of conversion of various text styles
Optional font attributes
Let’s consider each attribute in details:
Leading – the space vertically between lines of text (name comes from the physical piece of lead that used to be used in mechanical printing process to separate lines of text):
Example of the text publishing setting Leading value
Kerning – the amount a character’s horizontal space encroaches into its neighbor:
Example of the text publishing setting Kerning value
Tracking – the horizontal space between each character:
Example of the text publishing setting Tracking value
The Baseline Shift is used to shift characters up or down from their baselines.
Example of the text publishing setting Baseline shift value
Example of shadows
Note: In order to display other Photoshop type effects in your template, there is a possibility in Divine Elemente to convert type layers as images. More details on this issue can be found in Properties guide.
Hint: As Adobe Photoshop and your browser may use different algorithms for text display, it’s impossible to reach 100% fidelity, unless you display a text as an image. However, it’s not recommended, as it can influence your website rating in terms of SEO and search engines (Google, Yahoo, Bing etc.).
Find more about text rendering modes and their differences here: