Alternative Custom Fonts: Light Your Web Design Way

Alternative Custom Fonts: Light Your Web Design Way by Dmitriy, Divine Elemente Team | |

A long time ago in a galaxy far, far away there was a limited number of fonts which made web design life on the planets unbearable. There were uprisings, oppression and even World Wars.

But the true Jedi, the Prometheus, the true son of Google has helped a lot providing them with fire of Google fonts, custom font faces and Typekit.

Looking for droids

Everyone knows what are these Google fonts, but what are custom fonts?

Let’s get to the bottom of this.

Read More »

5 Free Greeting Christmas Fonts

5 Free Greeting Christmas Fonts by Dmitriy, Divine Elemente Team | |
{clear} THUMBNAIL_BEGIN #image: fonts.jpg; #description:Hey, it’s Christmas soon! We need some Christmas decorations you know, so we are going to talk about fonts... THUMBNAIL_END {/clear}

Hey, it’s Christmas soon!

We need some Christmas decorations you know, so we are going to talk about fonts.

Web designers often need to find the free fonts to make their sites cool and unique, and we thought: "It’s Christmas soon, so why not use some Christmas fonts?"

Then we sneaked to Santa’s locker room and... borrowed some fonts we are presenting to you now :)


Christmas Snow (2011.12.02)

Christmas Snow (2011.12.02)

Christmas is not only about presents and Santa, it’s also about snow.

Download font


Candle 3d (2011.12.09)

Candle 3d (2011.12.09)

It’s not Christmas when there are no Christmas candles.

Download font


Ornamental (2011.12.06)

Ornamental (2011.12.06)

Everything starts with Christmas tree and Christmas tree decorations, so we shouldn’t break the tradition making this font the first one in our collection.

Download font


Fonts-Lab Symphony (2011.12.03)

Fonts-Lab Symphony (2011.12.03)

Nice one to wish merry Christmas to everyone, isn’t it?

Download font


Fluid Christmas (2011.12.12)

Fluid Christmas (2011.12.12)

Sure, snow is fluid after all says captain Obvious ;) So, just cover your site with snow adding festivity to it.

Download font


So, is your site ready for Christmas?

Looks like it is, now you just need to turn on the font on your website; but who wants to have their hands dirty before Christmas supper?

We don’t. Therefore we use the custom fonts in the WordPress theme without coding with the help of Divine Elemente.

So, why not add some festivity to your WordPress theme with the help of Christmas fonts? Pick up a font, download Divine Elemente and go ahead. But don’t forget about chimney ;)

Read More »

Addition and use custom fonts on website

Addition and use custom fonts on website by Dmitriy, Divine Elemente Team | |
Want to create a modern unique design for a website applying not only safe web fonts? You will do it with no problems, using custom fonts with Divine Elemente. Plus, addition of custom fonts on website in several simple steps.

Related: Elements, Properties, Advanced text effects and publishing
[divineAds]

Custom fonts are new attractive fonts, which are not included in the list of safe web fonts at the moment. However, they were added to a page layout by Divine Elemente using the latest achievements in CSS.

Use of custom fonts on website

Use of custom fonts on website

Nowadays, almost all modern browsers (Firefox 3.5+, Chrome 3.0+, Safari 3.1+, Opera 10+, IE 5+) work with custom fonts embedded in a website by CSS.

Custom fonts usage is a step towards new possibilities for a web developer. It is a way to speedy, convenient and various websites. With optional fonts, you’ll be able to improve your website’s design and make it really unique.

Advantages

- Use of CSS only
There is no necessity to use images, Java scripts or flash objects, which slow down website’s loading speed.

- Ideal for SEO
A text remains as a text, in other words, it can be highlighted, change color, become bold or underlined, etc.
Disadvantages

- Website loading speed
depends on the size of a loading font (additional 30-75 kB).

- Restriction on use
Each font has its own license.

Info: Because of long duration and high cost of one font development process, developers take tender care of their own custom fonts using in the Internet, as at page browsing a font is loading locally on the computer and becomes public.


Custom fonts use in Divine Elemente

To add custom fonts on the website with the help of Divine Elemente plugin, it’s necessary to follow several simple steps.
The process of new font’s addition to a template

The process of new font’s addition to a template

Step 1. Download and install a desired font.
You can use our Fonts portal to purchase or download new custom fonts.

Step 2. Specify a font of a text layer in a PSD template.
You are to open a PSD template in Adobe Photoshop, select a text layer there and apply the installed custom font to it, as it is not included in the list of safe web fonts.

Step 3. Launch Divine Elemente and publish a theme.
At publishing of custom fonts, Divine Elemente plugin will display an appropriate message in the log.

After the publishing, the font will be copied in a separate file (or files) and applied to a generated theme / web page.

Note: In case a selected font was not installed in a system for any reason, a font from the “Safe web fonts“ list would be used by default.


Conclusion

Thus, you have just learned what custom fonts are, advantages and disadvantages of custom fonts on website use and easy steps of such kind fonts’ addition. So, now you can decide yourself: use or not to use.
Read More »

Advanced Text Effects and Publishing

Advanced Text Effects and Publishing by Dmitriy, Divine Elemente Team | |

Photoshop text effects, safe fonts and custom fonts are considered in this guide. Related: Elements, Properties, Custom Fonts

[divineAds]

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

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.


Type layers and their conversion

During the analysing of a template, Divine Elemente reads off all possible data from type layers, even the most insignificant ones. Thanks to that, all elements are displayed as closer as possible to the original template.
Character and Paragraph styles in Adobe Photoshop

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.


Use of Point and Paragraph types and their features

You can convert Point type to Paragraph type in Adobe Photoshop and vice versa. Their main differences and ways of their use in Divine Elemente are considered below.
Example of Point type and Paragraph type

Example of Point type and Paragraph type

Primary differences:

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

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

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


Type formatting

If you want to draw attention to any important part of your website content, you often apply various methods of text formatting. Some of automatic PSD to HTML solutions offer only a small part of formatting attributes as underlining, italics, CAPS, bold type, and that’s all.

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

Example of conversion of various text styles


Optional font attributes

Besides character styles (font family, size, color), Divine Elemente plugin also recognizes such font attributes as Font Leading, Tracking, Kerning, Baseline Shift:
Optional font attributes

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

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

Example of the text publishing setting Kerning value

Tracking - the horizontal space between each character:

Example of the text publishing setting Tracking value

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 the text publishing setting Baseline shift value


Type FX and CSS shadow

Users often apply optional Photoshop text effects in type layers (shadows, glow, gradient, pattern, etc.). At this moment Divine Elemente supports not only advanced text output, but processes Shadow effect too (modern trend, you know). All other type effects will be switched off during the text publishing.
Example of shadows

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.


Anti-aliased text

You can always choose a required value of the text anti-aliasing in Photoshop but anyway the text in the browser window will differ from the one created in a PSD template after PSD text conversion.

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:


Conclusion

Thus, you have learned about types, their effects, font attributes and other opportunities that can be applied to a text, and know the tips and output of their use in Divine Elemente plugin during PSD text conversion into a web page.

Related Guides and Tutorials


External links

Read More »