Веб-сайт, который вы показали в качестве примера, использует очень толстый/жирный и крупный шрифт. Они также изменили фон, чтобы он был монотонным и имел «плоский» цвет для создания большего контраста. Они как бы размыли некоторые зоны, чтобы детали фоновых картинок не смешивались с текстом.

Возможно, вы не можете сделать это с изображениями на своем веб-сайте immehabayas.com, особенно если это адаптивный веб-сайт. В отличие от вашего веб-сайта, не имеет значения, потеряны ли детали фона Брюстера, чтобы увеличить контраст фона + текста; Вы могли бы хотеть показать детали на своих фотографиях все же. Очень большая и мягкая тень может создать аналогичный эффект, и вы можете сделать это в CSS вместо того, чтобы настраивать каждое изображение слайдера отдельно.

На вашем веб-сайте используется более мелкий и тонкий шрифт и исходное изображение. Ваш текст белый, а фоновое изображение иногда имеет много белого. Вот почему вы не можете получить такой же эффект на свой текст.

Возможно, идея состоит в том, чтобы добавить очень тонкое размытие позади вашего текста и выбрать другой шрифт, который имеет немного большее влияние. Вы также можете добавить тонкую черную тень вокруг этого текста.

Некоторые примеры того, что можно сделать:

В этих примерах используется дополнительный полужирный шрифт OpenSans.

ОРИГИНАЛЬНОЕ ИЗОБРАЖЕНИЕ:

ЧЕРНАЯ ТЕНЬ + БОЛЬШОЙ ШРИФТ

ЧЕРНАЯ ТЕНЬ + ЕЩЕ БОЛЬШОЙ ШРИФТ

ПРОЗРАЧНОСТЬ ФОНА + БОЛЬШОЙ ШРИФТ

ФОН ЦВЕТ БЕЖЕВЫЙ РАЗМЫТИЕ + БОЛЬШОЙ ШРИФТ

ФОНОВЫЙ ЦВЕТ СИНИЙ РАЗМЫТИЕ + БОЛЬШОЙ ШРИФТ

---

Вот еще один способ сделать акцент на тексте при использовании на занятом фоне.

Веб-сайт Brewsters затемнил свои фотографии чем-то вроде тона сепии. Они также используют гораздо более тяжелый шрифт.

С другой стороны, ваш использует довольно светлый шрифт по сравнению с очень светлыми фотографиями. Особенно вокруг внешних областей ваших фотографий, где большая часть текста, он становится светлее, вы должны затемнить его.

Просто посмотрите, где вы разместили текст — это самая белая часть фотографии:

Затемнение, кривые, уровни, яркость/контрастность, аэрография — существует множество способов исправить это. Поиграйте с ними и найдите стиль, который вам подходит, избавившись от некоторых ярких областей.

Веб-сайт, на который вы ссылаетесь, использует жирный шрифт. Они всегда хорошо выделяются и отлично смотрятся в цвете.

Однако шрифт Lato намного тоньше, и я бы не стал играть с цветами на вашем сайте, чтобы увеличить контраст. Если вы хотите, чтобы шрифт выделялся, попробуйте немного увеличить толщину шрифта. Поскольку вы веб-дизайнер, я думаю, вы также знакомы со свойством text-shadow в CSS3? Вы можете использовать текстовые тени, как в этом примере , чтобы ваш текст выделялся больше, не меняя шрифт или толщину шрифта. Вот еще несколько замечательных идей, использующих тот же метод, но в другом стиле.